Webの記録

WordPressサイトでRSSフィードボタンを設置してみた♪

投稿日:2012年1月6日 更新日:

この記事は約 4 分で読めます。

何気にWebサイトで、オレンジ色のRSSフィードボタンを見掛けます。

Webサイトの新着情報配信をする為のものなんですが、私のサイトでは今までボタンを設置してませんでした。

WordPressサイトでRSS購読ボタンを設置する方法、とても簡単だったのでメモしてみます。

※通常サイトとは違うので、Wordpress利用の場合限定です。
パーマリンクを設定の場合のみを書いていた為、パーマリンク設定がされていない場合の記述を追記しました。(2012年6月4日)



ウィジェット利用の場合。

ダッシュボードの「外観」→「ウィジェット」から、「RSS」を選択します。

RSSフィードのURLを入力して、他はお好みで入力します。

ウィジェットでRSS設定をする場合

※RSSのURLは、表示したいURLの後に「/feed/」を入れました。個別の記事の場合は、記事のURLの後に「/feed/」を入れます。

実際にどんなカンジになるのかをブラウザ確認してみたら、こんなカンジ・・・。

※フィード内の項目を5件にして、タイトルを付けなかった場合でやってみました。

ウィジェットでRSS設定した場合の画面表示例

う~~ん、アイコンだけですっきり見せたいかな・・・。


RSSアイコンを用意して、ボタン設置の場合。

アイコンを用意します。私は、フリーのアイコン素材を利用してみました。

アイコンをサーバーにアップします。Wordpressのダッシュボードから「メディア」→「新規追加」でアップしてOKです。

あとは、アイコンを設置したい場所に以下を記述するだけ。


パーマリンク設定をしている場合
<a href="サイトのURL/feed/">
 <img src="アイコンのパス" border="0" width="画像の幅" height="画像の高さ" alt="RSS" title="RSS" />
</a>

※RSSのURLは、表示したいURLの後に「/feed/」を入れました。個別の記事の場合は、記事のURLの後に「/feed/」を入れます。


パーマリンク設定をしていない場合
<a href="サイトのURL/?feed=rss2">
 <img src="アイコンのパス" border="0" width="画像の幅" height="画像の高さ" alt="RSS" title="RSS" />
</a>


※私が試した分のみを書いています。他にも方法がありますので、日本語Codexを確認してください。

ボタン設置イメージ

ついでに、Twitterやfacebookのボタンも設置して、こんなカンジになりました。

RSSフィードボタン、とてもカンタンに設置出来ました♪


パーマリンク設定について

今回、パーマリンク設定をしているかどうかで設定が違ってます。念のため、パーマリンク設定についてメモ。

パーマリンクの設定をするとURLの末尾が投稿と固定ページで変わります。

設定方法は、ダッシュボードの「設定」→「パーマリンク設定」をクリックし、「カスタム構造」にチェックします。
そこでURLの表示の仕方を入力します。

私は以下のように設定しています。多分、人によってケースによってここは変わるんだと思います。

/archives/%post_id%/

-Webの記録
-, , , ,

執筆者:


comment

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

This blog is kept spam free by WP-SpamFree.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

透明画像を置いて画像をコピーガードする。

この記事は約 2 分で読めます。 今回は画像の上に透明画像を置く事で元の画像を右クリックで保存出来ないようにするテクニックです。 まずは、デモ画面を見て頂きましょうか・・・。 【2016.6.2】一部 …

no image

気になるブラウザサイズ 集計結果。

この記事は約 2 分で読めます。 最近、Webサイトを作るのにどれ位の幅で作れば良いのかとても迷ってきました。 いろんな方のサイトをいじらせてもらいながら、表示確認をしていて驚く事もしばしば・・・。 …

no image

スマートフォン用サイトで、タップで電話をかけさせたい時

この記事は約 1 分で読めます。 スマートフォン用のサイトで、必要になったのでメモ。 ボタンをタップした時に電話をかけさせたい時の記述と、郵便番号などの数字を電話番号と間違えて勝手に電話番号のリンクが …

no image

「ページ内リンクはするするスクロール」にチャレンジ!!

今日は・・・、「ページ内リンク」でちょっとイイカンジにスクロールするjQueryにチャレンジです。
ページ内リンクをそのまましても(javaScriptなし)出来ますが、そのままだといきなり戻り先に到着してしまってびっくりするので、「yuga.js」でするするという動きをつけてみました。

no image

WordPressテンプレートタグをメモ【コンテンツ編】

この記事は約 1 分で読めます。WordPressにはたくさんのテンプレートタグがあります。 似たようなものや、同じ結果なのに記述の仕方が何通りもあったりするので、後で「何だっけ?」って思う事もしばし …