Jetpackウィジェットの人気記事サムネイルサイズを変更して見やすくしよう(*^o^*)

スポンサーリンク

どうもこんにちは

IT大好きFwwwです

この記事を見てくださっている方は、少なくともWordpressでサイト運営をされている方だと思います!!

サイトの回遊率をUPさせるのにみなさんは、どんな対策を施していますか?

普通はグローバルメニューやウィジェット、記事内の関連記事などを設置などでできますよね

そして、回遊率をupさせるのに一番手頃な手段と言えば

「人気記事をサムネイル付きでウィジェット表示」

させることです

そうすれば、訪問者を回遊させることができます

じゃあ、

「どうやってサイドバーに人気記事を表示させるの?」

wordpress popular postsというプラグインもありますが、プラグインを増やすのは嫌なので、今回はWordpressでメジャーなプラグインであるJetpackに付属している、

人気記事をウィジェットにサムネイル付きで表示させる機能を使わせてもらいます

Jetpackといえばみなさんご存知のサイト統計情報を表示させたり、CDNを利用できたりで自分のサイトを活性化してくれるプラグインですよね

ではでは、まだJetpackの人気記事を表示させるウィジェットをまだ導入していない方のために、

ウィジェットの導入から解説していくことにします。

※この記事は既にJetpackプラグインを導入しているという前提で書かせてもらっています

スポンサーリンク

Jetpackの人気記事を表示させるウィジェットを導入して、サムネイルサイズをカスタマイズしよう!!

まずは人気記事を表示させるウィジェットを導入しよう!!

管理画面の外観⇒ウィジェットに移動してください

Jetpackを使用していれば、このようなウィジェットがあります

ウィジェット

このウィジェットをサイドバーなりフッターなり、任意の場所に追加してやってください

表示する投稿数などは、自分で調整してみてください

そして、表示形式は画像リストにしてください!!

今回はこれをカスタマイズしていきます

サムネイルのサイズが小さかったので、サイズを変更しよう!!

無事に人気記事をサムネイル付きで表示させることはできたと思いますが、

サムネイル小さくないですか?笑

サムネイル画像小さい

※プラグインを改造するので、Jetpackを更新したらサムネイルのサイズは元に戻ります

更新のたびにカスタマイズする必要があります

それではカスタマイズしていきましょう

まずは/wp-content/plugins/jetpack/cssにあるjetspack.cssを編集していきます

このjetpack.cssではサムネイルの表示サイズが書かれています

なので表示サイズを大きくします

文字列検索で「max-width:40px;」と検索してください

そしたら一番下の方で一つヒットすると思います

そのmax-width:40px;max-width:70px;に変更してください

そしてmax-width:70px;の後ろにwidth:70px;を付け足してください

※この70を違う数値にすればサイズは変更可能ですが、

100pxぐらいにすると僕の環境では表示が崩れました(テーマは賢威使ってます)

上書き保存して、次は/wp-content/plugins/jetpack/modules/widgetsにあるtop-posts.phpを編集します

ここではサムネイルのサイズを規定値の40pxでリサイズする処理が書かれています

ここを編集しなくても一応70pxで表示されるのですが、40xの画像を70pxに拡大することになるので画質が劣ってしまいます

なのでサムネイルのサイズを先ほど設定した70pxにリサイズする処理をさせるようにします

文字列検索で「40」と検索したら次のようなコードの列に来ると思います

$get_image_options[‘avatar_size’] = 40;

でてきたら、この40を70に変更してください

そして、上書きしてjetpack.cssとtop-posts.phpをそれぞれ元の場所に上書きでアップデートしてください

そうすれば無事にサムネイルのサイズも70pxでリサイズされ、表示されていると思います

先程も述べたように、70を他の数値に変更すればサイズが変わります

最後まで読んでいただきありがとうございました

スポンサーリンク

シェアする



URLをコピーする

関連記事