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

スポンサーリンク
スポンサーリンク



こんにちは(^-^)/

ナカジ(@cp_nakajun)です。

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

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

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

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

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

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

スポンサーリンク

1.『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>


2.表示するスタイルを設定

管理画面の「外観」->「テーマ編集」で(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%;
}

以上で完成です。


※僕は以下の記事を参考にしました。

『Popular Posts』をカスタマイズして人気記事をサムネイル画像付きで表示させる方法。 | 地方公務員のWEBノート

スポンサーリンク
PROFILE
ブログ著者

運営者:ナカジ
クリエイティブをプラスする = 工夫して楽しむ
音楽、コンピューター、スポーツとマンガを愛する自由人。
モノをあまり所有せずシンプルに旅人・スナフキンのような生き方を大切にしてます。
>>プロフィール詳細
スポンサーリンク