RSSウィジェットを魔改造してなんちゃってニュースフィードを作った.js

この記事を読むのに必要な時間は約 3 分です。

サイトのフッター部分にRSSフィードを置いてみました。

Googleアラートで「歴史」や「偉人」といったキーワードを拾ってきて、ワードプレスのRSSウィジェットで表示しています。

でもそれだけじゃ物足りない、と思ってニュースフィード専用のページを作ってみました。

（正確にはRSSフィードのウィジェットタイトルのとび先が指定されないというバグを直していて思いついた。）

ウィジェット設置
固定ページ本文作成
固定ページのカスタムCSS
固定ページのカスタムjavascript
完成

ウィジェット設置

Wpテーマ Cocoonだと本文の中にウィジェットを追加できるので、固定ページ本文中にRSSウィジェットを設置。

この時、「表示設定」でRSSフィードを表示したい固定ページIDのみで表示するように選択する。

固定ページIDは管理画面の固定ページ一覧でマウスオーバーしたときに確認できる。

画面だと2156

固定ページ本文作成

本文に<h2>要素＝「見出し２」が無いと「固定ページ本文中」にウィジェットが出ないので、適当に追加。

固定ページのカスタムCSS

見た目を整える。

.widget_rss .rss-date{
font-size: 12px;
}
a.rsswidget {
padding-bottom:1px !important;
}
.widget_rss li{
border-bottom:1px solid #dddedf;
}

.article .widget_rss a{
text-decoration:underline;
}
.article .widget_rss .rssSummary{
font-size:0.9em;
}
.rss-thumbnail-link{
display:block;
float:left;
margin-right:20px;
}
.article .widget_rss li:after {
clear: both;
content: '';
display: block;
}

固定ページのカスタムjavascript

デフォルトだと画像が表示されないので、WP REST API v2 でリンク先のサムネイル画像を取得して表示。

jQuery(function(){
 jQuery("#rss-3 ul li").each(function(i, elem) {
 var url = jQuery(elem).find('a').attr('href');
 jQuery(elem).prepend('<a target="_blank" class="rss-thumbnail-link" href="'+ url +'"><img src="https://s.wordpress.com/mshots/v1/'+ url +'?w=200"></a>');
 });
});

完成

完成品はこちらを見てください。

歴史ニュース

ニュースサイト経由で歴史関連の情報を発信します。

小手先テクの組み合わせですが、サイトがそれなりに賑やかになりました。