カテゴリごとの人気記事を表示したい

 

WordPressでブログを運営している人なら、一度は聞いたことがあるのでは無いか?という超有名プラグインWordPress Popular Post。過去記事について、PV数やコメント数等で人気の記事を表示してくれる、めっちゃ便利なプラグインです。

さらに、ブログを運営している人の中でも、「雑多ブログ」と呼ばれる、様々な内容を扱うブログをを運営している人なら、それぞれのカテゴリ別に人気記事を表示したい、と思ったことのある人もいるのではないでしょうか?

実は、WordPress Popular Post の機能を利用して、ウィジェットにカテゴリ別の人気記事を表示してくれるWPP Plus Widgetというプラグインが有ります。ただし、僕の環境ではパソコンだとうまく表示されるのですが、スマートフォンだと記事の取得をミスする、という謎現象が起きたため、利用を断念。ウィジェットにPHPを記入できるようになるPHP Code Widget 」というプラグインを入れて、コードを書き込んで実装しました。

今回実現したのは↓

  1. 「WordPress Popular Post」+「PHP Code Widget」でカテゴリ別人気記事を右ナビに実装
  2. 子カテゴリの記事の場合、親カテゴリも含めて人気記事を表示

当ブログのソースコードを記載しておきますので、コピペして使ってくださいな~

 

そもそも何故カテゴリごとの人気記事を表示するの?

ブログは、扱う内容の多様性で分類するならば、内容を絞った「特化ブログ」と、いろんな内容を扱う「雑多ブログ」に分けることができます。雑多ブログは、その内容の汎用性から、ネタ切れになりにくいという利点がある一方で、特化ブログよりもSEOが弱くなりがつ。1人あたりのPV数も少なくなる可能性があります。

なぜなら、WordPressに興味があってブログを訪れてくれたユーザーにとって、ダイエットの記事は特に興味の無いものだし、子育ての記事を読んでいる最中の人に、アクセスアップの記事を紹介しても読もうとは思ってくれませんよね。

つまり、雑多ブログにおいて、少しでも別の記事も合わせて読んでもらおうと思った場合、単に人気の記事をオススメするだけでなく、そのカテゴリにおける人気記事を紹介 した方が、2ページ目を見てくれる可能性が高まるわけです。

 

スポンサーリンク

「WPP Plus Widget」を使えばカテゴリ別人気記事なんて3分で作れる

WordPress Popular Post の機能を利用して、ウィジェットにカテゴリ別人気記事を表示してくれるプラグインがWPP Plus Widgetです。

WPP Plus Widget – 8wired

カテゴリが「親→子→孫」と階層深く分かれていたとしても、親カテゴリも含めてカウントした場合の人気記事を表示してくれたり、表示記事を除外したランキングを表示してくれたり、と至れり尽くせりのプラグインです。

具体的な利用法については、ちゅんこさん(@shufulife)の下記の記事が分かりやすいので参考にどうぞ。

人気記事を表示できるWordPressにプラグイン【WordPress Popular Posts】をご利用されている方、多いと思います。【WPP Plus Widget】は【Wo … more

こんなに簡単にカテゴリ別人気記事を表示できるWPP Plus Widgetですが、当ブログの環境では、スマホでアクセスすると記事の取得に失敗し、「no date」と表示されてしまいます。

popular-articles-by-category-01

つい最近のカスタマイズとして、キャッシュ系のプラグインを導入したので、そのせいかと思って全てのプラグインを無効化してみましたが×。

「この記事が気に入ったら いいね!しよう」ボタンを追加するために、アクセス端末がパソコンかスマホかで処理を分岐するようにfunction.phpをカスタマイズしたので、該当のテンプレートをカスタマイズ前に戻してみたけど×。

WordPressテーマを別のものにすると表示されるものもあるので、どうやらテーマ側の何かと競合して上手く表示されない模様。

 

スポンサーリンク

WordPress Popular Posts 単体で実装しようとするも失敗

「この記事が気に入ったら いいね!しよう」ボタンの追加で参考にさせて頂いたまなしばさん(@manami1030)が、「WordPress Popular Post」+「PHP Code Widget」でカテゴリ別人気記事を実装する方法を紹介してくださっています。

@まなしばです。 ブログの回遊率を上げるため、WordPress(テーマ:Stinger)のサイドバーで「今見てる記事のカテゴリと同じ人気記事を表示」させたいなと思い、その設置をしました。 プラグイン

しかし、こちらの方法でもやっぱり表示記事の取得が上手く行かず……。

WPP Plus Widget(上)は完全に取得をミスしているのに対し、まなしばさんの方法(下)だと、現在のカテゴリを誤って取得しているけど、記事自体の取得は成功している様子…

popular-articles-by-category-02

 

事前にfunction.phpに条件を記載することでやっと解決

最終的に行き着いたのが、のぶろぐさん(@nob_log_info)の記事の通り、事前にfunction.phpに条件を記載する方法。

このブログ、大きく分けると3つのテーマで更新してます となると人気記事を全体にするとなんか変な感じになるんです プラス、カテゴリーを深くしているので末端カテゴリーの人気記事を味気ない。。。 そんなわけで、第一階層のカテゴ&

しかも、子カテゴリに所属している記事も、親カテゴリ込みで人気記事を表示してくれる新設設計!

popular-articles-by-category-03

無事に表示されました!

 

当ブログで成功したカスタマイズ内容【コピペ用】

function.php

function.phpはのぶろぐさんのものと同じ。

