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

投稿日:2013-02-12


 
こんにちは(^-^)/

ナカジ(@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ノート

 

 

 

サポート募集中

この記事はお役に立てましたか。
よかったら、コーヒー ☕ をご馳走いただけたら励みになります。



おすすめのクリエイティブ・コーディング関連カテゴリー

ウェブツール

機能はシンプルなものですが、p5.jsやTone.jsで描画したり音が出たりするので遊んでみてください。
・【Midi Number Tools】:MIDIナンバーから音名と周波数を判定します
・【Delay Time Calculator】:テンポに応じた音符の長さを判定します