WordPressでは、固定ページにブログ全記事一覧やカテゴリ別記事、カスタム投稿タイプ別の記事一覧などさまざまポストタイプの記事一覧を表示することができます。もちろん複数のポストタイプを1ページ内で表示させる事も可能です。
よくあるケースとしては、1ページ内に色々なタイプの記事一覧を表示させるというもの。特にサイトトップを固定ページで作成した際に必要な場合が多いですね。
そこで今回は、WordPressで作成した複数投稿タイプの記事一覧を1ページ内で表示させる方法についてご紹介します。
WordPress記事一覧を固定ページに表示させる
WordPress記事一覧を固定ページに表示させる方法としては、index.php
やcategory.php
、tag.php
などアーカイブ用のテンプレートを作成すれば記事一覧を表示させることができます。
また、カスタム投稿タイプ記事一覧はarchive-slug.php
、タクソノミー記事一覧はtaxonomy-slug.php
といったテンプレートを用意することで、それぞれのコンテンツに合わせた記事一覧ページを作成する事も可能です。
ただ、先述したように、サイトトップなどの固定ページで記事一覧を表示させたいケースというのも需要があり、実際の制作でもコーポレートサイトなどで多用することが多いものであったりします。
WordPressでは、固定ページ用にテンプレートを用意して下記をマークアップすることにより、好きな場所に記事一覧を表示させることができます。
<?php
$wp_query = new WP_Query();
$my_posts = array(
'post_type' => 'post',
'posts_per_page'=> '6',
);
$wp_query->query( $my_posts );
if( $wp_query->have_posts() ): while( $wp_query->have_posts() ) : $wp_query->the_post();
?>
// ここにコンテンツ
<?php endwhile; endif; wp_reset_postdata(); ?>
上記では、ブログ全記事を6記事表示させることができます。
4行目の'post'
で、どの記事を表示させるか指定しています。
もしカスタム投稿タイプの記事一覧を表示させたい場合には、カスタム投稿タイプのスラッグにする事で指定した記事一覧が表示されます。たとえば、スラッグが『information』の記事一覧を表示させたい場合には、4行目を'post_type' => 'information',
にするだけです。
また、特定のカテゴリ記事一覧を表示させるには、下記のように記述します。
<?php
$wp_query = new WP_Query();
$my_posts = array(
'post_type' => 'post',
'category_name' => 'wordpress',
'posts_per_page'=> '6',
);
$wp_query->query( $my_posts );
if( $wp_query->have_posts() ): while( $wp_query->have_posts() ) : $wp_query->the_post();
?>
// ここにコンテンツ
<?php endwhile; endif; wp_reset_postdata(); ?>
5行目を追加して、カテゴリーのスラッグを指定します(上記では'wordpress'
の部分)。
と、このようにさまざまなタイプの記事一覧を表示させることができるのですが、1ページ内で複数の記事一覧を表示させる場合には、記述をちょっとだけ変更しないといけないのです。
WordPress固定ページに複数のポストタイプの記事一覧を表示させる
複数のポストタイプの記事一覧を固定ページ1ページ内に表示させるには、以下のようにします。
WordPressブログ全記事一覧
<?php
$wp_query = new WP_Query();
$my_posts01 = array(
'post_type' => 'post',
'posts_per_page'=> '6',
);
$wp_query->query( $my_posts01 );
if( $wp_query->have_posts() ): while( $wp_query->have_posts() ) : $wp_query->the_post();
?>
// ここにコンテンツ
<?php endwhile; endif; wp_reset_postdata(); ?>
カテゴリー記事一覧
<?php
$wp_query = new WP_Query();
$my_posts02 = array(
'post_type' => 'post',
'category_name' => 'wordpress',
'posts_per_page'=> '6',
);
$wp_query->query( $my_posts02 );
if( $wp_query->have_posts() ): while( $wp_query->have_posts() ) : $wp_query->the_post();
?>
// ここにコンテンツ
<?php endwhile; endif; wp_reset_postdata(); ?>
カスタム投稿タイプ記事一覧
<?php
$wp_query = new WP_Query();
$my_posts03 = array(
'post_type' => 'information',
'posts_per_page'=> '6',
);
$wp_query->query( $my_posts03 );
if( $wp_query->have_posts() ): while( $wp_query->have_posts() ) : $wp_query->the_post();
?>
// ここにコンテンツ
<?php endwhile; endif; wp_reset_postdata(); ?>
$my_posts
の部分を、$my_posts01
$my_posts02
$my_posts03
とそれぞれ別に指定する必要があります。ここでは見やすいように数字で分けておりますが、コンテンツに合わせてネーミングした方が後で編集する際に分かりやすいかと思います。
1ページ内で複数の記事一覧を表示させたい場合には、先述したように呼び出す値をそれぞれ分ける必要がありますので、この点は注意が必要です。
以前に私がハマったところでもあったのでご紹介してみました。よく利用することがあるので、備忘録的な記事でもあったりしますが…。まぁ、みなさんもトップページを制作していてうまく表示できない場合には、ここをチェックしてみてください。