【人気記事の表示】「WordPress Popular Posts」のテンプレートタグを使ってカスタマイズする方法

最近では、ほとんどのブログサイトで表示されているランキング。
あなたも作りたくありませんか?
ブログとしての見栄えもそうですが、ランキングを表示することでPVアップの効果も見込めます。

今回のランキング表示は「WordPress Popular Posts」を使用したものになります。もちろんそのまま使うことも可能ですが、いらないタグやテキストなどは削除しちゃいましょう。
人によって、求めている形は異なると思うので、一つの形を紹介するだけではなく、カスタマイズの方法も書いておきたいと思います。

このプラグインでほとんどの形は作れると思うので、是非参考にしてみてください！
※プラグインはインストールしてあるものとします

当サイトの表示カスタマイズ

今回ランキングを表示されるに当たって行ったことをざーっと書いていきます。

sidebar.phpにランキングのコードを追加

<div class="widget_categories side-widget">
<div class="side-widget-inner">
<h4 class="side-title"><span class="side-title-inner">RANKING</span></h4>
<!-- wppカスタマイズランキング -->
<?php
 $wpp = array (
 'range' => 'monthly',
 'limit' => 5,
 'post_type' => 'post',
 'title_length' => '25',
 'stats_comments' => '0', 
 'stats_category' => '1',
 'stats_views' => '1',
 'thumbnail_width' => '90', 
 'thumbnail_height' => '90', 
 'wpp_start' => '<div id="rank">',
 'wpp_end' => '</div>',
 'post_html' => '<div class="rank-post">
<a href="{url}">
<div class="rank-img">{thumb_img} </div>
<div class="rank-text">
<h5>{text_title}</h5>
<div class="rank-spec">
<span class="cat">{category}</span>
</div>
</div>
</a>
</div>',
); ?>
<?php wpp_get_mostpopular($wpp); ?>
<!-- wppカスタマイズランキング -->
</div><!--/side-widget-inner-->
</div><!--/widget_categories side-widget-->

サイドバーへの表示なので、ウィジェットを使って実装しても良かったのですが、なんとなくテンプレートタグを使いました。
テンプレートタグでの表示については後ほど解説します。

カテゴリー名につくアンカータグの削除

プラグイン編集で「wordpress-popular-posts.php」を選択します。

$post_cat = '<a href="' . get_category_link( $category_id ) . '" class="cat-id-' . $category_id . '">' . $category_name . '</a>';

↓

$post_cat = $category_name;

これでカテゴリーへのリンクが消えてくれます。

CSSで表示修正

#rank {
  counter-reset: wpp-ranking;
}
#rank .rank-post{
  overflow:hidden;
  padding:10px 0;
  position:relative;
}
#rank .rank-post:before{
  color:white;
  background: #343434;
  text-align: center;
  content: counter(wpp-ranking, decimal);
  counter-increment: wpp-ranking;
  line-height: 1;
  padding: 5px 7px;
  position: absolute;
  top:10px;
  left:0;
  z-index: 1;
}
#rank .rank-post a{
  display:block;
  text-decoration:none !important;
}
#rank .rank-post a h5{
  text-decoration: underline;
  display:block;
  margin-bottom:7px;
}
#rank .rank-post a:hover h5{
  text-decoration: none;
}
#rank .rank-post a .rank-spec{
  overflow:hidden;
  display:block;
  font-size:90%;
}
#rank .rank-post a .rank-spec .cat,
#rank .rank-post a .rank-spec .time{
  display:inline-block;
  float:left;
  margin-right:20px;
  padding:1px 3px;
  border: 1px solid #27343c;
  color: #27343c;
}

ちょっとしたデザインの調整やランキングの番号付けです。番号については後ほど解説します。

テンプレートタグを使った表示の解説

<?php wpp_get_mostpopular(); ?>

これがテンプレートタグの基本の形です。そして、最後の ()内 でパラメーターに値を与えることで表示を変えることができるようになります。

