[Post Snippets]を使ってウィジェットに「RSSリーダー」をつけてみました!

ウィジェットにオシャレな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取得します。
とりあえず取得は3件。本文は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://developerslife.xyz/feed/]

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



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

応援よろしくお願いします。
いいね ! してもらえると嬉しいです。

Twitter で

自己紹介

松田 大 と申しますm(_ _)m

インディーズでミュージシャンをやっていたのですがいつのまにか...

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

一昨年の3月に結婚し、尻敷かれ男子の仲間入りを果たしました(笑)

現在勤めているJTクラウドシステムでは、「 Excel VBA 」を活用した効率化ツールの開発、「 WordPress 」を活用したWEBサイト、業務用WEBアプリケーション開発を中心に「 ネットワーク・サーバー構築 」や「 Office365製品の導入支援 」、最近は、ホームページ制作に加え、記事の執筆代行や掲載に必要な情報のリサーチ、テロップ入れや映像の切りはりなどの簡単な動画編集なども、まとめて行なっています。

お問い合わせはJTクラウドシステムホームページからお願いします。
スポンサーリンク