当サイトには広告が含まれております

Jetpackの人気の投稿とページウィジェットの画像を大きく見やすくする

この記事は最終更新日から7年経過しています。内容が古い可能性があります。

「最近の投稿を画像付きで表示したい!プラグインRecent Posts Widget With Thumbnailsで実現しました。」で最近の投稿を画像付きでウィジェットに表示できるようになりました。ウィジェットにはJetpackで人気の投稿を表示しているのですが、このウィジェットの画像はちょっと小さいので大きく見やすくできるようにしてみました。

記事をざっと見る

Jetpackの人気の投稿とページウィジェットの表示

プラグインJetpackをインストールすると

プラグイン 外観>ウィジェット から人気の投稿とページを追加できるようになります。

先日

あわせて読みたい
最近の投稿を画像付きで表示したい!プラグインRecent Posts Widget With Thumbnailsで実現しました。 このブログではWordPressに付属している「最近の投稿」ウィジェットで最近の投稿を表示してきました。タイトルだけでなく、投稿にある画像を使ってウィジェットに表示で...

で追加した、最近の投稿

こんな感じに表示されているので同じように画像付きで人気の投稿を表示したいと思って、

このように設定してみました。表示すると、

画像付きで表示されるのですがちょっと画像が小さいのが残念です。この画像を大きくしてみたいと思いました。

子テーマの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相談の日 でご相談いただいた

right × write

さんにも早速「人気の投稿の画像大きくできますよ~」と適用させていただきました。小さいお子さんを持つお母さんと起業というテーマでいろいろ書いていらっしゃいます!よろしければ是非ブログを読んでみてください!

この記事が気に入ったら
いいね または フォローしてね!

あなたのシェアが励みになります!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントを残す

記事をざっと見る