<?php wpp_get_mostpopular( 'wpp_start="<ol>"&wpp_end="</ol>"' ); ?>

これは、「wpp_start」を「<ol>」、「wpp_end」を「</ol>」にして表示することを指します。
このように2つや3つぐらいのパラメーターであれば、上記のように書けば問題ありません。

ただ、今回実装した形はいくつものパラメーターを設定したかったため、配列を使った形で実装しました。
今回のカスタマイズを例に解説します。

<?php
 $wpp = array (
 'range' => 'monthly', /*集計期間の設定（daily,weekly,monthly）*/
 'limit' => 5, /*表示数はmax5記事*/
 'post_type' => 'post', /*投稿のみ指定（固定ページを除外）*/
 'title_length' => '25', /*タイトル文字数上限*/
 'stats_comments' => '0', /*コメント数は非表示*/
 'stats_category' => '1', /*カテゴリーを表示させる*/
 'stats_views' => '1', /*閲覧数を表示させる*/
 'thumbnail_width' => '90', /*画像のwidth（px）*/
 'thumbnail_height' => '90', /*画像のheight（px）*/
 'wpp_start' => '<div id="rank">',
 'wpp_end' => '</div>',
 'post_html' => '<div class="rank-post">
<a href="{url}">
<div class="rank-img">{thumb_img} </div>
<div class="rank-text">
<h5>{text_title}</h5>
<div class="rank-spec">
<span class="cat">{category}</span>
</div>
</div>
</a>
</div>', /*表示されるhtmlの設定（サムネイル、記事タイトル、の順で表示）*/
); ?>
<?php wpp_get_mostpopular($wpp); ?>

大枠としては、wppという変数に配列(array)を与え、それをテンプレートタグのパラメータとして渡しています。今回で言うと、12個のパラメーターです。
もちろん ()内 で書くこともできますが、見やすさが全然違いますね。見にくいコードはミスのもとなので、避けたいところです。

パラメーターの中で注意してほしいところは「post_html」です。これは最終的に出力する部分(ループ部分)になるのですが、ちょっと変わったコードが書かれていることが分かると思います。
「{thumb_img}」とかです。これはプラグイン側で設定されているもので、その出力内容を変更したい場合はコアファイルを触る必要があります。

最初に出てきたカテゴリーの出力などがそれにあたりますね！
「{category}」は標準でアンカーテキストとして表示されるようになっているので、そこを修正したい場合は「wordpress-popular-posts.php」をいじらなければいけません。

出力できるタグ一覧

コアファイルで設定されているものがいくつかあるので、その紹介を。

{title}

リンク付きのタイトルを表示

{stats}

コメントや閲覧数、カテゴリーを表示

{excerpt}

抜粋文を表示

{thumb}

リンク付きサムネイル画像を表示

{thumb_img}

リンクなしサムネイル画像を表示

{url}

URLを表示

{text_title}

リンクなしのタイトルを表示

{category}

リンク付きのカテゴリー名を表示

{views}

閲覧数を表示

{comments}

コメントを表示

{date}

投稿日時を表示

うまく表示されない場合は、パラメーターで表示するための設定がされていないことがあるので注意してください。

ランキングに番号をつける方法

いろいろな方法が考えられますが、CSS3を使えば少しのコードで実装できます。CSS3ばんざーい。

使うのは疑似要素と「counter」です。

.wpp-list {
  counter-reset: wpp-ranking;
}
.wpp-list li:before {
  content: counter(wpp-ranking, decimal);
  counter-increment: wpp-ranking;
}

このコードはプラグインのデフォルト表示を例に作っています。ソースコードを変更した場合は適宜修正して使ってください！

まとめ

いかがでしたでしょうか。テンプレートタグを使えば、表示のカスタマイズはもちろんのこと表示場所も選べるようになります。
サイドバーであればウィジェットでの実装でも良いと思いますが、テンプレートタグの方が汎用性が高いので、個人的にはおすすめです！

次はカテゴリーごとにランキングを変えてみようかな～なんて思ってます。