HOMEPAGE TIPS BLOG

ホームページ制作TOP > Web技術Tips > プラグイン『Wordpress Popular Posts』のリストアイコン設定方法
カスタムテンプレートサイト / KOTETSU
[期間限定] 標準クオリティープラン  WEBサイト制作20%OFF
失敗しないWeb制作会社の選び方
WordPress

プラグイン『WordPress Popular Posts』のリストアイコン設定方法

WordPress2014.08.20

当ブログのサイドにある『人気記事ランキング』の表示には『WordPress Popular Posts』プラグインを使用していますが、ここでは『Wordpress Popular Posts』の基本的な特徴と、ウィジェットではなくテンプレートに直接コードを埋め込むケースで、リストの先頭に付いているアイコン画像を設定する方法について説明します。

『Wordpress Popular Posts』について

ランキングを表示するタイプのプラグインはいくつもありますが、『Wordpress Popular Posts』はWordPressの比較的新しいバージョン(ver3.8~)にも対応しており、管理画面も8割方は日本語化されているので使い勝手の良いプラグインです。
今回、当ブログのように、テンプレート(side.php)に直接記述し、且つアイコンをオリジナルのものに設定するに当たり、いくつかポイントとなるの以下です。

プラグインを有効化すると集計が勝手に始まる

プラグインを有効化すると、その瞬間から各記事のアクセス集計が始まります。
逆に言うと、プラグインを有効にしないと集計が始まらないので、「このプラグイン入れてみようかな?」と思ったらとりあえず有効化しておくことをオススメします。そうしないと、さて公開!となったときに、まだ表示する記事がない、なんてこともあり得ます。

出力方法は3種類

実際にランキングを表示する際は、ウィジェットとして使う方法とショートコードで使う方法と、テンプレートに直接タグを埋め込んで使う方法があります。今回はテンプレートに直接埋め込むパターンについて説明します。

テンプレートに埋め込むなら管理画面は関係ない

『WordPress Popular Posts』をインストールすると、下記の管理画面の『設定』で以下のように各種設定ができるようになりますが、ウィジェットで使うのではなく、テンプレートに直接埋め込む場合は管理画面で設定することはありません。
テンプレート上に直接各種設定を書き込むことになります。

wordpress_popular_posts_01

サンプルコード

side.phpなどに次のようなコードを書き込むことで、既に統計が取れていれば表示されるようになります。

<?php

$args = array(
	'limit' => 5,
	'range' => 'weekly',
	'wpp_start' => '<ol class="blog-ranking-list mb-m">',
	'wpp_end' => '</ol>',
	'post_html' => '<li><a href="{url}">{text_title}</a> </li>'
);
wpp_get_mostpopular($args);

?>

上記コードのように引数を配列として設定しておくと管理もしやすく便利です。
配列の各パラメーターについては、先程の設定画面の『パラメータ』タブに解説が掲載されているのでそれを参考にすれば問題ないでしょう。

ランキング用のリストアイコンをCSSで設定

アイコン表示については、理想としては出力されるリストタグが

<li class="list-01">...</li>
<li class="list-02">...</li>

のようにclassが割り当てられれば良いのですが、そのような機能はありません。また、foreach等を使って出力するわけではないので、こちら側で動的にclassを割り当てることもできません。

従ってCSSもしくはJavaScriptで対応することになりますが、今回は次のようにCSSのコードを追加することで背景画像としてリストアイコンを表示させています。

.blog-ranking-list li:nth-child(1) { background:url(images/icon-ranking-01.gif) no-repeat 2px 13px; } /* 『first-child』でも可 */
.blog-ranking-list li:nth-child(2) { background:url(images/icon-ranking-02.gif) no-repeat 2px 13px; }
.blog-ranking-list li:nth-child(3) { background:url(images/icon-ranking-03.gif) no-repeat 2px 13px; }
.blog-ranking-list li:nth-child(4) { background:url(images/icon-ranking-04.gif) no-repeat 2px 13px; }
.blog-ranking-list li:nth-child(5) { background:url(images/icon-ranking-05.gif) no-repeat 2px 13px; }

尚、『nth-child』はIE8以下は未対応なので、必要に応じて『selectivizr.js』も導入すると良いでしょう。

この記事は公開から 2176 日経っているため、情報が古くなっている可能性があります。

PAGE TOP