ディーエムガジェット

WordPressのTips備忘録を中心にComputer全般やデジモノ、ガジェット、アプリ紹介など

WordPress サイドバーにFeedlyボタンとRSSボタンを表示する方法

      2015/02/16

WordPress サイドバーにFeedlyボタンとRSSボタンを表示する方法

RSSリーダーって何使っていますか?

Googleリーダーがまだ使えてる時はMac用のRSSリーダーアプリの「Reeder」を使って同期していました。今は「Reeder2」としてiPhoneアプリとiPadアプリが発売されています。iPhone用アプリはこちら、

Reeder 2
カテゴリ: ニュース
現在の価格: ¥500

「Reeder」がFeedlyに対応するために「しばらく待ってくれ!」っとアナウンスしてからもう半年以上時間が経ちます(笑)iPhone版とiPad版は出てるのですが、自分的に一番待っているMac版は全然発売される気配なし。なのでしばらく別のRSSリーダーを使っていたのですが、イマイチ使い勝手が悪く困っていました。そんな時、色々なブログで「Feedlyは神!」的に好評化だったので、この際ちゃんと使い方を学ぼうと思って使い始めたら「何これ!使い易いんじゃん!」となって今に至ります。今ではネットサーフィンにはマストです。最初使い始めた時に「なんでもう少し使い込まなかったんだろう…」と後悔しました。一日で数百ものウェブサイトをチェックするにはRSSリーダーは必需品です。

スポンサーリンク

Feedlyボタンを設置

先月に、Stinger3のSNSボタン群にFeedlyとPocketのボタンも追加する備忘録を残しました。

この時は下のSNSボックスにこのように、

WordPress サイドバーにFeedlyボタンとRSSボタンを表示する方法

ボタンを追加しました。今回はサイドバーにちょっと大きめのFeedlyボタンとRSSボタンを設置してみようかと思います。見えやすい位置にボタンを設置して少しでも多くの人にブログを登録して貰うのが目的です。

スポンサーリンク

サイドバー用のFeedlyボタンを追加

Feedlyのサイトで貼付け用のコードを生成

前回と少し内容がかぶりますが、初めての方もいらっしゃると思うのでもう一度説明をします^^ ご自身のブログ用にFeedlyのサイトで貼付け用のコードを生成します。Feedlyボタン生成ページへ飛びます! まず追加したいボタンのデザインを選びます。

WordPress サイドバーにFeedlyボタンとRSSボタンを表示する方法

サイドバー用なのでちょっと大きめの分かり易いボタンにしました。クリックをして選んでください。次にブログのURLを記入します。

WordPress サイドバーにFeedlyボタンとRSSボタンを表示する方法

最後に生成されたコードをコピーします。

WordPress サイドバーにFeedlyボタンとRSSボタンを表示する方法

次にWordPressの管理画面から外観 → ウィジェット行き左からテキストを選んでウィジェットを左側へ追加します。追加したウィジェットに先程のFeedlyからコピーしてきたコードを貼付けます。現状こんな感じです。

WordPress サイドバーにFeedlyボタンとRSSボタンを表示する方法

一旦このままで次の作業に行きます。

スポンサーリンク

Feedlyボタンに似たRSSボタンを設置

RSSボタンをダウンロードします

Feedlyボタンに似たボタン作っている人いたりしないかなー?なんて思って探していたらいらっしゃいました!

sabotemさんがRSSボタンを作ってくれてしかも公開までしてくれています。ありがたく頂戴させて頂き設置したいと思います。
まずこのような、

WordPress サイドバーにFeedlyボタンとRSSボタンを表示する方法

ボタンをsabotemさんのページからダウンロードしてきます。並べて使おうと、feedlyの購読ボタンっぽいデザインのRSSボタンを作ってみた。ので公開。

かなり良く出来てますね!sabotemさんありがとうございます。

ダウンロードしたボタンをアップロードします

ダウンロードしてきたRSSボタンをメディアにアップロードして使える様にします。管理画面 → メディア → 新規追加でボタンをアップロードします。アップ後、このような編集画面が出るので右側の「ファイルのURL」コピーしておいてください。

WordPress サイドバーにFeedlyボタンとRSSボタンを表示する方法

次にこのコードを参考にして、

自分のURLと画像のURLを入れ替えて使用してください。自分のfeedのURLは「http://自分のURL/feed/」で大丈夫なはずです。その後ウィジェットに戻り貼付けます。先程のFeedlyの後に貼付けてください。

WordPress サイドバーにFeedlyボタンとRSSボタンを表示する方法

そして最後に、feedlyのコードとrssのコードは<P>~</P>で囲まれた部分がひとつの段落であることを表すPタグで囲んでいます。囲むと最終的にこのような表示になります。

feedlyのコードとrssのコードは<P>~</P>で囲まれた部分がひとつの段落であることを表すPタグで囲んでいます。囲むと最終的にこのような表示になります。” title=”wordpress-sidebar-feedly-rss-button_09.jpg” border=”0″ width=”600″ height=”400″ /></p>
<p>並べ方は好みで色々いじってみてください!最後にボタンを押して動作を確認してください!</p>
<p><img src=完成

完成です!サイドバーに目立つようにFeedlyボタンとRSSボタンが追加されました。読んで頂いてありがとうございました。

 - WORDPRESS

Message

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

CAPTCHA


  関連記事

WordPressとGoogleChromeでリンクをスクリーンショットと共に綺麗に載せる方法
WordPressとGoogleChromeでリンクをスクリーンショットと共に綺麗に載せる方法
WordPress[Tweetily] 過去記事を自動ツイートする方法
WordPress[Tweetily] 過去記事を自動ツイートする方法
「All in One SEO」でカテゴリーページが[noindex]になっていた。
「All in One SEO」でカテゴリーページが[noindex]になっていた。
WordPress[Stinger3] サイドバーのアイコンを変更する方法
WordPress[Stinger3] サイドバーのアイコンを変更する方法
WordPress[Preserve Editor Scroll Position] エディターのスクロール位置を記憶
WordPress[Preserve Editor Scroll Position] エディターのスクロール位置を記憶
WordPress[Revive Old Post] アップデート後に過去記事自動ツイートが停止
WordPress[Revive Old Post] アップデート後に過去記事自動ツイートが停止
WordPress[XML Sitemap Generator] 時刻設定を日本時間に修正する方法
WordPress[XML Sitemap Generator] 時刻設定を日本時間に修正する方法
WordPress[Stinger3] スマホ用ページでヘッダー画像がはみ出る問題
WordPress[Stinger3] スマホ用ページでヘッダー画像がはみ出る問題
WordPress[Acunetix WP Security] セキュリティー対策としてユーザー名(admin)を変更
WordPress[Acunetix WP Security] セキュリティー対策としてユーザー名(admin)を変更
WordPressテーマ「Stinger3」にプラグインなしでGoogleアナリティクスを導入する方法
WordPressテーマ「Stinger3」にプラグインなしでGoogleアナリティクスを導入する方法