wordpressにRSSを設置する方法！自動更新・自動配信のすすめ

2017年8月3日 2018年5月20日

webcode編集部

wordpressで記事を投稿していると、もっと色んな人に見てもらいたい！でも出来る限り手間は増やしたくない。といったことがありますよね。

他にも、有名なサイトに直接リンクを貼りたいけど、1つ1つ新着情報を取ってくるのが面倒。といった場合にも今回お伝えするRSSというものが役に立つと思います。

今回は、RSSの解説からフィードの取得・表示まで細かくお伝えしていきます。

CONTENTS

1 RSS(アールエスエス)とは？
- 1.1 RSSでできること
2 自分のサイトのRSSの設定方法
3 外部RSSを読み込み、表示させる方法
4 RSSの取得、表示に役立つプラグイン
5 RSSフィードのURLを確認する方法
6 RSSにアイキャッチ画像を配信
- 6.1 プラグインを利用する
- 6.2 プラグインを使わない場合
7 表示されない時の確認ポイント
8 RSSフィードに関するまとめ

RSS(アールエスエス)とは？

RSSとは、更新情報などの日付やタイトル、その内容の要約などを配信するための技術です。 XML形式で記述されており、専用の「RSSリーダー」を利用する事によって、様々なサイトの更新情報を自動的に取得、閲覧できるようになります。

まず、RSSは簡単に言うと、情報を配信するための技術です。

馴れないとは思いますが、この「XML形式」がポイントです。これによって、より機械が配信しやすいように設計したと考えておいてください。

RSSでできること

いまいちイメージがつかない方の為に、ひとつサンプルをお見せします。これは、Googleトレンドから今の「急上昇ワード」を引っ張ってきているところです。

RSSを上手く使えば、こういったことを実装できます。

自分のサイトのRSSの設定方法

それでは、自分のサイトのRSS情報を配信する方法をまずはお伝えしていきます。

WordPressのテーマによっては、アイコンを設置するだけという状態のものもあります。

1.アイコンを準備する

まずは、アイコンを準備しましょう。

これは、正直どれを利用しても大丈夫です。出来る限りロイヤリティフリーのものや、商用利用OKのものを選びましょう。

(とはいえ、画像を特定できるのかというレベルでいっぱいRSSのアイコンが公開されていますが…)

上の画像を保存して利用しても大丈夫です。

2.自サイトのRSSフィードURLを取得する

次は、自分のサイトのRSSフィードURLを取得する必要があります。RSSフィードのURLの例を出すと「https://trends.google.co.jp/trends/hottrends/atom/feed?pn=p4」こういったものです。

この自分のサイト版を入手します。RSSフィード取得・検出ツール – RSSリスティングで自分のサイトのURLを入力すると見つかることもありますので一度試してみてください。

自動検出がされない場合は、後述のURLの確認方法で自分のサイトのソースから入手してみてください。

3.imgタグを準備する

次は、imgタグを準備します。あまり詳しくない方は下のコードをコピペしてください。

<a href="サイトのRSSフィードURL"><img src="アイコン画像のURL"></a>

1	<a href="サイトのRSSフィードURL"><img src="アイコン画像のURL"></a>

ここの「サイトのRSSフィードURL」「アイコン画像のURL」を各自変更してください。

4.ウィジェットなどに追加する

最後はウィジェットに追加します。「テキスト」を追加してください。

このテキスト内に先程のimgタグを挿入します。

これで表示をすると完了です！

5.(おまけ)プラグインで代用することも可能です。

RSSのフィードURLだけ入手できれば、プラグインで設置をすることも可能です。「Simple Social icons」などでも設定できるので、苦手な方はそちらをお使いください。

外部RSSを読み込み、表示させる方法

次は、自分のサイトに外部のRSSフィードを読み込む方法です。こちらに関しては、プラグインもいっぱいあるので、プラグインで代用してみてもいいでしょう。

自分で出来たほうが知識は増えると思いますので、紹介しておきます。結構PHPをゴリゴリ書きます。取得できるデータがどのようなものかというと、こういう感じです。

RSSフィード(XMLデータ)を取得しよう

まずは、RSSフィードを取得する所から始まります。URLはもう既に準備してあるという状態から話を進めていきます。(URLの探し方は後述)

phpのコードで

$url = "https://searchranking.yahoo.co.jp/rss/total_ranking-people-rss.xml"; //ここは各自のURL
	$string = file_get_contents($url);
	$xml = simplexml_load_string($string);
	$json = json_encode($xml);
	$array = json_decode($json,TRUE);

$url = "https://searchranking.yahoo.co.jp/rss/total_ranking-people-rss.xml"; //ここは各自のURL

$string = file_get_contents($url);

$xml = simplexml_load_string($string);

$json = json_encode($xml);

$array = json_decode($json,TRUE);

と書きます。これで、$arrayには先程のXMLデータを基にした配列が入ります。簡単にコードを解説しておくと、xmlデータを取得し、配列に直してるだけです。

foreachで個別に処理

取得したデータは配列です。大体の場合RSSの処理は、一部の要素を繰り返し取得するので、foreachを使って処理するのが一般的です。

foreach($array["channel"]["item"] as $value){
	// ここに処理
}

