CUBE-LOG | きゅーぶろぐ

WordPress最初にやるべき各種設定!その1:サイドウィジェットにRSSとFeedlyのボタンを設置

WordPress 2014年09月9日
WordPress最初にやるべき各種設定!その1:サイドウィジェットにRSSとFeedlyのボタンを設置
Pocket

そもそもRSSを活用されているユーザーがどれほどいるのか。
また、RSSを自身で活用してないから良く分からない。
上記のような疑問点が出て来るかとは思いますが「活用ユーザーが少ないかも?」といって設置を避ける必要は無いので気にしない。ゼロじゃない限り設置して損は無いです。
自身がRSSを良く理解していないってこともあり得るかと思いますが、こちらも理解していないと設置できないってことは全く無いので設置すべきかと思います。

RSSを活用する方法についてはまた別の機会に詳しく書こうと思っていますので、まだ活用されておられない方はその機会に是非一緒に使い初めてみましょう。

はじめに

今回の目標はこのブログのサイドエリアにあるRSSフィードのアイコンを表示すること。
もう1つがRSS情報を収集する「RSSリーダー」で人気の「Feedly」をお使いの人向けに、ワンクリックでカンタンに購読して頂けるようにアイコンボタンを設置します。
どちらも設置するのに特別難しいことは無いので、ブログ立ち上げ初期のうちに設定しておけばよろしいかと。

ボタンの準備

「RSS」と「Feedly」のボタンを設置することを決めておりましたので以前に両方のボタンを制作してみました。
必要であれば画像素材をダウンロードして下さい。

WordPress用にとRSSボタンとFeedlyのボタンを自作してみたので配布

記事の内容ももちろんのことながら、可能な限りデザインにも気をつけたいと思うのが本音ではないでしょうか。
そのためにも同じようなデザインのアイコンを用意すべきかと思いますので、いっそのこと作っちゃいました。
ご利用は自由ですのでダウンロードして使ってやってください。
ご利用の際に当ブログへリンクなんかをしてくれると心から喜びます。

まずはFeedlyのボタンを設置

Feedlyが提供している画像を使う場合は下記からそのままコードを持ってくればOKです。

Feedly
http://www.feedly.com/factory.html

ボタンの種類を選びます
ボタンの種類を選びます。この際Feedlyの提供しているボタン以外を使う予定であっても、そのままコードを頂いたらいいと思いますので、ご希望のサイズの画像を選択してしまいましょう。

ご自身のブログのfeedを提供するURLを入力
次にご自身のブログのfeedを提供するURLを入力。
WordPressにはいくつかのRSS用URLが用意されていますので用途によって使い分けてくださいってことなんだけど、そもそも良く分からない場合は一番単純なやつでいいかと。(下記参照)

  • http://example.com/?feed=rss
  • http://example.com/?feed=rss2
  • http://example.com/?feed=rdf
  • http://example.com/feed=atom
  • http://example.com/feed/
  • http://example.com/feed/rss/
  • http://example.com/feed/rss2/
  • http://example.com/feed/rdf/
  • http://example.com/feed/atom/

てことで

http://ご自身のURL/feed/

こちらを使います。

当ブログの場合は下記となります。

http://cube-dg.com/feed/

コードが生成されます
このURLをFeedlyの先程の箇所に入力。Enterを押せば下に張り付け用のコードが生成されますので、コード全てをコピーしてしまいます。
手に入ったコードは一度メモ帳にでも貼付けておいてください。
ボタンをそのまま利用する場合はコードそのまま、オリジナルのボタンを利用する場合は次の項目に進みます。

オリジナルのボタンをメディアとしてWordPressにアップロード

WordPressの管理画面、左側のメニューにある「メディア」へ進み、使用したいボタン画像を新規追加でアップロードします。
アップロード完了後、表示されているボタン画像をクリックすればファイルの詳細を確認できるかと思います。
その画面右側にある「URL」をコピーし、先程Feedlyからコピーしてきたコードの画像部分と置き換えます。
Feedlyからコピーしてきたコードの画像部分と置き換え

Feedlyからコピーしてきたコード内の下記箇所内にURLがあるかと思います。

<img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-rectangle-flat-big_2x.png' alt='follow us in feedly' width='131' height='56'>

そのURLがボタン画像を指定しているものですので、今回自身でアップした先程のオリジナルボタン画像のURLに置き換えます。

置き換えが完了したら、いよいよWordPressのウィジェットに貼付けます。
いよいよWordPressのウィジェットに貼付け
左側メニューの「外観」→「ウィジェット」と進み、利用できるウィジェット内から「テキスト」を選択し追加。
タイトルを入力後、先程のコードをペーストして保存すればまず1つ完了です。
先程のコードをペーストして保存すればまず1つ完了
正常に動いているかサイトを確認して次に進みましょう。

RSSボタンの設置

今度は自身のRSSfeedを表示する為の「RSSボタン」を設置します。
まずはFeedlyのボタンを設置したときと同じように、ボタン画像をメディアとしてWordPressにアップロード。
またまた同じように画像のURLをコピーして保持しておいて下さい。

Feedlyの時とは違い、コードは自身で用意する必要があるので下記をそのままコピーして使って下さい。

<a href="ご自身のFeedURL"><img src="ボタン画像のURL" width='131' height='56' border="0" /></a>

必要箇所を編集して、先程作ったテキストウィジェットに追加してしまいます。
先程作ったテキストウィジェットに追加

またまた正常に動いているかをチェックしたら完了です!

まとめ

必要性は間違い無くあるので設置して損は無いです。
結構カンタンに設置できますし、オリジナルのボタンとか必要無かったらFeedlyに関してはコピペするだけ。
コツコツとした作業ではありますが、記事だけでは無く提供する環境を整えるのもブログをどんどん成長させる為には非常に大切。
ということで、是非設置してみてはいかがでしょーか。

配置なんかで多少スタイルシートをいじる必要はあるかも知れませんが、そこそこカンタンですのでチャレンジしてみて下さい。

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Search

Category

RSS

follow us in feedly     

About

About CUBE

Name : CUBE(キューブ)
Web&グラフィックデザイナー