ウィジェットにオシャレなRSSリーダーを付けたいという要望があり[Post Snippets]使って実装してみました(^ ^)。

プラグインのインストール

まずは、「プラグイン」→「新規追加」画面で[Post Snippets]を検索して有効化します。

有効化したら「設定」から[Post Snippets]をクリック。

「Add New Snippets」をクリック。

[Post Snippets]の設定

簡単に

title:ショートコード名
Variables:変数
変数が必要な場合、ここに変数名を入力します。
複数必要な場合は（,）カンマで区切ります。
変数はphpコード内に記述する場合’{}’で囲みます。
Snippet：スニペット
出力内容を記述します。phpの場合、最初の「」は外した形で記述します。
Shortcode：ショートコード
チェックを入れると、[ショートコード名]で登録した内容が出力されます。
Shortcode Options:ショートコードオプション
phpコードを登録する場合は「PHP Code」にチェックをいれます。

今回、設定した内容は「title」が「mps-rss」、「Variables」に「url」、「Shortcode」と「PHP Code」にチェック。
「Snippet」に入れた内容はこんな感じ。

include_once(ABSPATH . WPINC . \'/feed.php\');
$rss = fetch_feed(\'{url}\'); 
if (!is_wp_error( $rss ) ) :
	$maxitems = $rss->get_item_quantity(3); 
	$rss_items = $rss->get_items(0, $maxitems); 
endif;
	
echo \'<div class="mps-rss">\';
	
if ($maxitems == 0): echo \'<p>表示するものががありません</p>\';
else :
date_default_timezone_set(\'Asia/Tokyo\');
foreach ( $rss_items as $item ) : 
echo \'<div class="rss-item">\';
	$mylink = $item->get_permalink();
echo "<a href=\\"$mylink\\" rel=\\"bookmark\\" target=\\"_blank\\">";
	$first_img = \'\';
if ( preg_match( "/<img.+?src=[\\"]([^\\"]+?)[\\"].*?>/msi", $item->get_content(), $matches ) ) {
	$first_img = $matches[1];
}
if ( !empty( $first_img ) ) :
	$myimg = esc_attr( $first_img );
endif;
echo "<div class=\\"rss-img right\\">";
echo "<img src=\\"$myimg\\" alt=\\"\\" />";
echo "</div>";
	$mytitle = $item->get_title();
echo "<p class=\\"title\\">$mytitle</p>";
	$mydate = $item->get_date(\'Y年n月j日\');
echo "<p class=\\"siteinfo\\">$mydate</p>";
	$mycontent = mb_substr(strip_tags($item->get_content()),0,50).\'...\';
echo "<p class=\\"description\\">$mycontent</p>";
echo "</a>";
echo "<hr />";
echo "</div>";
endforeach;
endif;
echo "</div>";

feed.php、fetch_feedでRSS取得します。
とりあえず取得は３件。本文は50文字抜粋。あわせて取得した最初の画像を抜き出すようにしています。
あと、CSSは一応こんな感じにしてみました。

div.mps-rss { margin: 2px; }
div.mps-rss .rss-item a {
    text-decoration: none;
    display: block;
    padding: 2px 0;
    overflow: hidden;
}
div.mps-rss .rss-item a:hover { background-color: #eef3fd; }
div.mps-rss .rss-item img {
    width: 65px;
    margin: 0;
    padding: 0 2px;
    box-shadow: none;
}
div.mps-rss .rss-item p {
    margin: 0 0 2px;
    width: auto;
}
div.mps-rss .rss-item .title { font-weight: bold; }
div.mps-rss .rss-item .siteinfo {
    font-size: 75%;
    font-weight: bold;
    color: #a9a9a9;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
div.mps-rss .rss-item .description {
    font-size: 70%;
    color: Gray;
}
div.mps-rss .rss-item .title, div.mps-rss .rss-item .siteinfo, div.mps-rss .rss-item .description {
    overflow: hidden;
    padding: 0 2px;
}
div.mps-rss .rss-item .right { float: right; }
div.mps-rss hr {
    margin: 0;
    padding: 0;
}

functions.phpにコードを追加

「functions.php」に下記のコードを追記します。

add_filter('widget_text', 'do_shortcode');

これでウィジェットの中でショートコードが利用可能になります。

テキストウィジェットにショートコードを追加

テキストウィジェット内に

[mps-rss url=https://etbs.jp/blog/feed/]

と記入しこんな感じで表示されるようになりました。

色々調べて後から知ったのですが、
「rss-antenna」というプラグインもあるようです。
こちらの方が色々融通が利いて便利ですね…(-｡-;

自己紹介

松田大と申しますm(_ _)m
インディーズでミュージシャンをやっていたのですがいつのまにか…

とある企業でショップのアルバイトスタッフから正社員、支店長を経てシステム部門に異動するという、開発担当としては変わった経緯を持っている方だと思います。

「Excel VBA」からスタートして、Yamaha RTX シリーズで VPN環境構築、Hyper-V環境構築、Windowsアプリ開発などを経験した後、「 WordPress 」に出会い、どっぷりハマっています。

現在勤めているETBS合同会社では、「 WordPress 」を活用したWEBサイト、業務用WEBアプリケーション開発を中心に、記事の執筆代行や掲載に必要な情報のリサーチ、映像のテロップ入れや切りはりなどの簡単な動画編集なども、まとめて行なっています。

宮崎県都城市出身。東京都葛飾区在住。現在、代表兼二児のパパ。子育てを通じて、こどもたちにもプログラミングの楽しさに触れてほしいと思うようになり、「こどもICTかつしか教室」を開講中。最近は童心に帰り、簡単なゲーム制作なんかも楽しんでいます(^_^)。

お問い合わせ