Wordpressで現在のカテゴリと親カテゴリの人気記事を表示する方法！

_blog

こんにちは、えんぞーです。

今回は久々にWordpress関連の事を書きたいと思います。

WordPressに関しては非常に情報が多いので目新しいことは書けないのですが、後々同じような事するときの為にコピペ出来るように残しておこうかと思いまして・・・ｗ

少なからずささっとコピペして実装したい人いるのではないかなぁ・・・とか思いますし。

で、今回のお題は人気記事の表示です。

カスタマイズのためのコード

解説しながらコード出していっても良いのですが、需要としては「コピペしてはよ動かしたい」だと思うのでポイント絞って書いていきますｗ

function.phpへ関数を追加

まず、テーマファイルにある「function.php」へ下記のコードを記載します。

/*
 *人気記事取得の基本関数（Wordpress PopularPosts使用）
 */
function getpopular($range,$limit,$cat){
    if ( function_exists('wpp_get_mostpopular') ) {
        $pram = array (
            'range' => $range, //集計期間の指定（daily,weekly,monthly）
            'limit' => $limit, //最大表示数
            'cat'   => $cat,
            'wpp_start' => '<ul>',//囲みタグの始まり
            'wpp_end' => '</ul>',//囲みタグの終わり
            'post_type' => 'post', //対象にするタイプを指定（今回は投稿のみ）
            'title_length' => '35', //タイトル文字数の上限を指定
            'stats_comments' => '0', //コメント数は表示しない
            'thumbnail_width' => '95', //サムネイル画像のwidth（px）
            'thumbnail_height' => '95', //サムネイル画像のheight（px）
            'post_html' => '<li>{thumb}<span>{title}</span></li>', //表示htmlの指定
        );
        wpp_get_mostpopular($pram);
    }
}

効率よく人気記事自体を引っ張ってくる為に関数にしました。

これで集計期間・最大表示数・カテゴリを指定して人気記事を引っ張ってこれるようになります。

「function_exists」でWordpressPopularPostの関数の存在を確認しているのでプラグインが無くてもエラーにはなりません。もちろん動きませんがｗ

他のパラメーターは好きに弄ってもらって大丈夫ですし、なんならほかパラメーターも引数にして自由度を上げてもOKです。

この関数を単体で使用する場合は、こんな感じになります。

<?php getpopular('daily',5,"");?>

上の例で言うと日毎の集計で最大5つ、カテゴリ指定は無しで表示されます。

テンプレートファイルに呼び出し部分を追加

あとは呼び出し部分をテンプレートのファイルに追加します。

<div class="popularranking">
<h4 class="pop_all">総合人気記事</h4>
<?php getpopular('daily',5,""); ?>

<?php
if(is_single()){
    //シングルページの場合での動作
    $cat = get_the_category();
    $cat = $cat[0];
    $cat_id   = $cat->cat_ID;
    $cat_name = $cat->name;
    echo '<h4 class="pop_here">「'.$cat_name.'」の人気記事</h4>';
    getpopular('weekly',5,$cat_id);

    //親の人気ランキング
    $parent_id = $cat->category_parent;
    $categories = get_categories('child_of='.$parent_id.'');
    $parent = get_category($parent_id);
    $parent_name = $parent->name;
    //親カテゴリの名前がなかった場合は処理しない
    if($parent_name){
        $catearray = array();
        $i=0;
        //現在いるカテゴリの親のランキングが欲しいので親に含まれる子カテゴリを列挙
        foreach($categories as $category) {
            $catearray[$i] = $category->term_id;
            $i++;
        }
        $childcat = implode(",",$catearray);

        echo '<h4 class="pop_parent">「'.$parent_name.'」の人気記事</h4>';
        getpopular('weekly',5,$childcat);
    }

} elseif(is_category()){
    //カテゴリページの場合での動作

    $parent_id = get_queried_object()->category_parent;
    $cat_cat = get_queried_object()->cat_ID;
    $cat_catname = get_queried_object()->cat_name;


    $categories = get_categories('child_of='.$cat_cat.'');
    $catearray = array();
    $i=0;
    if ($categories) {
        foreach($categories as $category) {
            $catearray[$i] = $category->term_id;
            $i++;
        }
        $childcat = implode(",",$catearray);
        echo '<h4 class="pop_here">「'.$cat_catname.'」の人気記事</h4>';
        getpopular('weekly',5,$childcat);
    }else{
        echo '<h4 class="pop_here">「'.$cat_catname.'」の人気記事</h4>';
        getpopular('weekly',5,$cat_cat);
    }

    //親の人気ランキング
    $categories = get_categories('child_of='.$parent_id.'');
    $parent = get_category($parent_id);

    $parent_name = $parent->name;
    if($parent_name){
        $catearray = array();
        $i=0;
        foreach($categories as $category) {
            $catearray[$i] = $category->term_id;
            $i++;
        }
        $childcat = implode(",",$catearray);

        echo '<h4 class="pop_parent">「'.$parent_name.'」の人気記事</h4>';
        getpopular('weekly',5,$childcat);
    }
}
?>
</div>

