[Wordpress]「人気記事」のウィジェットにサムネイル画像を付ける

人気記事とかWordpressでは表示できるのだけどこの集計には色々プラグインによって違います。最近は「Post-Views」というのが気に入って使っていましたけどカスタマイズの仕方が難しそうだったので取り敢えず勢いに任せて「Populer Posts」を入れてみた@tokidaです。

いつものように、触発される記事があるわけです。

WordPressプラグイン「YARPP」と「Auto Post Thumbnail」を使用して関連記事を表示するのにようやく成功した | OZPAの表4

新しい記事も過去の記事も全部自動でアイキャッチを作成してくれるAuto Post Thumbnail | ごりゅご.com

実際にプラグインのカスタマイズにはこちらのサイトを参考にしました。

Popular Postsをカスタマイズして、人気記事のサムネイルを表示する方法 | Oxy notes

 

こんな感じでよくあるThumbnailついた画像が付けたかったのです。

image

方法はあちこちにでているのですが特に変わったことはしていません。

  • Thumbnail(アイキャッチ画像)を利用しているため、自動的にアイキャッチ画像を作ってくれる「Auto Post Thumbnail」を入れます。これは過去のエントリーもアイキャッチ作ってくれるので非常にうれいいプラグインです。 - カスタマイズが楽な、「Popular Posts」プラグインを入れます。他のプラグインでもカスタマイズする箇所がわかっていればなんとかなると思います。 - 以下の設定はあくまでもこのサイト用の設定なので好きなように(備忘録としてメモ)

  • Output の設定内容で「Output Template:」の中に以下のように記述。

{php: echo get_the_post_thumbnail( {postid}, array(64,64), array('title' => ' {title}' )); } 
{title} 
{snippet:20}…
   - テーマで利用しているStyleシートには以下のように追加。
.wp-post-image { 
        border:solid 1px #ccc; 
        padding: 4px; 
        float: left; 
        margin-left: -80px; 
        margin-bottom: 10px; 
/*      vertical-align: text-top; */ 
} 
.popular_posts { 
        padding: 3px; 
        margin-top: 3px; 
        margin-left: 80px; 

} 
.popular_posts_title { 
        margin:2px auto; 
        font-size: 90%; 
} 
.popular_posts_snippet { 
        margin:2px auto; 
        font-size: 75%; 
        color: #A0A0A0; 
}

昨日からすげ~入れたくて仕方なかったので満足でゴザル。

興味が出てきた方は、GWの暇つぶしに是非。 折角なので「Post-Views」プラグインのカスタマイズを調べてみようと思う。

Hugo で構築されています。
テーマ StackJimmy によって設計されています。