前回の記事では、RSS表示用の専用タグを用いて他のブログの最新記事を自分のサイトで表示する手順を紹介しましたが、今回はもっと手軽に、Wordpressの標準ウィジェットを利用して、他のブログの記事を自分のサイトに表示する手順を説明します。

最も手軽に、他のブログの最新記事タイトルを表示する方法

Wordpressには、RSSやATOM形式のフィードから、記事を自動で表示してくれるウィジェットが標準で用意されています。

他のブログやサイトであっても、RSSやATOMのURLを入力するだけで、手軽に他サイトの最新記事を表示することができます。

■完成イメージ
120521-04

RSSフィード読み込み用のウィジェットを設定する

まずは、RSSフィードを表示するためのウィジェットを、ウィジェットエリアに追加します。下記に手順を説明します。

①Wordpressのダッシュボードから、「外観」⇒「ウィジェット」に進み、「RSS」ウィジェットを選択。
120521-01

②表示したいウィジェットエリアに、RSSウィジェットをドラッグして追加
120521-02
(※ウィジェットに対応していないテーマを使っている場合については、下記で説明。)

③表示したいRSSフィードのURLを入力し、オプションを設定。
120521-03

以上の手順で、簡単に他のサイトやブログの最新記事を自分のサイトに表示できるようになります。
ライブドアブログやYahooニュースなど、RSS/ATOMフィード形式に対応しているブログであれば、全て読み込みが可能です。

各ブログのRSSフィードURLの確認方法は?

RSSフィードを読み込むためには、RSS用のURLを知る必要があります。RSSフィード用のURLは、利用しているブログサービスにより異なります。下記に一例を載せておきます。

Wordpress:http://ブログURL/?feed=rss2 (他の種類も見る)
ライブドアブログ:http://blog.livedoor.jp/net_scope-diary/index.rdf (リンクで確認)
赤文字部分を、自分のURLに変更

Wordpressやライブドアブログ他、主要フリーブログのRSSフィードURL確認方法は、こちらの記事にまとめました。

使用中のテーマがウィジェットに対応していない/RSS用の表示エリアを作りたい。

Wordpressで利用中のテーマによっては、希望の場所にRSSフィードを追加できない場合があります。
また、ウィジェットに対応していないテーマを使用している場合は、RSS用ウィジェットそのものが追加できません。

その場合には、RSSを表示するためのウィジェットエリアをテーマに追加します。
下記にその手順を紹介します。

■まずはテーマにオリジナルのウィジェットエリアを追加。

ウィジェットの機能を有効にするために、function.phpに追加するウィジェット情報を設定します。

①Wordpress管理画面から、『外観』⇒『テーマ編集』に進みます。
② 右側のファイル一覧から 『テーマのための関数(function.php)』を選択します。
③ function.phpファイルに、下記のコードを追加します。


/** widgetsエリア追加 */
if( function_exists('register_sidebar') ) { //RSS表示用ウィジェット追加 register_sidebar(array( 'name' => 'rss_area', 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h3>', 'after_title' => '</h3>' )); }
/** widgetsエリア追加 end */
赤文字が追加するウィジェットエリアのタイトルです。属性は必要に応じて設定して下さい。
※心配な人は、テーマファイル編集前にバックアップを!

ここまでで、ウィジェットの追加設定は終了です。続いて、ウィジェットを表示するための記述をテーマファイルに追加します。

追加したウィジェットをテーマファイルに追加する。

今回は例として、記事ページの上部にRSSフィードから読み込んだタイトルリストを表示してみます。

①Wordpress管理画面から、『外観』⇒『テーマ編集』に進みます。
② 右側のファイル一覧から 『単一記事の投稿(shingle.php)』を選択します。
③RSS情報を表示したい場所に、下記のコードを追加します。
<div id="rss_area">
<?php if ( !function_exists('rss_area') || !dynamic_sidebar('rss_area') ) : ?>
<?php dynamic_sidebar('rss_area'); ?>
<?php endif; ?>
</div>
赤文字が追加するウィジェットエリアのタイトルです。
※記述の意味:「ウィジェットエリア'rss_area'が有効なら、ここに表示しなさい」という意味です。

④CSSでRSSフィードの表示を整える。

右側のファイル一覧から 『スタイルシート(style.css)』を選択し、下記の記述を追加。 
div.widget_rss ul li{
font-family: "MS Pゴシック";
list-style: none;
font-weight: bold;
padding: 3px 0;
border-bottom: dotted 1px #CCC;
}

a.rsswidget {
text-decoration: none;
}
※CSSは利用中のテーマや必要に応じて内容を変更してください。

■個別記事ページでのプレビュー結果
120521-04 

テーマファイル編集の注意点

利用中のテーマによっては、function.phpに既に『'register_sidebar'』が定義されている場合があります。その辺は、臨機応変に対応して下さい。

また、テーマファイルを編集する際は、作業前にバックアップ(メモ帳にコピペでも可)しておくと安心です。

ウィジェットを利用せずにRSSフィードを読み込む

RSSの読み込み設定を詳細に設定したい時や、ウィジェットを利用せずに読み込みたい場合は、専用タグを使って読み込むことも可能です。

その場合の手順は、『【RSS FEED】他のブログの最新記事を自分のサイトで表示する。』にまとめています。