WordPress Popular PostsプラグインとNewpost Catchプラグインの表示を統一する方法

2013/06/09

WordPressで、人気の記事をムネイル画像付きで表示できるWordPress Popular Postsプラグインと、最近投稿した記事をサムネイル画像付きで表示できるNewpost Catchプラグイン。

表示する内容は「サムネイル画像 + 記事タイトル」と同じなので、デザインを統一したいですね。

やり方は色々あると思いますが、ここでは、同じようなHTMLを生成して、1つのスタイルシートを適用する方針で進めてみます。

それぞれのプラグインをインストールした状態では、Newpost Catchプラグインはきれいに表示されますが、WordPress Popular Postsプラグインはタイトルの改行がおかしくなります。

そこで、WordPress Popular Postsプラグインが出力するHTMLを修正し、Newpost Catchプラグインが出力するHTMLに合わせるようにします。

WordPress Popular Postsウィジェットの出力するHTMLをカスタマイズする

幸い、WordPress Popular Postsプラグインは出力するHTMLを簡単にカスタマイズできます。

WordPressの管理者ページから、[外観] を開き、 “WordPress Popular Postsウィジェット”を開きます。

“HTML Markup settings” の “Use custom HTML Markup” をチェックします。

“Before / after title” は空欄のままです。

“Before / after Popular Posts” には、

<ul id="npcatch" >

</ul>

を入力します。

“Post HTML Markup” には、

<li>{thumb} <span class="title">{title}</span> {stats}</li>

を入力します。

Screen shot 2013-06-09 at 21.51.30.jpg

以上で保存すると、Newpost Catchプラグインのスタイルシートがうまく当たるようになり、表示が統一されます (右のサイドバーをご覧ください →)。

反応して頂けると励みになります。ありがとうございます