ビッグバナー広告

ホームページに自動でブログ更新情報を表示させよう (RSS使用)

ブログ更新情報自動表示

RSSを利用して、ホームページに自動でブログ更新情報を表示させる方法をご紹介します。

RSSから更新情報を拾うという方法を使えば、ブログだけでなく外部サイトの更新情報なども表示させることが可能です。

なお、ブログ更新情報を表示させるコードは、WordPressで作成したサイトが対象です。それ以外の方は、無料ブログパーツを使う方法があるので、この記事の一番最後で紹介します。

スポンサーリンク
PC用

RSSでブログ更新情報を表示

自分のホームページとブログを両方一緒に運営されている方って結構いるのではないでしょうか。ホームページとブログを使い分けて、日々のニュースや最新情報はブログでお知らせという方も多いでしょう。

来訪者にはホームページだけじゃなくて、ブログも見てもらいたいですよね。もちろん、そのホームページからブログへリンクを張り、ブログへの導線を作ってあるとは思いますが、それだけでは足りません。

来訪者にブログを見てもらうためには、記事の内容やタイトルを見せて、それがいつ更新されたのかまで表示させないとなかなか難しいと思います。

でも、それってどうすればいいんでしょ・・・自サイトのニュースや記事なら比較的簡単に更新を表示できますが、外部サイトの更新となると、いきなり敷居が高くなりますね。

いわしもいろいろ試してはみたのですが、どうもうまくいかない。どうしたものやらと思ってたら、Kyasper Web Designさんが、ブログや外部サイトの更新表示に使えるステキなコードを公開されてました。

このコードをWordpressで作成したウェブサイトに埋め込むと、対象サイトのRSS feed情報を受け取って、自動的に最新の更新情報を表示させることができます。

http://kyasper.com/wordpress-rss/

RSSを使って、外部サイトの更新情報を自分のサイトに表示する Kyasper Web Design

こんなのをずっと探してました。Kyasper Web Designさん、ありがとうございます。

さっそく自分のホームページに埋め込んでみました。こんな感じです。

RSSfeedで更新情報を表示

うん、すばらしい。単に「ブログもやってます」ではなく、こういった更新情報を載せて記事の中身を知ってもらえば、記事を読んでもらえる確率が上がると思います。

ブログ更新情報表示用コード埋め込み

では、さっそく更新表示用コードをWordPressに埋め込んでみましょう。方法は2種類あって、テーマ内に直接コードを埋め込む方法と、WordPressプラグイン「Post Snippets」でショートコードを埋め込むという方法です。

前者はテーマ直接編集、後者は固定ページや投稿ページで更新表示用コードを使う場合に用います。

今回使ったテーマは、直接テーマ内を編集してトップページを更新するタイプなので、ダッシュボードの「外観」→「テーマ編集」からindex.phpに下記のコードを埋め込みました。

<?php
//WrodPressのfeed.phpの呼び出し
include_once ABSPATH . WPINC . '/feed.php';
// 目的のFeedを取得
$feed = fetch_feed('http://wind-mill.co.jp/iwashiblog/feed/');
if (is_wp_error($feed)) {
	$maxitems = 0;
} else {
	//5件取得
	$maxitems = $feed->get_item_quantity(5);
	$items = $feed->get_items(0, $maxitems);
}
?>

<h2><a href="http://wind-mill.co.jp/iwashiblog/">ウィンドミル いわしブログ 新着情報</a></h2?>

<?php if ($maxitems): // データあったら表示 ?>
    <ul>
    <?php foreach ($items as $item): ?>
        <li>
            <span class="date">
				<?php echo $item->get_date('Y.m.d'); ?>
            </span>
            <br>
            <a href="<?php echo $item->get_permalink(); ?>">
            <span class="title">
				<?php echo mb_strimwidth($item->get_title(), 0, 60, '…'); ?>
            </span>
             </a>
        </li>
    <?php endforeach; ?>
    </ul>
<?php else: // データ無しの場合 ?>
    <!-- データないよ -->
<?php endif; ?>

