ガジェット通信 GetNews

見たことのないものを見に行こう
「ジャスティス・リーグ」特集サイト

WordPressでRSSボタンを設置する方法【初心者向け】

DATE:
  • ガジェット通信 GetNewsを≫
20160620

田島メンター!!WordPressの案件でRSSを使いたいという要望があるんですけど、どうやったらいいんですか?

 

20163020-2

WordPressにRSSを設置する方法は、「ウィジェットのテキストを利用する方法」と「プラグインを使う方法」があるんだ。どちらでもできるから、一応両方とも教えてあげるね。

 

20160620

はい、お願いします♪

 

 

 

メディアやブログなどネット上で記事を読む媒体が非常に多くなってきています。

そのためRSSを使う読者の方も多くなっているでしょう。

また、RSSを利用すれば登録している読者全員に新着記事を通知することができます。

そういった便利なツールRSSをWordPressで設置する方法を、直接入れる方法とプラグインを使う方法2通りに分けて解説します。

 

なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。

 

ウィジェットのテキストを使用する方法

まず、RSSボタンに使用するアイコンを用意します。今回はデザイン素材.comからフリーのアイコンを入手しました。
素材サイトの指示に従って画像をダウンロードし、それをWordPressのメディアライブラリにアップロードしておきます。

rss_p_1

次に、WordPress管理画面の左メニューから「外観」→「ウィジェット」を選択します。

rss_p_2

左の「利用できるウィジェット」一覧から「テキスト」を右の「サイドバー」の欄へドラッグで移動させます。

rss_p_3

ここで各項目をドラッグすることで順番を入れ替えることができます。今回は一番下に移動させました。

rss_p_4

「テキスト」の右にある▼をクリックすると下のような画面になるので、各項目を入力します。

タイトル:サイト内で表示される項目の名前です。ここでは”RSS”とします。
内容:RSSアイコン用の画像にサイトのRSSフィードへのリンクを貼ります。形としては以下のようになります。

WordPressでRSSボタンを設置する方法【初心者向け】 rss_p_5

サイトのフィードURLを調べる方法

自分のサイトのRSSを調べるのにはRSSリスティングのフィード検出を使用すると便利です。

http://berss.com/feed/Find.aspx

「ブログやサイトのURLを入力して自動検出スタートをクリック」の欄にサイトのURLを入力し、「自動検出スタート」をクリックします。
「フィードの自動検出に成功しました」というメッセージの下に表示されたものがそのサイトのRSSフィードです。

rss_p_6

RSSアイコン画像へのリンクを調べる方法

メディアライブラリにアップロードされているRSSボタン用アイコンへのリンクを確認します。
WordPress管理画面のメニュー「メディア」→「ライブラリ」から最初にアップロードしておいたアイコンをクリックします。
画像の詳細情報にある「URL」の部分がRSSアイコン画像へのリンクです。(URLの部分をクリックして選択した後Ctrl+Aで全選択→Ctrl+Cでコピーすることができます)

rss_p_7

各項目を入力し「保存」をクリックするとサイドバーにRSSボタンが設置されます。

rss_p_8

 

「Simple Social Icons」プラグインを使用する方法

続いて、プラグインを使用してRSSボタンを設置する方法です。
この場合プラグインにアイコンを生成する機能があるため、フリーの画像アイコンを用意する必要はありません。

Simple Social Icons

プラグインをインストールした後WordPress管理画面の左メニューから「外観」→「ウィジェット」を選択し、「利用できるウィジェット」から「Simple Social Icons」の項目を「サイドバー」へドラッグして移動させます。

rss_p_9

Simple Social Iconsの右の▼をクリックし、設定画面を表示させます。
「Title」の部分にはサイトに表示させる項目の名前を入力することができます。ここでは”RSS”としています。

rss_p_10

メニューの下の方へ移動し、「RSS URI」の欄にRSSフィードを入力します。

rss_p_11

一番下の「保存」をクリックするとサイドバーにアイコンが追加されます。

rss_p_12

この自動生成されるアイコンは大きさや色を変えることができます。
「Icon Size」を50pxにし、「Background Color」と「Background Hover Color(マウスカーソルを合わせた時の色)」を変更してみました。

rss_p_13

「保存」を押すと設定が反映されます。

rss_p_14

 

今回の記事は以上です。

ぜひ、WordPressの使い方を覚えましょう!

 

20160620

 

どちらの方法も簡単ですね〜♪

 

20163020-2

 

そうだね、WordPressはやりたいことが手軽にできるからいいよね!

 

20160620

 

はい♪

 

 

[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。

カテゴリー : デジタル・IT タグ :
TechAcademyマガジンの記事一覧をみる ▶
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。