W/ordPressで作られているウェブサイトでカテゴリーページを表示したとき通常はそこに表示される記事は新着順です。通常のブログではそれだけでもいいのかもしれませんが、サイトのコンテンツによってはどんな記事が読まれているのか？どんなコンテンツが人気なのか気になったりすることもあるかもしれません。そんな時にどうするかという方法を紹介します。
目次
function.phpへの記述例
考え方としては表示するページのURLにカスタムクエリパラメータを追加して表示する順序を切り替えるようにします。今回は?orderby=newestや?orderby=popularを追加するようにしてみます。
function custom_orderby_query( $query ) {
if ( $query->is_main_query() && !is_admin() && is_category() ) {
$orderby = isset($_GET['orderby']) ? $_GET['orderby'] : 'newest';
if ( $orderby == 'popular' ) {
$query->set( 'meta_key', 'post_views_count' );
$query->set( 'orderby', 'meta_value_num' );
$query->set( 'order', 'DESC' );
} else {
$query->set( 'orderby', 'date' );
$query->set( 'order', 'DESC' );
}
}
}
add_action( 'pre_get_posts', 'custom_orderby_query' );続いて人気順を実現するために、投稿ビュー数を保存するカスタムフィールド（例：post_views_count）を設定します。
function set_post_views($postID) {
$count_key = 'post_views_count';
$count = get_post_meta($postID, $count_key, true);
if($count==''){
$count = 0;
delete_post_meta($postID, $count_key);
add_post_meta($postID, $count_key, '0');
}else{
$count++;
update_post_meta($postID, $count_key, $count);
}
}
remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0);
function track_post_views ($post_id) {
if ( !is_single() ) return;
if ( empty ( $post_id) ) {
global $post;
$post_id = $post->ID;
}
set_post_views($post_id);
}
add_action( 'wp_head', 'track_post_views');category.phpへの記述例
<?php get_header(); ?>
<div class="category-page">
<h1><?php single_cat_title(); ?></h1>
<!-- 新着順と人気順の切り替えリンク -->
<div class="order-links">
<a href="<?php echo add_query_arg('orderby', 'newest'); ?>">新着順</a> |
<a href="<?php echo add_query_arg('orderby', 'popular'); ?>">人気順</a>
</div>
<!-- カテゴリーの投稿ループ -->
<?php if ( have_posts() ) : ?>
<div class="post-list">
<?php while ( have_posts() ) : the_post(); ?>
<div class="post-item">
<?php if ( has_post_thumbnail() ) : ?>
<div class="post-thumbnail">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('thumbnail'); ?>
</a>
</div>
<?php endif; ?>
<div class="post-content">
<h2 class="post-title">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h2>
<div class="post-meta">
<span class="post-date"><?php echo get_the_date(); ?></span>
</div>
<div class="post-excerpt">
<?php the_excerpt(); ?>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
<!-- ページネーションの表示 -->
<div class="pagination">
<?php
echo paginate_links( array(
'total' => $wp_query->max_num_pages,
'prev_text' => __('« 前へ'),
'next_text' => __('次へ »')
) );
?>
</div>
<?php else : ?>
<p>投稿が見つかりませんでした。</p>
<?php endif; ?>
</div>
<?php get_footer(); ?>ポイントの説明
ヘッダーとフッターの呼び出し
get_header() と get_footer()でサイトの共通ヘッダーとフッターを呼び出しています。
カテゴリータイトルの表示
single_cat_title()で現在のカテゴリー名を表示します。
新着順と人気順の切り替えリンク
add_query_arg()を使用してURLにクエリパラメータを追加し、新着順と人気順を切り替えるリンクを作成しています。
投稿ループ
have_posts()とthe_post()を使用して、カテゴリー内の投稿をループし、それぞれの投稿の情報（サムネイル、タイトル、投稿日、抜粋）を表示します。
ページネーション
paginate_links()を使用してページネーションを表示します。totalオプションには$wp_query->max_num_pagesを設定して、正しくページネーションが機能するようにしています。
