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プラグインのスタイルシートがうまく当たるようになり、表示が統一されます (右のサイドバーをご覧ください →)。

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

No Comments

Be the first to start the conversation.

コメントを残す

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Text formatting is available via select HTML.

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> 

*