WordPress Popular Postsでビュー数付き人気記事ランキングを作る方法

WordPress Popular Postsで人気記事を作る

ブログの人気記事ランキングを作成するプラグインとして利用者も多い「WordPress Popular Posts」

僕のブログでは相性が究極に悪くて利用していませんが、先日ブログのテーマカスタマイズのお手伝いをした際に人気記事ランキングを作成したので、備忘録がてらサンプルコードを紹介します。

「WordPress Popular Posts」をご利用でしたらぜひ試してみてください。

7人のブログ侍

WordPress Popular Postsでビュー数付き人気記事ランキングを作る!

意外と人気プラグインを使ったカスタマイズ経験が浅いよっひー(@yosiakatsuki)です。

先日ブログのカスタマイズをお手伝いした際に、「WordPress Popular Posts」を少しいじることがありました。

いやはや、人気プラグインだけありますね。いとも簡単に人気記事ランキングができちゃいます。

今回作成した、記事タイトル付近に本日の人気記事一覧を1日のビュー数付きで表示する方法を(備忘録も兼ねて)紹介します!

まだ「WordPress Popular Posts」を導入していないけど、今回のカスタマイズ内容を試してみたい場合はバズ部様などを参考にプラグインのインストールと初期設定をしておいて下さい。

また、今回のカスタマイズではテーマファイルを編集することになりますので、編集前にテーマのバックアップを必ずとっておいて下さい。

より安全にカスタマイズしたいなら、カスタマイズはローカル環境で行い、本番環境にアップロードする方法をおすすめします。

さてさて、それでは人気記事ランキングを作ってみましょう!

人気記事ランキングサンプルコード

人気記事ランキングのサンプル

まず、どんな人気記事ランキングが出来上がるかというと、上の画像のようにタイトル付近に3記事ほど本日の人気記事をビュー数付きで表示します。

人気記事部分のコードは次のようになりました。(表示中の記事カテゴリーと同じカテゴリーのランキングが出来上がります。)

<div class="top_ranking">
<p>本日の人気記事</p>
<?php
  //記事カテゴリ取得
  $categories = get_the_category($post->ID);
  $category_ID = '';
  foreach($categories as $category):
  if ($category_ID != '') { $category_ID .= ','.$category_ID;} 
  $category_ID .= $category->cat_ID;
  if(($category -> category_parent)!=='0') :
    $childlist = get_term_children(intval($category -> category_parent),'category');
    foreach($childlist as $childcat):
      $category_ID .= ','.$childcat;
    endforeach ;
  endif;
  endforeach ;
  //WPP処理
  /*
 $wpp = array (
 'range' => 'daily',      /*集計期間の設定(daily,weekly,monthly)/
 'limit' => 3,            /*表示数 /
 'post_type' => 'post',   /*投稿のみ指定(固定ページを除外)/
 'stats_views' => '1',    /*閲覧数を表示させる/
 'post_html' => '<li><span class="views">{views}</span>{title}</li>', /*表示されるhtmlの設定/
 'cat' => $category_ID,   /*カテゴリ絞り込み/
); */
 $wpp = "
 range='daily'
 &limit=3
 &post_type='post'
 &stats_views=1
 &post_html='<li><span class=\"views\">{views}</span>{title}</li>'
 &cat=".$category_ID;
?>
<?php wpp_get_mostpopular($wpp); ?>
</div>

合わせて次のCSSも書き足しておくとそれなりのランキング表示が出来上がると思います。

.top_ranking ul{ 
  padding: 0px ; 
}
.top_ranking li{ 
  border-top: 1px #ccc dashed; 
}
.top_ranking li:last-child { 
  border-bottom: 1px #ccc dashed; 
}
.top_ranking p{ 
  padding: 0;margin: 0; 
}
.top_ranking a{ 
  text-decoration:none; 
}
.top_ranking a:hover{ 
  background-color: #f5f5f5; 
}
.top_ranking .views {
  padding: 0 5px 0 0;
  color: #fcc800;
}
.top_ranking .views::before {
  content: '\f005';
  font-family: 'FontAwesome';
  margin: 0 4px 0 0;
}
/* Font Awesomeを使ってなければこんな感じでいかがでしょう
.top_ranking .views::before {
  content: '★';
  margin: 0 4px 0 0;
}
*/

