小終夜〜夜のひとときに小さな出会いを

お気に入りのiPhoneアプリとがんばり屋さんに贈る心がほっこりする本のご紹介。 初心者にも簡単に作れるお料理レシピもどうぞ。

WordPress Popular Postsの代わりにWP-PostViewsでサムネイル表示&カスタマイズ

Post on: 2012/11/10 Categories: Web, wordpress

wordpress-logo-0001

こんにちは、ヨリコです。

WORDPRESS POPULAR POSTSに脆弱性?!」での予告通り、「WP-PostViews」を使って人気記事をサムネイル付きで表示する方法をやってみました。

スポンサーリンク

【参考】

[WordPressプラグイン] WP-PostViews、タイトルとともに投稿サムネイルが表示されるようにする/BEACH RESORT PHOTOCLIP

参考ページにしたがってサムネイルを追加できるようにする記述をphpに追加したんですが、なぜが動かず・・・。
ひとまず wp-postviews.php内をじっくり見てみると、同じ記述が6箇所ありました。

なにしろphpなど詳しくないので、どの場所を変えればいいのかわからない。
とりあえず6箇所全部にサムネイル用の記述を追加しました。
一応、特に不具合も出ずに保存できました。

そしてウィジェットのページで Viewsを選択、サイドバーに表示。
↓↓コレです↓↓

すると、確かにサムネイルは表示されるんですが、なぜかデカい!
サムネイルの元の大きさが200×200だったので、そのまま表示されてしまっていたんですね。
ですので、サムネイルの大きさをスタイルで変更しようと思います。

せっかくなので、新規投稿をサムネイル付きで表示してくれるプラグイン「Newpost Catch」と表示を合わせてみたいなと思います。

↓↓出来上がりはこんな感じ↓↓

Post Views Optionsの編集

設定>Post Views OptionsでMost Viewed Templateをスタイル変更しやすいように編集します。

デフォルトでは

<li><a href=”%POST_URL%”  title=”%POST_TITLE%”>%POST_TITLE%</a> – %VIEW_COUNT% views</li>

となっていると思います。
これをサムネイル付きにするために

<li><a href=”%POST_URL%”>%THUMBNAIL%</a><a href=”%POST_URL%” title=”%POST_TITLE%”>%POST_TITLE%</a></li>

というように変更。
さらに、スタイル変更用に文字の部分を<span>で囲みました。

<li><a href=”%POST_URL%”>%THUMBNAIL%</a><span class=”title”><a href=”%POST_URL%” title=”%POST_TITLE%”>%POST_TITLE%</a></span></li>

classがtitleなのは、Newpost Catchの設定に合わせたからです。

Newpost Catchのスタイルを参照

【Newpost Catch導入についての参考】

「Newpost Catch」 WordPress Plugin/今村だけがよくわかるブログ

Newpost Catchのスタイルシートがプラグイン>プラグインの編集から参照できるので、コピーします。
ペースト先はテーマによって様々だと思いますので、有効なスタイルシートにペーストしてください。
テーマのスタイルシートに直接記述する場合は、アップデートで書き換えられて無効になることもあるようですので、バックアップをとっておくことをおすすめします。

デフォルトでは、

#npcatch li{
overflow:hidden;
clear:both;
margin:0px 0px 0px;
}

#npcatch img{
float:left;
padding:5px 10px;
}

#npcatch .title{
width:135px;
float:left;
padding:5px 5px 5px 0px;
}

#npcatchの部分をWP-PostViewsのタグに合わせて.widget_viewsに変更。
#npcatch imgにNewpost Catchウィジェットで指定した縦横のサイズと同じサイズを指定します。

.widget_views li{
overflow:hidden;
clear:both;
margin:0px 0px 0px;
}

.widget_views img{
float:left;
padding:5px 10px;
width:50px;
height:50px;
}

.widget_views .title{
width:135px;
float:left;
padding:5px 5px 5px 0px;
}

テーマによっては、記事タイトルのところの行間が広い場合があります。(私がそうでした)
その場合は、.widget_views .titleのところにline-height: 1.3em;などと記述すれば行間を変えられます。

サムネイルに枠線を付けたい場合は、.widget_views imgのpaddingをmarginに変更し、border:1px solid #000000;などと記述すれば付けられます。

もっとスマートなやり方があるのかもしれませんが、あまり知識がない私でもできたよというやり方です。
今後不具合が出ないとも限りませんが、今のところきちんと作動しています。
よろしければやってみてください。

読んでいただきありがとうございます。
1日1クリック、
応援していただけるとうれしいです♪