【ha-Basic】見ている記事と同一カテゴリーの人気記事一覧をサイドバーへ表示する方法
公開日：
カスタマイズ
当サイトで配布させていただいている【ha-Basic】テーマには管理者以外、検索エンジンクローラー以外（100%ではありません）からページにアクセスされる度にアクセス数をカウントする独自の機能があります。
このデータは投稿の一覧、管理者権限でログイン時に限り各記事のタイトル下部分へ表示されるようになっており、管理者側から記事の人気度の把握ができるようになっています。
また、同じデータを元にサイドバーへサイト全体の記事の中から人気のある記事を表示する「人気記事ウィジェット」が標準で備わっており、記事ランキングを簡単に表示できるようにしています。
ただこのデータはテーマを有効化した以降の累計値なので、自身でしばらくこのテーマを運用していて「人気のある記事はそれほど変わらないからいつも同じものが表示されるなぁ・・・」と感じました。
そこで今回は一歩進めて今見ている記事が含まれるカテゴリーの人気記事一覧を作ろう！！をテーマに、一覧ウィジェットの作成方法を紹介したいと思います。
【ha-Basic】テーマを利用していない方はアクセス数を計測するための設定が必要になりますので、テーマをダウンロードいただき、独自のカウント機能をご自身のテーマへ流用した後にウィジェットの作成を行ってください。【ha-Basic】テーマを入手するにはこちらをご覧ください。
同一カテゴリー内人気記事ランキングウィジェットの作り方
管理画面から外観→テーマエディタを選択し、右の一覧から「insert-functions.php」を開いてください
以下のコードを末尾へ貼り付けて保存してください。
/* カテゴリーごとの人気記事一覧ウィジェット */
class SC_Popular_Posts extends WP_Widget {
/*コンストラクタ*/
function __construct() {
parent::__construct(
'sc_popular_posts',
'カテゴリー人気記事',
array( 'description' => 'PV数の多い順で記事を表示' )
);
}
/*ウィジェット追加画面でのカスタマイズ欄の追加*/
function form($instance) {
if(empty($instance['title'])) {
$instance['title'] = '';
}
if(empty($instance['number'])) {
$instance['number'] = 5;
}
?>
<p>
<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('タイトル:'); ?></label>
<input type="text" class="widefat" id="<?php echo $this->get_field_id('title'); ?>"
name="<?php echo $this->get_field_name('title'); ?>"
value="<?php echo esc_attr( $instance['title'] ); ?>">
</p>
<p>
<label for="<?php echo $this->get_field_id('number'); ?>"><?php _e('記事表示件数:'); ?></label>
<input type="text" id="<?php echo $this->get_field_id('limit'); ?>"
name="<?php echo $this->get_field_name('number'); ?>"
value="<?php echo esc_attr( $instance['number'] ); ?>" size="3">
</p>
<?php
}
/*カスタマイズ欄の入力内容が変更された場合の処理*/
function update($new_instance, $old_instance) {
$instance = $old_instance;
$instance['title'] = strip_tags($new_instance['title']);
$instance['number'] = is_numeric($new_instance['number']) ? $new_instance['number'] : 5;
return $instance;
}
/*ウィジェットのに出力される要素の設定*/
function widget($args, $instance) {
extract($args);
echo $before_widget;
if(!empty($instance['title'])) {
$title = apply_filters('widget_title', $instance['title'] );
}
if (!empty($title)) {
echo $before_title . $title . $after_title;
} else {
echo '<h4>人気記事</h4>';
}
$number = !empty($instance['number']) ? $instance['number'] : get_option('number');
?>
<aside class="sidekiji">
<ul>
<?php get_the_ID();//記事のPV情報を取得する
$categories = get_the_category($post->ID);
$category_ID = array();
foreach($categories as $category):
array_push( $category_ID, $category -> cat_ID);
endforeach ;
$args = array('meta_key'=> 'post_views_count',//投稿数をカウントするカスタムフィールド名
'orderby' => 'meta_value_num',
'category__in' => $category_ID,
'order' => 'DESC',
'posts_per_page' => $number
);
$my_query = new WP_Query( $args );?>
<?php while ( $my_query->have_posts() ) : $my_query->the_post(); $loopcounter++; ?>
<li>
<a href="<?php the_permalink(); ?>">
<!–順位–>
<span class="rank-count r-count<?php echo $loopcounter; ?>">
<?php echo $loopcounter; ?>
</span>
<!–サムネイル画像の追加–>
<?php if( has_post_thumbnail() ): ?>
<?php the_post_thumbnail(array(75,75)); ?>
<?php endif; ?>
<div class="sidekiji-text">
<?php the_title(); ?>
<br>
<!–カテゴリ–>
<span class="cat-data">
<?php if( has_category() ): ?>
<?php $postcat=get_the_category(); echo $postcat[0]->name; ?>
<?php endif; ?></span>
</div>
</a>
</li>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
</ul>
</aside>
<?php echo $after_widget;
}
}
register_widget('SC_Popular_Posts');【注意】コードをコピーして使用する前に必ずお読みください
この記事内にコードが記載されている場合、コードはそのままコピー（いわゆるコピペ）してお使いいただいても構いませんが、以下の件にご留意ください。
使用については自己責任でお願いします
コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。
万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません
コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります
コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります
その場合には以下の方法で修正を行ってみてください
- コードの中に全角の記号が入っていませんか？ 半角にすることで解消できます
- コードの中に全角の空白（スペース）がありませんか？ 半角にすることで解決できます
- コードは合っているはずなのに更新できないときは 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「'」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
- 「何かが間違っています．．．」と表示され、更新できないときは このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
コードを転載する場合には
ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします
保存したら外観→ウィジェットに新しく「カテゴリー人気記事」というのが追加されますので、任意の場所へ追加すれば完了です。
※固定ページやブログ一覧、アーカイブ一覧などのページにはカテゴリーという概念がありませんので、すべての記事の人気ランキングが表示されますので、通常の人気記事ウィジェットの代わりに使うか、併用する場合には以下のように記事ページのみへ表示するようにするといいかと思います。
個別記事以外で表示させる必要がないというときは
一番手っ取り早いのは
というプラグインを使って出力するシーンを限定することですので、そちらをご覧になって設定いただければと思います。
私のように「それだけにプラグイン使うのはどうも・・・」という方は以下の設定を行ってください。
※コード内に一か所修正しないといけない場所がありますので最後まで読んでください。
/*投稿のみ表示*/
function remove_specific_widget($sidebars_widgets){
if(!is_single() && !is_admin()){
foreach($sidebars_widgets as $widget_area => $widget_list){
foreach($widget_list as $pos => $widget_id){
if($widget_id=='sc_popular_posts-〇'){
unset($sidebars_widgets[$widget_area][$pos]);
}
}
}
}
return $sidebars_widgets;
}
add_filter('sidebars_widgets','remove_specific_widget');コード自体は検索していて見つけた
で紹介されているものを使わせていただきました。詳細な解説も書かれていますのでぜひご覧になってください。
コードの簡単な説明をすると・・
if(!is_single() && !is_admin())で管理画面でなかったら・・と単一記事でなかったら・・という条件を与えています。そして特定のウィジェットを表示させないようにする記述がされています（「だったら・・・表示する」という記述だと意図しない結果が出るケースがありそうなのでコードはそのままで逆説的に使用しているため「なかったら・・表示しない」にしています）。
コードに変更を加える点は中ほどにある
if($widget_id=='sc_popular_posts-〇'){の
sc_popular_posts-〇の部分。これはウィジェットIDになり同じ名前のウィジェットを追加したり削除したりするたびに〇部分の数字が変わってしまいますので、サイトの状況に合わせて変更が必要です。
今回のカスタマイズでコードを追加して最初に使ったウィジェットの場合は「1」で大丈夫なので一度試してみてください。
ウィジェットIDの調べ方
〇の部分を「1」にしても表示／非表示がうまく動作しない場合にはウィジェットIDを調べる必要があります。
ウィジェットIDを調べるには
表示画面の「カテゴリー人気記事」ウィジェットの上で右クリックし、検証をクリックします（デベロッパーツールを起動します）
画像のように「Elements」というのを選択すると下にコードがたくさん出てきますので、「sc_popular_posts-〇」という部分を探します。
ここに書かれている数字をコピーして先ほどのコードの〇へ貼り付ければOKです。
いかがでしたか？簡単に言えば実装されている「人気記事ウィジェット」にカテゴリーが含まれているものという条件を足したものを作り、単一記事ページでしか生じさせないで！という単純なものですが、PHP初心者の方にとってはすごくハードルの高いものかもしれませんので紹介させていただきました。こうしたコードの勉強を始めると本来の記事を書く作業がおろそかになりますので、さっとコピペして実装してくださいね。
このページはモバイル端末でもご覧いただけます
左のQRコードを読み取っていただくと、このページのURLが表示され、簡単にアクセスできます。ぜひモバイル端末でもご覧ください。
いつでもご相談・サイトカスタマイズの依頼を受け付けています
Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。
※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちら
から登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。
【スポンサーリンク】