WordPressで現在カテゴリーに属する投稿を一覧表示する方法

WordPress

今回はWordPress(ワードプレス)のテーマ作成で現在開いているページのカテゴリー(タクソノミー)と同じ別の記事を一覧表示させる方法を紹介します。よく関連記事や、カテゴリーアーカイブなどで利用される技です。【コピペOK】

個人的にかなり苦労した部分だったので自分用のメモとしてですが、公開します。

現在のカテゴリーに属する一覧を表示する方法

まずは「category.php」というファイルを新しく作成して下さい。WordPressこれだけで、カテゴリーに関するページだと認識してくれます。

そのphpファイルに以下のコードをペーストして下さい。

<! – カテゴリーの説明があれば表示 -->
<?php
if(category_description()):
echo category_description();
endif;
?>

<! – パンくずリンク -->
<?php
$tax_slug = 'category';
$id = get_query_var('cat');
$term = get_term($id,$tax_slug);
?>
<ul class="breadcrumb">
<li><a href="<?php echo home_url('/') ?>">ホーム</a></li>
<?php
$parent_term_id = $term->parent;
$parent_term = get_category($parent_term_id);
if($parent_term_id):
?>
<li> > <a href="/category<?php echo '/'.$parent_term->slug ?>"><?php echo $parent_term->name ?></a></li>
<?php endif; ?>
<li> > <a href="/category<?php echo '/'.$term->slug; ?>"><?php echo $term->name; ?></a></li>
</ul>

<! – ここからカテゴリ内記事一覧取得 -->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<! – サムネイル -->
<?php if ( has_post_thumbnail() ): ?>
<?php echo the_post_thumbnail(); ?>
<?php else: ?>
<img src="ここに代替画像のURL">
<?php endif; ?>

<! – タイトル -->
<?php the_title(); ?>

<! – 抜粋 -->
<?php the_excerpt() ?>

<! – 日時 -->
<?php the_time()  ?>

<! – 記事がない場合 -->
<?php endwhile; else : ?>
<p>まだ記事がありません</p>
<?php endif; ?>

<! – ページネーション-->
<div class="pagination">
    <?php global $wp_rewrite;
    $paginate_base = get_pagenum_link(1);
    if(strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()){
        $paginate_format = '';
        $paginate_base = add_query_arg('paged','%#%');
    }
    else{
        $paginate_format = (substr($paginate_base,-1,1) == '/' ? '' : '/') .
        user_trailingslashit('page/%#%/','paged');;
        $paginate_base .= '%_%';
    }
    echo paginate_links(array(
        'base' => $paginate_base,
        'format' => $paginate_format,
        'total' => $wp_query->max_num_pages,
        'mid_size' => 4,
        'current' => ($paged ? $paged : 1),
        'prev_text' => '« 前へ',
        'next_text' => '次へ »',
    )); ?>

パンくずリンクの作成で表示されない場合は「get_query_var」とかで調べれば出てきます。

実際に記事を取得し始めているのは26行目からです。48行目まで記事を取得しています。その部分の項目は任意で編集して下さい。50行目からはページネーションを追加しています。ページ内の記事数の調整は以下のWordPressの管理画面から行って下さい。

タグの一覧を表示させたい場合は「tag.php」を作成してそのファイルに先程のコードを使って下さい。そのコードの10行目と11行目を「post_tag」と「tag_id」とタグのデータに変更するだけです。カスタム投稿タイプの場合も同じです。

<?php
$tax_slug = 'post_tag';
$id = get_query_var('tag_id');
$term = get_term($id,$tax_slug);
?>

ファイルはこんな感じで作成しています。

このようなカテゴリー、タグ、カスタム投稿で追加したもの、などのジャンル?分類?みたいのを「タクソノミー」と呼ぶので覚えておきましょう。

関連記事を表示させたい場合

上記の同じタクソノミーを一覧表示させる方法を知れれば関連記事みたいなものを作成出来る様になります。先程のコードとは違った形ですが、基礎的な考え方は同じです。つまり応用です。

関連記事を作成する場合は、WordPressの「投稿」から作成した場合は「single.php」に以下のコードをペーストして下さい。

<! – 関連 -->

<?php

//現在の投稿IDからカテゴリーを取得する
$categories = get_the_category($post->ID);

//カテゴリーIDを代入する配列を定義する
$category_id = array();

foreach($categories as $category):
    //現在の投稿が持っているカテゴリーIDを配列に格納
    array_push($category_id, $category->cat_ID);
endforeach ;

$args = array(
    'post__not_in' => array($post->ID),  //現在の投稿を関連記事から除外する
    'posts_per_page'=> 5,                //関連記事に表示する投稿するを指定
    'category__in' => $category_id,      //カテゴリーIDの配列を指定
    'orderby' => 'rand',                 //ソートをランダムに指定
);
$query = new WP_Query($args);

//ここから関連記事を出力するループ処理
//前項で作成したHTMLに組み込んでいきましょう!

if( $query->have_posts() ):
    while ($query->have_posts()) : $query->the_post();
        ?>

        <a class="related-post" href="<?php echo get_permalink(); ?>">
        
            <?php
            //アイキャッチ画像
            if ( has_post_thumbnail() ):
                //記事に設定されているアイキャッチ画像を表示
                the_post_thumbnail('thumbnail');

            else:
                //アイキャッチ画像がない場合に表示する画像
                echo 'No Image';
            endif;
            
            
            //記事タイトル ?>
            <h3><?php echo  get_the_title(); ?></h3>
            
            <?php
            //他に関連記事で使用できそうな項目
            //パーマリンク
            echo get_permalink();

            //タイトル
            echo get_the_title();

            //所属するカテゴリー名
            foreach($categories as $category):
                echo $category->name;
            endforeach;

            //投稿日
            echo get_the_date();

            //抜粋
            the_excerpt();
            
            ?>
        </a>
    <?php
    endwhile;
else:
    echo '記事はありませんでした';
endif;
wp_reset_postdata();

?>

カスタム投稿を使って関連記事を表示させたい場合は次の記事で紹介します。


「WordPressで現在カテゴリーに属する投稿を一覧表示する方法」でした。

難しい!!けど便利。

2021年1月24日WordPressphp,WP

Posted by KT