WordPressで人気記事を表示するプラグイン『Popular Posts』を画像つきで表示させる方法

投稿日：2013-02-12

こんにちは(^-^)/

ナカジ(@cp_nakajun)です。

前々からやりたかったのですが、中々手を付けられていなかった

「よく読んで頂いている記事」のサムネイル画像表示

『Popular Posts』を画像つきで表示させる方法ですね。

ようやく手を付けたのでやり方を残しておきます。

先ずは『Popular Posts』のインストールですが、割愛します。

上記のリンクからダウンロードしてインストールしてください。

１．『Popular Posts』設定

管理画面の「設定」->「Popular Posts」で、画面上部に「output」をクリック。

「output settings」の画面で「output template:」にコードを記述します。

【ソースコード】

<div class="popular_posts">
<a title="「{title}」の記事へ移動する" href="{url}">
{php: echo get_the_post_thumbnail(
 {postid}, array(45,45), array('title' => ' {title}' )); }
<div class="popular_posts_title">{title} </div></a>
</div>
<div style="clear: both"></div>

２．表示するスタイルを設定

管理画面の「外観」->「テーマ編集」で（style.css）に以下を追加します。

.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%;

}