CSSでFeedzy RSS Feedsをカスタマイズ

2016年8月12日Web-log・ココログ関連,WordPress

Feedzy RSS Feedsと言うプラグインを使って、本ウェブサイト中の抜粋表示に使っています。

WordPressで投稿記事内に画像付きでRSSを埋め込む[追記あり]

このプラグインオリジナルのままだと、表示方法に気に入らないところがあって、次の記事で書いた通りに、プラグインを改造して使っていました。ショートコードの拡張もする、本格的な改造です。

Oichinote version of FEEDZY RSS Feeds

その結果、次のような表示にできます。

Feedzy RSS Feedsカスタマイズ

でも、プラグインを改造した時の宿命で、プラグインのバージョンが上がってしまうと、カスタマイズが無意味になってしまうのです。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などで埋め込みます。その結果、次の表示ができるようになりました。

Feedzy RSS Feedsカスタマイズ

[amazonjs asin="B01B48SKDK" locale="JP"]

Posted by お市のかた