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

Programming

今回は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で現在カテゴリーに属する投稿を一覧表示する方法」でした。

難しい!!けど便利。

この記事を書いた人
KEITO

AI × IT × WEB3|関東在住。本職はディレクター 。AIを活用してビジネス開拓。仕事の依頼はTwitterからお願いします。YouTube、Twitter、Instagramもお願い致します。

Programming
この記事を共有する
スポンサーリンク
スポンサーリンク
KT LIFE
スポンサーリンク

暗号資産投資するなら以下

Bybit

国内人気No.1!屈強なサーバー/信頼性抜群!トレーダー御用達の取引所。

通貨数338種以上
レバレッジ最大100倍
現物取引手数料Maker:0%〜0.1%
Taker:0.02%〜0.1%
先物取引手数料Maker:0%〜0.01%
Taker:0.03%〜0.06%
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり・JPY利用可
特典下記から登録で初回ボーナスあり
登録リンクBybitへの登録は こちら
招待コード22295
レビュー記事レビュー記事は こちら
BigBoss&CRYPTOS

最大レバレッジ1111倍・日本円換金ルート

通貨数BigBoss:15種以上
CRYPTOS:15種以上
レバレッジ最大1111倍
スポット手数料Maker:0.02%〜0.18%
Taker:0.05〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設少し敷居が高い
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクBigBossへの登録は こちら
招待コード6690951
レビュー記事レビュー記事は こちら
Nexo

高APYでのステーキング&レンディング

通貨数60種以上
レバレッジ
スポット手数料Maker:0.04%〜0.20%
Taker:0.03%〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクNexoへの登録は こちら
招待コード
レビュー記事レビュー記事は こちら

他おすすめ取引所はこちら

タイトルとURLをコピーしました