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

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

みっぴー

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

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


みっぴー

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

ねこ

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

【スポンサーリンク】

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

みっぴー

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

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

カテゴリ別人気記事のカスタマイズ内容
  1. カテゴリ別人気記事をウジェットなど好きなところに表示できる
  2. プラグインはなし
  3. 好きなデザインに指定出来る

修正するファイル

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

このカスタマイズで修正するファイル
  1. catninki.php(説明は下記にあり)
  2. functions.php
  3. 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」という名前にしてください。

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
/*カテゴリ別人気記事オリジナルカスタマイズ*/
.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のテーマを使っている私がデザインを調整したものなので、お使いのテーマによっては崩れてしまうかもしれません。

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

5.ショートコード挿入

そして、最後にカテゴリ別人気記事を表示したい箇所に下記のショートコードを挿入してください。

みっぴー

ウジェットであれば、テキストを使って入れてくださいね。
ショートコード
[myphp file='catninki']
MEMO
catninkiの部分が、2で作ったファイル名と同様になるようにしてください。よく分からない人は、上記のコードを何もいじらずそのままコピペすればいけると思います。CSSの内容は、要調整。

最後に

みっぴー

カテゴリ別人気記事をサイドバーに表示しておけば、自分の興味がある記事をすぐに見つけることが出来るので、雑記ブログなどを運営している方は、是非試してみてください!

『プラグインなし』で様々な機能を実装するカスタマイズの一覧を作りましたので、プラグインが多くなりがちな方は参考にしてください。

Twitterのアカウント無駄にしてませんか?
あなたが予め設定した言葉をツイートしている人をフォローできるツール

だから、自分のブログに興味がある人だけを集める事が出来るので無駄なくアクセスアップが見込めます。


無料でも使えるので私も愛用中です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です