• 作成日:

【WordPress】固定ページにカスタム投稿一覧を出力する方法

固定ページにカスタム投稿一覧を出力する方法

今回はカスタム投稿一覧を固定ページに出力する方法を説明します。固定ページの他にトップページにカスタム投稿から4記事だけ出力させたい場合などにも使えます。

固定ページにカスタム投稿一覧を出力する方法

まずはカスタム投稿・タスタム分類を作成しましょう。プラグインを使わずにfunctions.phpから作成します。すでに作成されている方は読み飛ばしてください。

カスタム投稿とカスタム分類を作成する

カスタム投稿名は「デモ用」、カスタム分類は「デモの種類」とします。functions.phpに以下のコードをコピペしましょう。

add_action('init', 'demo_init');
function demo_init(){
	  $labels = array(
	    'name' => _x('デモ用', 'post type general name'),
	    'singular_name' => _x('デモ用', 'post type singular name'),
	    'add_new' => _x('新規追加', 'demo'),
	    'add_new_item' => __('新しくデモページを追加する'),
	    'edit_item' => __('デモページを編集'),
	    'new_item' => __('新しいデモページ'),
	    'view_item' => __('デモページを見る'),
	    'search_items' => __('デモページを探す'),
	    'not_found' =>  __('デモページはありません'),
	    'not_found_in_trash' => __('ゴミ箱にデモページはありません'),
	    'parent_item_colon' => ''
	  );
	  $args = array(
	    'labels' => $labels,
	    'public' => true,
	    'publicly_queryable' => true,
	    'show_ui' => true,
	    'query_var' => true,
            'rewrite_withfront'=> true,
	    'rewrite' => true,
	    'capability_type' => 'post',
	    'hierarchical' => false,
	    'menu_position' => 5,
            'show_in_rest' => true, //カスタム投稿でgutenberg有効化する場合はtrue
	    'supports' => array('title','editor','thumbnail','page-attributes'),
	    'has_archive' => true,
     
	  );
	  register_post_type('demo',$args);
	
	/* カスタム分類を作成 - エリアの追加 */
	register_taxonomy(
		'demo_kind',
		'demo',
		array( 
		'hierarchical' => true, 
		'label' => 'デモの種類',
		'labels' => array(
    		'all_items' => 'デモページの種類一覧',
    		'add_new_item' => 'デモの種類を追加'
    	),
		'show_ui' => true,
		'query_var' => true,
		'rewrite' => true,
		'singular_label' => 'デモの種類'
		)
        /* カスタム分類の作成はここまで */ 
	);
    
}

 

管理画面上で以下のように表示されていればカスタム投稿とカスタム分類の作成は完了しています。

 

固定ページにカスタム投稿を出力する

それでは固定ページにカスタム投稿を出力させます。同じ日に2つ以上記事を投稿した場合でもすべて出力する設定をしています。

 <?php
          $paged = get_query_var('paged') ?: 1; //ページネーションを使いたいなら指定
          $args = array(
                  'paged' => $paged, //ページネーションを使いたいなら指定
                  'posts_per_page' => 3, //3記事のみ出力
                  'post_status' => 'publish', //公開の記事だけ
                  'post_type' => 'demo', //カスタム投稿slag
                  'orderby' => 'date', //日付を出力する基準
                   'order' => 'DESC' //表示する順番(逆はASC)
                            
          );
                            
          $the_query = new WP_Query( $args );
          if ( $the_query->have_posts() ) :
          ?>
                    
          <?php global $previousday; //この表記と$previousday = '';で同じ日付の投稿でも表示される
                while ( $the_query->have_posts() ) : $the_query->the_post();
                $previousday = '';
           // -------- ここから繰り返し---------- ?>

                    ここにループさせたい内容を書く

           <?php // -------- 繰り返しここまで-----------
                 endwhile; ?>
                    
           <?php // -------- WP_query終了-----------
                 wp_reset_postdata();      
            endif; ?>

 

 

出力する内容は一緒ですが、foreachを使った書き方もあります。

<?php
           global $post;
           $paged = get_query_var('paged') ?: 1; //ページネーションを使いたいなら指定
           $args = array( 
               'paged' => $paged, //ページネーションを使いたいなら指定
               'posts_per_page' => 3, //3記事のみ出力
               'post_status' => 'publish', //公開の記事だけ
               'post_type' => 'demo', //カスタム投稿slag
               'orderby' => 'date', //日付を出力する基準
               'order' => 'DESC' //表示する順番(逆はASC)
                       
           );
          $myposts = get_posts( $args );
                foreach( $myposts as $post ) {
           setup_postdata($post);
?>
// -------- ここから繰り返し----------

          ここにループさせたい内容を書く

<?php  // -------- 繰り返しここまで-----------
        }
     wp_reset_postdata();
?>


 

 

どちらのコードも固定ページであればpage.php、トップページであればfront-page.phpの出力させたい箇所に貼り付けて使ってください。ページネーションを出力させないのであれば「ページネーションを使いたいなら指定」のある2行は削除しても大丈夫です。消さなくとも特に影響はありません。

さいごに

今回はカスタム投稿一覧を固定ページで表示させる方法を説明しました。この出力方法をアレンジすればカスタム投稿の中から特定のカスタム分類(カスタムタクソノミー)だけを出力することも、除くこともできます。

カスタム投稿やカスタム分類が使えるようになるとサイト制作の幅も広がるので、ぜひ試してみてください。