foreach($array["channel"]["item"] as $value){

// ここに処理

}

上は一つの例ですが、このようにforeachを使って個別に処理をします。

xmlデータは配列と似たように見ると分かりやすい階層構造になっています。それを利用して、配列で操作してきます。

HTMLのタグで整形しよう

上記のコードをテーマファイルの中のphpファイルに記載するか、functions.phpに入れておきます。

そして、HTMLで表示したいところでechoなどで表示します。下は一例です。

foreach($array["channel"]["item"] as $value){
	echo '<span>'.$value["title"].'</span>';
}

foreach($array["channel"]["item"] as $value){

echo '<span>'.$value["title"].'</span>';

}

ただ、筆者がよくつかう方法はtextなどの変数に加算していき、最後に一気に表示します。

RSSの取得、表示に役立つプラグイン

PHPが苦手！という方は、プラグインを使ったほうがいいでしょう。一長一短なので、好きなものを使えばいいかと思います。

RSSImport

https://ja.wordpress.org/plugins/rss-import/

RSS Antenna

https://ja.wordpress.org/plugins/rss-antenna/

FeedWordPress

https://ja.wordpress.org/plugins/feedwordpress/

RSS Image Feed

https://ja.wordpress.org/plugins/rss-image-feed/

RSSフィードのURLを確認する方法

さて、RSSフィードのURL入手方法です。これは自分のサイトのRSSフィードURLを確認するためにも、他のサイトのフィードを取得するためにも重要です。

ニュースサイト系の探し方

まずはYahoo!やGoogleなどでのRSSフィードの探し方です。これは簡単で、「RSS」の表記を目で探しましょう。

「yahoo rss」のように、rssをつけて検索をすると比較的見つかりやすくなる印象です。

この「RSS」を押すと、XMLデータに飛びます。

RSSフィードのまとめサイトがある

有名なブログサイトなどは、RSSフィードのまとめサイトに纏められています。

HTMLソースから探すこともできる

どうにもこうにも見つけられない場合は、HTMLソースから見つける方法があります。探したいページでHTMLソースを開きましょう。

右クリック→ソースを表示から見ることが出来ます。

ページのソース内で「application/rss+xm」で検索をかけると、URLが取得できるでしょう。

RSSにアイキャッチ画像を配信

今表示しているRSSにアイキャッチを追加したい場合、以下のような対策を取ります。

プラグインを利用する

アイキャッチ画像がデフォルトで使えるプラグインを利用しましょう。例えば、RSS Image Feedなどはアイキャッチを使用できます。

https://ja.wordpress.org/plugins/rss-image-feed/

プラグインを使わない場合

プラグインを使わない場合は、下のようなコードをfunctions.phpに記載していきます。

function rss_post_thumbnail($content) {
	global $post;
	if(has_post_thumbnail($post->ID)) {
	$content = '<p>' . get_the_post_thumbnail($post->ID) . '</p>' . $content;
}
return $content;
}
add_filter('the_excerpt_rss', 'rss_post_thumbnail');
add_filter('the_content_feed', 'rss_post_thumbnail');

function rss_post_thumbnail($content) {

global $post;

if(has_post_thumbnail($post->ID)) {

$content = '<p>' . get_the_post_thumbnail($post->ID) . '</p>' . $content;

}

return $content;

}

add_filter('the_excerpt_rss', 'rss_post_thumbnail');

add_filter('the_content_feed', 'rss_post_thumbnail');

(こちらは、WordPressのアイキャッチ画像をRSSリーダーに表示させる方法を参考にさせていただきました)

add_filterを入れることで、HTMLデータを整形することができます。上の例では、本来のcontentの前にサムネイル画像を入れたpタグを追加しています。

表示されない時の確認ポイント

ここまで色々と設定してみたけど、上手く表示されない！といった時があるでしょう。その時のチェックポイントをお伝えしておきます。

RSSフィードのURLは有効か

RSSフィードは配信終了になることもあるので、実際にブラウザに入力してアクセスできるか確認してみましょう。

PHPコードが間違ってないか

PHPコードが間違っていないか確認しましょう。特に躓くポイントは以下です。

XMLデータを配列にしたあとにインデックスの指定を間違う
変数名を間違えている
加算に「.」ではなく「+」を使っている

ブロック要素とインライン要素の順番

HTML要素をPHPの中で使っている時、ブロック要素とインライン要素の順番を間違えていると、wordpressが自動的に判断してタグを消すことがあります。

aタグの中にdivタグを入れたり、spanタグの中にpタグを入れていないかなどを確認してください。

空欄のHTMLタグが消えていないか

spanタグの中身が空だったりすると、タグ毎削除されることがあります。faviconなどでアイコンを使う場合も削除されることがたまにあります。

これを防ぐためには、pタグなどのブロック要素で意図的に囲むようにするといいでしょう。(それでもたまに消されますが…)

RSSフィードに関するまとめ

RSSフィードは、直接自分でデータを取ってくると考えると面倒でとっつきにくい印象がありますが、自動で相手の更新を反映しているので長い目で見れば楽ができます。

Googleトレンドやyahooニュースなどを自分のサイトに反映させるのもおもしろいですね。

最後まで読んでいただき、ありがとうございました。