カテゴリとタグで関連付けて、ページに関連記事を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 );
?>
使用例で示した html 部分に使われている uk-grid
などのクラスは、UIkit という CSS フレームワークのグリッドを使っています。
UIkit
http://getuikit.com/
次に作成した関連記事テンプレート related-entries.php を使うために次の記述を single.php などの関連記事を表示させたい箇所に挿入します。