えんぞーどっとねっとのテーマで言うと、sidebar.phpに追加していますが別にどこでもいいです。

「popularranking」というクラス名で囲んでいます。

総合人気記事、現在表示しているカテゴリの人気記事、その親カテゴリの人気記事という順番で5件ずつ表示するようにしています。

シングルページ・カテゴリページでしか動作しないようになっており、親カテゴリ名がない場合（ルートの場合）は処理しません。

親のカテゴリについてはparent_idで引っ張ってきてそこにぶら下がっているカテゴリを列挙して値を渡しています。

ちなみに、アクセスされたページが無くて人気記事が取得できない場合は「Sorry. No data so far.」という文字列が出ます。

こんな感じでいいんでね？ってノリで組んだらうまく動いたようだったのでそのまま掲載してます。

なので、コード自体に余分な部分があるとかおかしい所があるかも知れませんがその辺はご愛嬌という事で・・・。

これはまずいぞっていう部分あれば教えて頂ければ嬉しいです＾＾

一応CSSも載っけておきます

このサイトで表示している人気記事リスト部分のCSSも載せておきます。

※このままだと「Wordpress Popular Posts」のデフォルトCSSの影響も受けてしまう様ですので上で記載したfunction.phpに囲みタグのデフォルト値も追加しました。

.popularranking {
  margin: 5px 0;
}

.popularranking li {
  margin: 5px 0;
  display: block;
  height: 95px;
  background-color: #FAFAFA;
  border-bottom: dashed 1px #cccccc;
}

.popularranking li:nth-child(odd) {
  background-color: #F0F0F0;
}

.popularranking li a img:hover {
  opacity: 0.5;
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
}

.popularranking li span a {
  display: block;
  text-align: left;
  color: #6b6b6b;
  font-size: 14.5px;
  padding: 5px;
  text-decoration: none;
}

.popularranking li span a:hover {
  color: #ff1822;
}

とりとめのないまとめ

おそらくもっとスマートなやり方で実装している人もいるかと思うのであくまでこんな実装方法もあるよね位に考えてもらえれば(´ε｀；)ｳｰﾝ…

普段からテーマファイル弄っている人であれば条件等も変更して自分好みに出来るかと思うのでその辺は色々弄ってみるといいですね。

基本的にコピペすれば動くと思いますので特に難しい事はないはずですが、Wordpress Popular Postのプラグインはインストール忘れないようにしてくださいｗ

WordPressで現在のカテゴリと親カテゴリの人気記事を表示する方法！

人気記事表示の概要

カスタマイズのためのコード

function.phpへ関数を追加

テンプレートファイルに呼び出し部分を追加

一応CSSも載っけておきます

とりとめのないまとめ