• 最終更新日:

【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 );
      if($myposts ) : foreach( $myposts  as $post ) : setup_postdata($post);

      //--------ここから繰り返し---------- 
      ?>

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

      <?php endforeach; //------------繰り返しここまで---------- 
      ?>

      <?php else : //記事が無い場合 
      ?>
      <div class="result">
          <p>記事がまだありません</p>
      </div>

      <?php //-----------get_posts終了----------
             wp_reset_postdata();
      endif; ?>

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

WP Queryのメソッドやプロパティは以下を参考にしてみてください。

ページネーションを出力させるには?

固定ページにカスタム投稿一覧表示させて、かつページネーションも出力したい場合は以下のコードをfunctions.phpにコピペします。

<?php 
/**
 * ページネーションの実装
*/

function pagination( $max_num_pages=0 ) {
    $max_num_pages = $max_num_pages ? (int)$max_num_pages : $GLOBALS['wp_query']->max_num_pages;
    if ( $max_num_pages < 2 ) {
        return;
    }
    $paged        = get_query_var( 'paged' ) ? intval( get_query_var( 'paged' ) ) : 1;
    $pagenum_link = html_entity_decode( get_pagenum_link() );
    $query_args   = array();
    $url_parts    = explode( '?', $pagenum_link );
     if ( isset( $url_parts[1] ) ) {
        wp_parse_str( $url_parts[1], $query_args );
    }
    $pagenum_link = remove_query_arg( array_keys( $query_args ), $pagenum_link );
    $pagenum_link = trailingslashit( $pagenum_link ) . '%_%';
    $format  = $GLOBALS['wp_rewrite']->using_index_permalinks() && ! strpos( $pagenum_link, 'index.php' ) ? 'index.php/' : '';
    $format .= $GLOBALS['wp_rewrite']->using_permalinks() ? user_trailingslashit( 'page/%#%', 'paged' ) : '?paged=%#%';
    
    $links = paginate_links( array(
        'base'     => $pagenum_link,
        'format'   => $format,
        'total'    => $max_num_pages,
        'current'  => $paged,
        'mid_size' => 2,
        'type' => 'list',  //リストとしてマークアップ
        'add_args' => array_map( 'urlencode', $query_args ),
        'prev_next'    => true,
        'prev_text' => __( '' ),
        'next_text' => __( '' ),
    ) );
if ( $links ) :
     ?>
    <nav class="navigation" role="navigation">
        <div class="pagination">
            <?php echo $links; ?>
        </div>
    </nav>
    <?php
    endif;
}

次に出力させたいテンプレートに以下をコピペします。(例:page.php、front-page.php)

<?php
   if ( function_exists( 'pagination' ) ) :
      pagination( $the_query->max_num_pages, $paged );
   endif; 
?>

そうすると以下のように出力できます。

<nav class="navigation" role="navigation">
  <div class="pagination">
    <ul class='page-numbers'>
	    <li><span aria-current='page' class='page-numbers current'>1</span></li>
	    <li><a class='page-numbers' href='https://test.wp/blog/page/2/'>2</a></li>
	    <li><a class='page-numbers' href='https://test.wp/blog/page/3/'>3</a></li>
	    <li><a class="next page-numbers" href="https://test.wp/blog/page/2/"></a></li>
    </ul>
  </div>
</nav>

さいごに

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

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