Font Awesomeを使っていること前提のCSSなので、もしFont Awesomeを使っていなければ.top_ranking .views::before content font-family を適宜変えてみてください。

人気記事ランキングのビュー数をハートマークに変更したら想像以上に良い感じになってびっくりしてる

また、Font Awesomeを使っていれば.top_ranking .viewsを次のように変えて、ビュー数の左にハートマークを出してもいい感じかもしれません。

.top_ranking .views {
  padding: 0 5px 0 0;
  color: #f09199;
}
.top_ranking .views::before {
  content: '\f005';
  font-family: 'FontAwesome';
  margin: 0 4px 0 0;
}

色は「日本の伝統色 和色大辞典 – Traditional colors of Japan」から「桃色」をチョイスしてみました。

表示すべきアイコンはおそらく目のアイコンなのでしょうけど…目が並んでると怖いので避けました。

見た目の調整はご自身のサイトに合わせて調整してみてください。

途中で出会ったエラー

カスタマイズの途中で次のようなエラーに出会いました。

Warning: htmlspecialchars() expects parameter 1 to be string, array given in [WordPressのインストールディレクトリ]/wp-content/plugins/wordpress-popular-posts/wordpress-popular-posts.php on line 3333

エラーが発生したコードはこちら

<div class="top_ranking">
<p>本日の人気記事</p>
<?php
  //記事カテゴリ取得
  $categories = get_the_category($post->ID);
  $category_ID = array();
  foreach($categories as $category):
  array_push( $category_ID, $category -> cat_ID);
  if(($category -> category_parent)!=='0') :
    $childlist = get_term_children(intval($category -> category_parent),'category');
    foreach($childlist as $childcat):
      array_push( $category_ID, $brcat);
    endforeach ;
  endif;
  endforeach ;
  //WPP処理
  
 $wpp = array (
 'range' => 'daily',    /*集計期間の設定(daily,weekly,monthly)*/
 'limit' => 3,          /*表示数*/
 'post_type' => 'post', /*投稿のみ指定(固定ページを除外)*/
 'stats_views' => '1',  /*閲覧数を表示させる*/
 'post_html' => '<li><span class="views">{views}</span>{title}</li>', /*表示されるhtmlの設定*/
 'cat' => $category_ID, /*カテゴリ絞り込み*/
); 
?>
<?php wpp_get_mostpopular($wpp); ?>
</div>

(僕の技術力の低さも相まって)感覚的には「全部String渡してるわ!!!」なんですけど、どうもHTML部分が配列か何かで認識されてしまうようです。

($category_IDは配列ですが、内部的に文字列とは別の処理で展開されます)

対処方法は調べればいくつも出てきましたが、一番早い方法が「人気記事ランキングサンプルコード」で紹介したコードのようにwpp_get_mostpopularの引数を配列ではなく、文字列で渡す方法に変えることでした。

最初、プラグイン側を直してやろうと血迷いましたが、アップデートで消えてしまうのでその直し方はNGですね…

テーマ側で簡単に対応出来て良かったです。

よっしーのひとこと

よっひー

便利なプラグイン使うとホント簡単にいろんなことが実装出来ますね!

プラグインも入れ過ぎると思わぬトラブルの元になることもあるので、入れ過ぎには注意ですが、うまく使えばやりたいことを簡単に実現できるようになります。

上手に付き合っていきましょ。

ではまた。

明日のブログ侍は?

明日の七人のブログ侍は木曜日担当、いずれも。のkoh(@koh_izuremo)さんです!お楽しみに!

七人のブログ侍とは

「七人のブログ侍」とは、七人のブロガーが担当曜日を決め、日替わりで更新していくリレー企画!

他の侍の記事も是非読んでみてください!

7人のブログ侍