プラグインなしでカテゴリ別人気記事を表示する方法

「雑記ブログ」を運営していると、様々なジャンルがブログ内に溢れていて、なかなか『回遊率』が上がらないといった場合もありますよね。

みっぴー

確かに、カテゴリーがバラバラだと自分の興味があるものを見つけにくくなっちゃうよね。

だけど、今自分が見ている記事と『同じカテゴリー』の「人気記事」のランキングが、サイドバーなどにあれば、興味があるものが目に入るので、回遊率も自然と上がる可能性があります。

みっぴー

でも、やっぱり私はプラグインなしでカテゴリ別の人気記事を表示する機能を実装したい！

分かった。分かった。

ねこ

そこで今回は、プラグインなしでカテゴリ別人気記事を表示する方法をご紹介します。

ちょっとPRです

みっぴー（@bennriya_mi）です～。

アイキャッチを変えただけで、広告表示回数が5倍になりました。（こっそり独り言）

今回、そのアイキャッチを誰でも使えるようにテンプレにしました。
詳しくは、下記にて

⇒アイキャッチテンプレート150種について

今回のカテゴリ別人気記事を表示のカスタマイズ内容
- 修正するファイル
プラグインなしでカテゴリ別人気記事を表示するには
最後に

今回のカテゴリ別人気記事を表示のカスタマイズ内容

みっぴー

今回のカスタマイズでこんな事が出来るようになるよ！

今回のカテゴリ別人気記事をプラグインなしで表示するカスタマイズ内容をまとめると下記の通りです。

カテゴリ別人気記事のカスタマイズ内容

カテゴリ別人気記事をウジェットなど好きなところに表示できる
プラグインはなし
好きなデザインに指定出来る

修正するファイル

今回のカスタマイズで編集するファイルは下記の通りです。

このカスタマイズで修正するファイル

catninki.php(説明は下記にあり)
functions.php
style.css

プラグインなしでカテゴリ別人気記事を表示するには

最近のテーマは、プラグインなしでも人気記事を表示してくれるものが多くなりました。

本当に助かります。テーマを作ってくれている方に感謝！

私は、SANGOのテーマを使っていますが、SANGOにも人気記事をプラグインなしで表示してくれます。

しかし、『カテゴリ別人気記事』を表示するとなると、WordPress Popular Postsが必要です。

他のテーマでもプラグインが必要になることも多いので、カテゴリ別人気記事の表示もプラグインなしで実装できるようにカスタマイズしました。

参考 WordPressで人気記事をプラグインなしで表示する方法KEPRATE

こちらの方法ですが、上記のサイトで紹介されているコードを参考に、カテゴリー別の人気記事になるように改造しました。

みっぴー

phpとか全然詳しくない私が色々と試した結果できたものなので、もっとカンタンな方法や間違いがあるかもしれません。何か気付いた方は、Twitterやコメントなどで教えて頂けると助かります。

今回のカスタマイズ手順は下記の通りです。

ウジェットのタイトルのアイコンを消す手順

STEP.1
下準備
ショートコードが記事内で使えるように下準備する
STEP.2
catninkiファイル作成
「catninki.php」にコード追加する
STEP.3
呼び出す内容を定義
「functions.php」にコード追加する
STEP.4
CSSを定義
「style.css」に新しいCSSを追加してスタイルを調整してください
STEP.4
ショートコードを挿入
定義したショートコードを任意の場所に追加する

1．ショートコードが記事内で使えるように下準備

この方法を実装するにあたって、まずは記事内にショートコードでphpファイルを呼び出せるようにカスタマイズする必要があります。

「[WordPress]記事内にphpテンプレートをショートコードで呼び出す方法」を参考にして、phpファイルをショートコードで呼び出せるようにしておいてくださいね。

こちらの説明で「template1.php」を作ってと伝えていますが、今回は「catninki.php」という名前にしてください。

【オススメツールをちょっと紹介】
複数のASPを一括で管理する無料のツール
案件の報酬額を比較できるので、1番条件の良いASPを簡単に見つけることが出来ます！

2．「catninki.php」にコード追加

追加した「catninki.php」に下記のコードを追加して保存してください。

コードを表示

catninki.php

<nav class="cms-nav cms-nav-ranking">
    <ul>
<?php

    $custom_key = 'custom_popular_ranking';

$categories = get_the_category($post->ID);
$category_ID = array();
foreach($categories as $category):
  array_push( $category_ID, $category -> cat_ID);
endforeach ;
    $args = array(
        'category__in' => $category_ID,
        'posts_per_page'=>5,
        'meta_key'=>$custom_key,
        'orderby'=>'meta_value_num',
        'order'=>'DESC'
    );

  
    $my_query = new WP_Query($args);

    $ranking_counter = 0;

