CSSでFeedzy RSS Feedsをカスタマイズ
Feedzy RSS Feedsと言うプラグインを使って、本ウェブサイト中の抜粋表示に使っています。
WordPressで投稿記事内に画像付きでRSSを埋め込む[追記あり]
このプラグインオリジナルのままだと、表示方法に気に入らないところがあって、次の記事で書いた通りに、プラグインを改造して使っていました。ショートコードの拡張もする、本格的な改造です。
Oichinote version of FEEDZY RSS Feeds
その結果、次のような表示にできます。
でも、プラグインを改造した時の宿命で、プラグインのバージョンが上がってしまうと、カスタマイズが無意味になってしまうのです。Feedzy RSS Feedsもそうでした。バージョンアップに追従して、改造しなければ…と思っていました。
うかつにバージョンがアップしてしまい、カスタマイズ前の表示になってしまいました。
違いがわかりますか? 中央部分がズームアップされています。あぁ、また改造しなきゃ…。
Feezdy RSS Feedsの改造の核心部は、画像を表示しているfeedzy-rss-feeds-shortcode.phpに、次のスタイルシートを埋め込むことです。
background-size: contain; background-repeat: no-repeat;
もし、プラグインを改造するなら、次のようになります。
--- feedzy-rss-feeds-shortcode.php 2016-01-30 18:25:25.000000000 +0900
+++ feedzy-rss-feeds-shortcode.php.revised 2016-01-30 17:55:37.000000000 +0900
@@ -155,7 +155,7 @@
$thethumbnail = feedzy_image_encode( $thethumbnail );
$contentThumb .= '<span class="default" style="width:' . $sizes['width'] . 'px; height:' . $sizes['height'] . 'px; background-image: url(' . $default . ');" alt="' . $item->get_title() . '"></span>';
- $contentThumb .= '<span class="fetched" style="width:' . $sizes['width'] . 'px; height:' . $sizes['height'] . 'px; background-image: url(' . $thethumbnail . ');" alt="' . $item->get_title() . '"></span>';
+ $contentThumb .= '<span class="fetched" style="width:' . $sizes['width'] . 'px; height:' . $sizes['height'] . 'px; background-image: url(' . $thethumbnail . '); background-size: contain; background-repeat: no-repeat;" alt="' . $item->get_title() . '"></span>';
} else if ( empty( $thethumbnail ) && $thumb == 'yes' ) {
プラグインの改造なしでCSSを追加できれば…。と思って、コードをよく読んでみると、ありました。ちゃんとクラス定義されています。クラス定義されていれば、狙い撃ちでスタイルシートを埋め込めます。
.feedzy-rss .rss_item .rss_image .fetched {
background-size: contain;
background-repeat: no-repeat;
}
.feedzy-rss .rss_item .rss_image .default {
display: none;
}
このスタイルシートを、JetPackのカスタムCSSなどで埋め込みます。その結果、次の表示ができるようになりました。