//////////////////////////////////
// カテゴリ別人気記事表示のための振り分け処理
//////////////////////////////////
// カテゴリIDの取得
add_action('wp_head', 'get_current_category');
function get_current_category()
{
  global $_curcat;
  $cate = null;
  if( is_category() ) {
    //カテゴリー表示だったら
    $cat_now = get_the_category();
    // 親の情報を$cat_nowに格納
    $cate = $cat_now[0];
  } else if (is_single() ) {
    //シングルページ表示だったら
    $cates = get_the_category();
    $i = 0;
    $use_category = 0;
    foreach ($cates as $cate) {
      //未分類を除外した配列の一番初めのカテゴリを選択
      if($cate->category_parent > 0 && $use_category == 0) {
        $use_category = $i;
      }
      $i++;
    }
    $cate = $cates[$use_category];
  }
  //カテゴリーのオブジェクトごと保持
  $_curcat = $cate;
  return $cate;
}
// カテゴリーの親を取得
function get_top_category( $cat_id, $ancestors = array() ) {
  $cat = get_category( $cat_id );
  $ancestors = $cat;
  if ( $cat->parent != 0 ) {
    $ancestors = get_top_category( $cat->parent, $ancestors );
  }
  return $ancestors;
}

 

ウィジェット

ウィジェットはのぶろぐさんのものを参考に、出力されるソースの部分を<dl><dt><dd>から<ul><li>に変更。サムネイル画像のサイズも調整。「PHP Code Widget」の導入を忘れずに。

<div>
  <?php if (function_exists('wpp_get_mostpopular')): ?>
  <h2 class='box-header main-color-font'>人気記事</h2>
  <div id="popular-post">
    <ul>
      <?php
      // オプションの設定
      $args = array(
        'limit' => 5, // 表示する記事数
        'range' => 'monthly', // 期間("daily", "weekly", "monthly", "all")
        'order_by' => 'views', // ソート順("comments", "views", "avg" (1日の平均閲覧数))
        'post_type' => 'post', // 投稿タイプ(post,page,your-custom-post-type)
        'thumbnail_width' => 70, // サムネイルの横幅
        'thumbnail_height' => 70, // サムネイルの高さ
        'stats_comments' => 0, // コメントを表示する(1)/表示しない(0)
        'stats_views' => 0, // 閲覧数を表示する(1)/表示しない(0)
        'stats_author' => 0, // 投稿者を表示する(1)/表示しない(0)
        'stats_date' => 0, // 日付を表示する(1)/表示しない(0)
        'stats_date_format' => 'Y.n.j', // 日付のフォーマット
        'stats_category' => 0, // カテゴリを表示する(1)/表示しない(0)
        'excerpt_length' => 20, // 投稿のコンテンツから"n"文字の抜粋を作る
        'post_html' => // HTMLの出力フォーマット
        "
    <li>{thumb}<a href={url}>{text_title}</a></li>
    "
      );

      global $_curcat;
      if ($_curcat->term_id) {
        if ($_curcat->category_parent != 0) {
          $_curcat = get_top_category($_curcat->term_id);
        }
        $catids = get_categories('fields=ids&child_of=' . $_curcat->term_id);
        $catids[] = $_curcat->term_id;
        $args['cat'] = implode(',', $catids);
      }
      // 関数の実行
      wpp_get_mostpopular($args);
      ?>
    </ul>
  </div>
  <?php endif; ?>
</div>

 

CSS

CSSはちゅんこさんのものを利用。ナンバリングの背景色のみ修正。

/*--------------------------------------
WPP Plus Widget のカスタマイズ
--------------------------------------*/
.wpp-list li {
  float: none;
  clear: left;
}
.wpp-thumbnail {
  display: inline;
  float: left;
  margin: 0 10px 0 0;
  border: none;
}
#popular-post a {
  font-size: 14px;
  text-decoration : none;
}
#popular-post li {
  padding : 20px 10px;
  border-bottom: #d2d7e6 1px solid;
  line-height: 1.5;
  overflow: hidden;
  text-align: left;
}
#popular-post li:hover { background-color: rgba(238,238,238,0.3) }
#popular-post ul li { position : relative }
#popular-post li:last-child { border-bottom: none }
#popular-post { counter-reset : wpp-ranking }
#popular-post ul li::before {
  position : absolute;
  top : 15px;
  left : 5px;
  color : #ffffff;
  counter-increment : wpp-ranking;
  text-align : center;
  z-index : 9999;
  float : left;
  line-height : 25px;
  width : 25px;
  height : 25px;
  border-radius : 2px;
}
#popular-post ul li.number1::before,
#popular-post ul li.number2::before,
#popular-post ul li.number3::before,
#popular-post ul li.number4::before,
#popular-post ul li.number5::before {
  content : counter(wpp-ranking, decimal);
  background-color : #cd6349;/*ここでナンバリングの背景色変更*/
}
.wpp-views {
  font-size: 14px;
  display: block;
}

 

JavaScript

ナンバリング表示のためのJavaScriptも追記。利用中のテーマによるけど、script.jsとかあればそこに追記でOK。ちゅんこさんのものをそのままコピー。

/*---------------------------
人気記事ナンバリング
------------------------------*/
$(function(){
  $('#popular-post ul li').each(function(i){
    $(this).attr('class','number' + (i+1));
  });
});

 

TSUNJI(@tsunji1983)的まとめ

今回は、WordPress Popular Postで、表示された記事のカテゴリ別人気記事の表示についてまとめてみました。

利用中のテーマやプラグインにもよりますが、「WPP Plus Widget」が問題なく動くのであれば、今回の記事を読む必要は有りません(笑)

「WPP Plus Widget」を入れてみたけど、スマホだど上手く動かないよ?って人がいれば、ぜひ今回の記事の内容を導入してみてください。

 

以上、TSUNJI(@tsunji1983)でした。

 

参考にさせて頂いた記事まとめ