no-image

関連記事を表示させるサブクエリ(カテゴリとタグで関連付け)

カテゴリとタグで関連付けて、ページに関連記事を6件表示させてみます。

部品の作成

まず theme ディレクトリに template-parts ディレクトリを作り、related-entries.phpファイルを新規作成して以下のコードを記述します。

//
ID);
    $category_ID = array();
    foreach($categories as $category):
        if ($category->count >= 3) {
            array_push( $category_ID, $category -> cat_ID);
        } else { //該当カテゴリの記事数が3つ以上なければ、親カテゴリから関連記事を抽出
            array_push( $category_ID, $category -> category_parent);
        }
    endforeach;
    $args = array(
        'post__not_in' => array($post->ID),
        'posts_per_page'=> 3,
        'category__in' => $category_ID,
        'orderby' => 'rand',
    );
    $query_by_cat = new WP_Query($args);
    //タグ情報から関連記事をランダムに呼び出す
    $tags = wp_get_post_tags($post->ID);
    $tag_ids = array();
    foreach($tags as $tag):
      array_push( $tag_ids, $tag->term_id);
    endforeach ;
        //カテゴリで抽出した記事を除外指定
        $except_cat_posts = array($post->ID);
        $posts = $query_by_cat->get_posts();
        foreach($posts as $post): 
            array_push( $except_cat_posts, $post->ID);
        endforeach;
    $args = array(
        'post__not_in' => $except_cat_posts,
        'posts_per_page'=> 3,
        'tag__in' => $tag_ids,
        'orderby' => 'rand',
    );
    $query_by_tag = new WP_Query($args);
    //関連記事データの連結
    $query = new WP_Query();
    $query->posts = array_merge( $query_by_cat->posts, $query_by_tag->posts );
    $query->post_count = count( $query->posts );
    if( $query -> have_posts() ):
        while ($query -> have_posts()) : 
            $query -> the_post();
 ?>
            //ここに組み立てたい html を書く
    
        関連する記事はありません
       

ポイントは、WP_Query オブジェクトを生成してサブクエリを取得しているところです。

get_the_category($post->ID) や wp_get_post_tags($post->ID) を使って、投稿記事(メインクエリ)のカテゴリやタグを取得します。

そのカテゴリやタグ、取得したい記事数、取得方法(ランダム)などを配列 $args で指定して、配列を引数に WP_Query オブジェクトを生成します。

カテゴリの後の手順になるタグでの関連付けでは、配列の指定で ‘post__not_in’ のバリューにカテゴリから抽出した関連記事の ID の配列を設定することで、抽出記事の重複を防止しています。

カテゴリで関連付けた3件、タグで関連付けた3件のデータは、それぞれ別のインスタンスに格納していますが、最終的には array_merge() で関連記事データを連結させています。

部品の使い方

ソース中にある「ここに組み立てたい html を書く」という箇所で、the_permalink() や the_title() などの WordPress で用意されているテンプレートタグを使えば、関連記事を組み立てられます。

一人ひとりそれぞれのカスタマイズに合わせるために、敢えてここの部分は記述していません。参考として上記ソースを使った1つの例を示します。

使用例

//
ID);
    $category_ID = array();
    foreach($categories as $category):
        if ($category->count >= 3) {
            array_push( $category_ID, $category -> cat_ID);
        } else { //該当カテゴリの記事数が3つ以上なければ、親カテゴリから関連記事を抽出
            array_push( $category_ID, $category -> category_parent);
        }
    endforeach;
    $args = array(
        'post__not_in' => array($post -> ID),
        'posts_per_page'=> 3,
        'category__in' => $category_ID,
        'orderby' => 'rand',
    );
    $query_by_cat = new WP_Query($args);
    //タグ情報から関連記事をランダムに呼び出す
    $tags = wp_get_post_tags($post->ID);
    $tag_ids = array();
    foreach($tags as $tag):
      array_push( $tag_ids, $tag -> term_id);
    endforeach ;
        //カテゴリで抽出した記事を除外指定
        $except_cat_posts = array($post->ID);
        $posts = $query_by_cat->get_posts();
        foreach($posts as $post): 
            array_push( $except_cat_posts, $post->ID);
        endforeach;
    $args = array(
        'post__not_in' => $except_cat_posts,
        'posts_per_page'=> 3,
        'tag__in' => $tag_ids,
        'orderby' => 'rand',
    );
    $query_by_tag = new WP_Query($args);
    //関連記事データの連結
    $query = new WP_Query();
    $query->posts = array_merge( $query_by_cat->posts, $query_by_tag->posts );
    $query->post_count = count( $query->posts );
?>
    
have_posts() ): while ($query -> have_posts()) : $query -> the_post(); ?> 関連する記事はありません

使用例で示した html 部分に使われている uk-grid などのクラスは、UIkit という CSS フレームワークのグリッドを使っています。

UIkit
http://getuikit.com/

次に作成した関連記事テンプレート related-entries.php を使うために次の記述を single.php などの関連記事を表示させたい箇所に挿入します。

関連記事

PC での表示例

モバイルでの表示例