WordPressのサイドバーにRSS購読ボタンを設置する方法

20160510-149
  • このエントリーをはてなブックマークに追加

ブログをリピートして読んでくれる読者を得るために忘れてはいけないものがRSSだ。

RSSとは、ブログの更新情報をいち早くキャッチするための仕組みの一つで、例えば、バズ部のブログのRSSを購読すると、新しい記事を更新するたびにその更新情報とRSSリーダーというサービスで知ることができる。

RSS リーダーを利用している人は日本国内だけでも何百万人もいるので、これだけでも有効な読者獲得ツールだと言える。

そこでここでは、ブログの定期購読者を獲得するために下図のようにブログにRSS購読のためのフォローボタンを設置する方法をご紹介する。

それでは、早速設定を進めて行こう。

なお、このページでは

  • サイドバーにFeedlyの公式ボタンを設置する方法
  • 任意のボタンを作ってFeeldyと連携させて設置する方法

の2つを解説している。

前者の方が、設定は楽だが、もしブログデザインに沿ったボタンを使いたい場合は後者の設定方法を参考にして欲しい。

※Feedlyを活用してみよう
RSSリーダーの中で最も多くのシェアがあるのがFeedlyというサービスだ。RSS利用者の9割以上はこのサービスを使っている。これからブログを運営するなら必須のものなので、あなた自身でもFeedlyを使い始めておこう。
※先にパーマリンクの設定を行っておこう
RSSの設定は、WordPressのパーマリンクの設定を行った後でなければ行えない。先に『WordPressのSEO面で最適なパーマリンクの設定方法』を実践しておこう。

1.Feedlyの公式ボタンをサイドバーに設置する方法

まずはFeedlyの公式ボタンを設置する方法からご紹介しよう。早速 Feedly の公式サイトで提供している自動生成ツールにアクセスしよう。

下図の通り最初に使用したいバナーデザインをクリックして次に RSS 用のURL を入力しよう。あなたのサイトのアドレスの末尾に ” /feed “を付けたものがRSS用のURLだ。例えば、バズ部のRSS URL は http://bazubu.com/feed となる。

アドレスを入力するとコードが自動生成されるので、これを全て選択してコピーし、メモ帳に保存しておこう。

後は、このコードを、WordPressのウィジェットに貼付けるだけだ。WordPressの管理画面から「外観 → ウィジェット」とクリックして、下図のようにテキストウィジェットにコードを貼付けよう。

wordpress-rss

RSSの公式ボタンの設置はこれで完了だ。

2.オリジナル画像を用意して設定する方法

Feedlyの公式ボタンではサイトのデザインに合わない場合もある。そんな時は自分で画像を用意しよう。ボタンの画像は「social icon free」などと検索するとダウンロードできる素材があるので、まずは好みの画像を見つけておこう。

それではオリジナル画像を設定する方法をご紹介する。

2−1.Feedlyの購読ボタン用のURLを取得する

まず最初に Feedly の公式サイトにアクセスして、入力欄にあなたのサイトのURLを入力しよう。

wordpress-rss-2

そのサイトのタイトルが表示されるのでクリックしよう。

wordpress-rss-4

以下のようにサイトの RSS 情報が表示される。

このページのURLが、ブラウザから Feedly 購読用の URL になる。これをメモ帳に保存しておこう。

2−2.コードを取得する 

続いてFeedlyボタンのコードを入手しよう。ここはHTMLの知識が全くない方でもできるように、最も簡単な方法をご紹介する。まず、 WordPress の管理画面にログインし、左メニューから「投稿 → 新規追加」とクリックしよう。

「メディアを追加」をクリックして、用意していたRSS バナー画像をアップロードしよう。

メディアライブラリに画像をドラッグ&ドロップしてアップすればアップロードできる。アップロード後「投稿に挿入」をクリックしよう。

画像が表示されるのでクリックしよう。

「リンク挿入/編集」ツールをクリックしよう。

次のポップアップ画面が表示されるので、先に取得した Feedly 購読ボタン用の URL を貼付けよう。

「リンクを新ウィンドウまたはタブで開く」に忘れずにチェックを入れるようにしておこう。設定が完了したら「更新」ボタンをクリックする。

次にエディタの「テキスト」タブをクリックしよう。

コードが表示されるので全て選択してコピーする。

後は、このコードをウィジェットに貼付けるだけだ。

1−3.ウィジェットにコードを挿入

管理画面の左メニューにある「外観 → ウィジェット」の順にクリックしよう。次のウィジェットの画面が表示されたら、「テキスト」ウィジェットを「メインサイドバー」に追加する。テキストウィジェットを選んで先ほどのコードを貼付ければ良い。

wordpress-rss-6

設定が完了したら「保存」ボタンをクリックした後に、トップページを見て実際の表示を確認しよう。

まとめ

サンプルサイトで使用している ” Twenty Twelve ” というテーマでは、下の図のようにサイドバーの一番上に各種ソーシャルボタンを表示している。

実際のコードをここに貼付けておくので、あなた自身で設定する際の参考にして欲しい。

<p> <a href=”http://#”><img class=”alignnone size-full wp-image-522″ src=”http://wordpress-designer.net/wp-content/uploads/2014/11/facebook-32.png” alt=”facebook-32″ width=”32″ height=”32″ /></a>  <a><img class=”alignnone size-full wp-image-525″ src=”http://wordpress-designer.net/wp-content/uploads/2014/11/twitter-32.png” alt=”twitter-32″ width=”32″ height=”32″ /></a>  <a href=”http://#”><img class=”alignnone size-full wp-image-523″ src=”http://wordpress-designer.net/wp-content/uploads/2014/11/google-32.png” alt=”google+-32″ width=”32″ height=”32″ /></a>  <a href=”http://#”><img class=”alignnone size-full wp-image-524″ src=”http://wordpress-designer.net/wp-content/uploads/2014/11/rss-32.png” alt=”rss-32″ width=”32″ height=”32″ /></a></p>
<div class=”fb-like-box” data-href=”https://www.facebook.com/bazubu” data-width=”238″ data-height=”300″ data-colorscheme=”light” data-show-faces=”true” data-header=”false” data-stream=”false” data-show-border=”false”></div>
<div id=”fb-root”></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/ja_JP/sdk.js#xfbml=1&appId=444211749032087&version=v2.0”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>

RSS バナーのサイドバーへの設置方法は以上だ。WordPressのサイドバーの設定に関しては合わせて以下の3つのページも確認しておこう。

  • このエントリーをはてなブックマークに追加

バズ部のWordPress無料オリジナルテーマ

cta_extension” Xeory (セオリー)”は、バズ部のノウハウをしっかり詰め込んだ、コンテンツマーケティングに特化したWordPressのテーマです。Xeory はWEBマーケティングで結果を出すために次の3つの特長を備えています。

  • ・お問合せなどにつなげる導線の実装が簡単
  • ・ソーシャルメディアと連携する仕組みが導入済み
  • ・内部構造をSEO化にこだわって徹底して改善

世の中に良質なコンテンツが溢れることを想い、テーマは無料でご提供しております。まずはダウンロードしてお試しください。


Xeory テーマを見る

最新の記事情報が取得できます

Facebook

「いいね!」ボタンを押すと、最新情報がすぐに確認できるようになります。

Twitter

「フォローする」ボタンを押すと、最新情報がすぐにツイート上で確認できるようになります。

コメントはこちらから