「最近の投稿を画像付きで表示したい！プラグインRecent Posts Widget With Thumbnailsで実現しました。」で最近の投稿を画像付きでウィジェットに表示できるようになりました。ウィジェットにはJetpackで人気の投稿を表示しているのですが、このウィジェットの画像はちょっと小さいので大きく見やすくできるようにしてみました。
Jetpackの人気の投稿とページウィジェットの表示
プラグインJetpackをインストールすると
プラグイン 外観＞ウィジェット から人気の投稿とページを追加できるようになります。
先日
で追加した、最近の投稿は
こんな感じに表示されているので同じように画像付きで人気の投稿を表示したいと思って、
このように設定してみました。表示すると、
画像付きで表示されるのですがちょっと画像が小さいのが残念です。この画像を大きくしてみたいと思いました。
子テーマのfunctions.phpとstyle.cssで指定をする
検索するとJetpackのページにそのカスタマイズ方法が書いてありました。
https://developer.jetpack.com/hooks/jetpack_top_posts_widget_image_options/
こちらに方法が書いてあったのですが、そのままだとなぜかうまく動かないところもあったので少し変えてみました。
まず子テーマのfunctions.phpに
function jeherve_custom_thumb_size( $get_image_options ) {
$get_image_options['avatar_size'] = 100;
return $get_image_options;
}
add_filter( 'jetpack_top_posts_widget_image_options', 'jeherve_custom_thumb_size' );
このコードを追加します。
$get_image_options['avatar_size'] = 100;
の行で表示する画像のサイズを100pxに指定しています。
次に子テーマのstyle.cssにコードを追加します。
※ 今回はSimplicityの子テーマで行っています。テーマによってはこのCSSを若干変更しないとうまい感じに表示できないことがあるということが後でわかりました。
/* top post image width customise */
.widgets-list-layout .widgets-list-layout-blavatar {
width:35% !important;
max-width: 100px !important;
}
.widgets-list-layout-links {
width: 60% !important;;
}
@media screen and (max-width: 1110px) {
.widget_top-posts .widgets-list-layout-blavatar {
width:auto;
max-width: 100px !important;
}
.widgets-list-layout-links {
float: left !important;
margin-left:10px;
width: auto;
}
}
これでカスタマイズができました。
画像が大きく表示されるかどうか確認する
修正が終わったら表画面で確認してみます。
画像が大きくなりました(^^)/。
おまけ：Saitamaでのstyle.cssの指定方法
こちらのブログでうまくできたので ゆうそうと のページの人気の投稿のウィジェット画像も大きくしてみようと全く同じカスタマイズをしたところ、うまくいきませんでした。
こんな感じに画像とタイトルがくっついて左側がだいぶ空いてしまいます。いろいろ調べてみてSaitamaの子テーマのstyle.cssは
/* top post widget image width customise */
.widgets-list-layout .widgets-list-layout-blavatar {
width:35% !important;
max-width: 100px !important;
}
ul.widgets-list-layout {
margin-left: 0px !important;
}
.widgets-list-layout-links {
width: 60% !important;;
}
@media screen and (max-width: 1110px) {
.widget_top-posts .widgets-list-layout-blavatar {
width:auto;
max-width: 100px !important;
}
.widgets-list-layout-links {
float: left !important;
margin-left:10px;
width: auto;
}
}
このようにしてみました。
ul.widgets-list-layout {
margin-left: 0px !important;
}
Simplicityのcssと違う箇所は上記のmargin-leftを0pxにするところだけです。
これで、
こんな感じの表示になりました(^^)/。もしかすると他のテーマを使うときもこの辺の修正が若干必要になってくるかもしれません。
木曜日はIT相談の日 でご相談いただいた
さんにも早速「人気の投稿の画像大きくできますよ～」と適用させていただきました。小さいお子さんを持つお母さんと起業というテーマでいろいろ書いていらっしゃいます！よろしければ是非ブログを読んでみてください！
コメント