Jetpackで使えるようになるウィジェット「人気の投稿とページ」では、統計情報から人気のページを取得できるのでWordPress Popular Postsなどのプラグインを使用しなくても人気記事をウィジェットで表示できます。
このJetpack人気記事ですが、デフォルトの設定だと画像サムネイルのサイズが40pxでちょっと小さいのですが、管理画面からそういったカスタマイズはできません。実はさくっとカスタマイズできるのですが、どういう訳かプラグイン本体をいじるようなやり方ばかりが紹介されているので、テーマ側ファイルの修正で済む方法を紹介します。
さくっとレベルの目安：本体をいじる勇気があるくらいの人ならさくっといじれます。変更を加えるのはテーマのstyle.cssとfunctions.phpのみです。
Jetpack人記事サムネイル画像のデフォルト仕様
さて、Jetpackのサムネイル画像はどういう仕組みで40pxの画像を表示させているんでしょうか。
最初に考えたのは、Jetpackが40pxの画像を生成している訳ではないだろうから、近いサイズの画像を引っ張ってきているんだろうという事。だったら、CSSで大きくしちゃえばいけるだろうと考えたのですが
該当部分のHTMLを見てみると・・・・
<img src=”http://i0.wp.com/your.domain.com/wp-content/uploads/****/**/*****.png?resize=40%2C40″ class=”widgets-list-layout-blavatar” alt=”***” data-pin-nopin=”true”>
優秀というかなんというか！Wordpressのサーバでサムネイル画像のリサイズをした上で表示してました！
ちょっとちょっと・・・。だったらCSSで大きくしたらぼやけるじゃない。画像リソースも自分のサーバじゃないからいじれないし、どうしてくれるのさ。
という訳でしぶしぶフィルタを探しましたら、やっぱりありました。Jetpackの公式サイトにはカスタマイズ例も記載されていました。
ウィジェット画像用のフィルタでカスタマイズ
このカスタマイズ例を元にさっくりとサムネイル画像。Jetpack人気記事でサムネイルをいじりたい場合は
jetpack_top_posts_widget_image_options
というフィルタが使えます。なので、functions.phpに以下のような関数を作って、フィルタに追加します・
function my_custom_thumb_size( $get_image_options ) {
$get_image_options['avatar_size'] = 75; // この数字を指定したい画像サイズに
return $get_image_options;
}
add_filter( 'jetpack_top_posts_widget_image_options', 'my_custom_thumb_size' );
こうする事で画像サイズは75pxになってくれましたが、人気記事部分はCSSでも画像のサイズが指定されています。画像自体が大きくなってもまだ見栄えは変わりません。
.widget_top-posts .widgets-list-layout-blavatar {
max-width: 75px; /* この数字を指定したい画像サイズに */
}
最後に
JetpackはWordpressの公式プラグインなので信頼性が高く、同様の機能が提供されるならできればJetpackを使いたいところ。現在のところカスタマイズ性などではWordPress Popular Postsなどに劣りますのでCSSやfunctions.phpを触りたくない場合には既存のプラグインを使ったほうがいいです。
Jetpackの人気記事を使用することで他のプラグインを入れる手間は省けるんですけど、カスタマイズ前提ならそこにかかる手間が出てきます。Jetpackデフォルトで使うならそれが一番早いのですが、既存プラグインほど洗練されていないので不満点が出やすいです。
既存プラグインも好みに合うようにすれば設定画面を開いてあれこれと設定をする手間がありますから、どちらの手間を取るかは好み次第ですね。どちらを取るにせよできる事の選択肢を広げておくと何かの役に立ちますので、Jetpackの人気記事はフィルタでカスタマイズできるというのは覚えておいて損はないです。
Jetpack人気記事に限らずWordpress公式のようなちゃんとした作りのプラグインは、探せば大抵フィルタが出てきます。ちゃんとしたものほどフィルタやフックなどで本体をいじらずにカスタマイズできる仕組みを取り入れます。やみくもにプラグイン本体をいじってしまうのはあまりお勧めできませんので、なるべくならフィルタやフックでカスタマイズできる方法を探してみてくださいね。
最後までお付き合いいただきありがとうございました！
コメント