?>
<?php if( $my_query -> have_posts() ) :?>
<?php while($my_query -> have_posts()) : $my_query -> the_post();?>
<?php

    $category = get_the_category();
    $category_slug = $category[0]->slug;
    $category_name = $category[0]->cat_name;

    $thumbnail_id = get_post_thumbnail_id();
    $eye_img = wp_get_attachment_image_src($thumbnail_id,'medium');

    $popular_ranking_cnt = get_post_meta($post->ID, $custom_key, true);

    $ranking_counter++;

?>


        <li class="ranking-<?php echo $ranking_counter; ?>">
            <a href="<?php the_permalink();?>">
                <div class="cms-nav-img">
                    <img src="<?php echo $eye_img[0]; ?>" width="<?php echo $eye_img[1]; ?>" height="<?php echo $eye_img[2]; ?>" alt="<?php the_title(); ?>">
                </div>

                    <div class="cms-nav-tit"><?php the_title(); ?></div>
                    <div class="cms-nav-info clearfix">

                        

                    
                </div>
            </a>
        </li>



<?php endwhile;?>
<?php endif;?>
    </ul>
</nav>

もし面倒な場合は、下記よりダウンロードして、お使いのレンタルサーバーのFTPにアップしてください。

ダウンロード

3．functions.phpにコード追加

「catninki.php」を保存したら、次にfunctions.phpに、下記のコードを入れて保存してください。

コードを表示

functions.php

function get_custom_popular_ranking() {
    if (!is_single()) return;
    if (empty($post_id)) {
        global $post;
        $post_id = $post->ID;
    }
session_start();
    if (!isset($_SESSION['custom_popular_id_'.$post_id])) {

        $_SESSION['custom_popular_id_'.$post_id] = 1;

        $custom_key = 'custom_popular_ranking';
        $cnt = get_post_meta($post_id, $custom_key, true);
        if ($cnt == '') {
            $cnt = 1;
            add_post_meta($post_id, $custom_key, $cnt);
        } else {
            $cnt++;
            update_post_meta($post_id, $custom_key, $cnt);
        }
    }
    session_write_close();
}
add_action('wp_head', 'get_custom_popular_ranking');

4．CSSを追加

最後に下記のCSSを保存してください。

CSSコードを表示

CSS

/*カテゴリ別人気記事オリジナルカスタマイズ*/
.cms-nav.cms-nav-ranking li {
    position: relative;
	margin: 0.5em 0 0.5em 0;
}
.cms-nav-img {
    width: 80px;
    float: left;
    margin: 4px 5px 4px 0;
}
.cms-nav-tit {
	font-size: .9em;
    line-height: 1.3;
}
.cms-nav.cms-nav-ranking li::after {
    pointer-events: none;
    position: absolute;
    display: block;
    content: '';
    letter-spacing: 0.1em;
    font-size: 12px;
    font-weight: 700;
    top: 0px;
    left: 0px;
    width: 20px;
    height: 20px;
    background: #bbb;
    text-align: center;
    color: #fff;
    z-index: 9;
}
.cms-nav.cms-nav-ranking li:nth-child(3)::after,
.cms-nav.cms-nav-ranking li:nth-child(2)::after,
.cms-nav.cms-nav-ranking li:nth-child(1)::after {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    padding: 3px;
    font-size: 12px;
    vertical-align: middle;
}
.cms-nav.cms-nav-ranking li:nth-child(1)::after {
    content: '1';
    background: #bca045;
}
.cms-nav.cms-nav-ranking li:nth-child(2)::after {
    content: '2';
    background: #7d7d7d;
}
.cms-nav.cms-nav-ranking li:nth-child(3)::after {
    content: '3';
    background: #9b7155;
}
.cms-nav.cms-nav-ranking li:nth-child(4)::after,
.cms-nav.cms-nav-ranking li:nth-child(5)::after,
.cms-nav.cms-nav-ranking li:nth-child(6)::after,
.cms-nav.cms-nav-ranking li:nth-child(7)::after {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    padding: 3px;
    font-size: 12px;
    vertical-align: middle;
}
.cms-nav.cms-nav-ranking li:nth-child(4)::after {
    content: '4';
}

.cms-nav.cms-nav-ranking li:nth-child(5)::after {
    content: '5';
}

.cms-nav.cms-nav-ranking li:nth-child(6)::after {
    content: '6';
}

.cms-nav.cms-nav-ranking li:nth-child(7)::after {
    content: '7';
}

MEMO

上記のCSSは、SANGOのテーマを使っている私がデザインを調整したものなので、お使いのテーマによっては崩れてしまうかもしれません。

お使いのテーマに合わせて調整してくださいね。