変更点ですが、5行目のRSSフィードURL (‘https://iwashiblog.com/feed/’) を、表示させたいwebサイトやブログのRSSフィードURLに置き換えてください。

16行目には表示させたいwebサイトやブログのトップページURLを入れましょう。

前後の<h>タグは埋め込むサイトのデザインに合わせて変更してください。いわしは<h2>にしてますが、サイトのタイトルが不要ならこの3行は消してもよいでしょう。

あと、10行目の一番後ろにある(5)の数字を変えると、記事の表示件数を変更することができます。

29行目の後方にある「60」という数字は、表示させるタイトルの文字数です。スペースが狭くてタイトルがはみ出したり改行されてしまう場合は、この数字を減らしてください。

「Post Snippets」を使って投稿や固定ページにブログ更新情報表示用コードを埋め込む

さて、このコードはPHPで書かれているのですが、WordPressは投稿や固定ページに直接PHPコードを記載しても動かないようになっています。

WordPressテーマの中には、固定ページをトップとしてindex.htmlの代わりに表示させるものがあるので、固定ページでもPHPコードが使えるようにしないとブログ更新情報は表示されません。

この場合は、「Post Snippets」というショートコードを扱うためのWordPressプラグインを入れて対応します。この記事を参考にして、まずは「Post Snippets」をインストールしてください。

post snippets をインストールしたら、左メニューから「設定」→「Post Snippets」へ進み、「Add New Snippet」で新しいスニペットを追加します。

WordPressプラグイン post snippets 新しいスニペット追加

「Title」欄にはショートコードの名前を入力して、「Variables」の「Shortcode」にチェックを入れて下さい。今回のブログ更新情報表示用コードはPHPを使用するので、その下の「PHP Code」にもチェックを入れます。そして「Snippet」に先ほどのコードを入力します。

ここで一つ注意点があります。Post Snippets でPHPコードを使う時は、頭の「<?php」と最後の「?>」は消して下さい。先ほどのコードの場合、先頭の「<?php」は全て不要なので、1行目は丸ごと消去、最後の「<?php endif; ?>」は「<?php endif;」とします。

最後に下の青いボタン「Update Snippets」で保存するのをお忘れなく。

Post Snippets ブログ更新情報自動表示コード作成

続いて、スニペットを使ってブログ更新情報表示用コードを表示させてみましょう。固定ページまたは投稿ページを開くと、エディタ上部に「Post Snippets」タグが追加されています。

WordPressプラグイン post snippets スニペット作成タグ追加

先ほど作成したスニペットのタイトルを選択して、「Insert」をクリックします。

WordPressプラグイン post snippets スニペット作成 ショートコード挿入

この通りショートコードが挿入されました。あとは固定ページ内のブログ更新情報を表示させたい部分にこのショートコードを配置すればOKです。

WordPressプラグイン post snippets ショートコード配置

ブログ更新情報表示用コード 表示の修正

これで更新が表示されるようになるのですが、サイトによっては行間がえらく開いてしまったり、行がズレて表示されたりします。試しでコードを貼ってみると、こんな感じになってしまいました。行間がえらく間延びしてますね。

更新情報の表示間延び

これはコード内の空白や、インデントのタブが間延びの原因のような気がしたので、今回はコード内の<br/>をなくしたり、インデントを詰めることで解決しました。

こちらが元のコードです。途中から抜粋してます。

    <ul>
    <?php foreach ($items as $item): ?>
        <li>
            <span class="date">
        <?php echo $item->get_date('Y.m.d'); ?>
            </span>
            <br>
            <a href="<?php echo $item->get_permalink(); ?>">
            <span class="title">
        <?php echo mb_strimwidth($item->get_title(), 0, 60, '…'); ?>
            </span>
             </a>
        </li>
    <?php endforeach; ?>
    </ul>


こちらが修正版です。インデントをなくし、改行コードは消しました。

    <ul>
    <?php foreach ($items as $item): ?>
        <li>
            <span class="date"><?php echo $item->get_date('Y.m.d'); ?></span>
            <a href="<?php echo $item->get_permalink(); ?>"><span class="title"><?php echo mb_strimwidth($item->get_title(), 0, 60, '…'); ?></span></a>
        </li>
    <?php endforeach; ?>
    </ul>


その結果、更新情報がきれいに表示されるようになりました。めでたしめでたし。

更新情報表示

文字の表示はCSSとの兼ね合いもあるし、これでは修正できない場合もあるかと思いますが、その時はサイトの状況に合わせてCSSを修正するようにしてくださいね。

最後にもう一度、こんなに便利なコードを公開された Kyasper Web Design さんには改めてお礼申し上げます。いわしもさっそく活用させていただいてます。

RSS表示用の無料ブログパーツ「FeedWind」

WordPress以外の方でもブログ更新情報が表示できるように、RSS表示用の無料ブログパーツ「FeedWind」(フィードウィンド)を紹介しておきます。もちろん、WordPressでも使えます。

RSSやフィードのURLを入力して、デザインや表示件数などを設定すれば、コードが自動出力されるので、これを貼り付けると、ブログ更新情報が表示されるようになります。登録は不要で手軽に設置できるので、このブログパーツでブログ更新情報を表示させるのも手です。

https://feed.mikle.com/ja/

無料ブログパーツ

スポンサーリンク
PC用
PC用

フォローする