カスタム投稿タイプから投稿した記事を一覧表示する方法

カスタム投稿タイプから投稿した、記事を一覧表示させる方法はたくさんあって戸惑います。

さらに、カスタム投稿のfnctionの状況で記載するコードが変わってくるので、サイトの情報通りに行ってもうまくいかないこともしばしば…

この記事では勉強中に感じた難しいと思うポイントを抑えながら解説して行こうと思います。

結論
1. 解説
functionを確認しながら具体的に当てはめてみる
1. ページを公開する
まとめ

結論

今回は一覧ページを固定ページとして作ってきます。

page-〇〇.phpファイルを作る
header/sidebar/footerなどのパーツを用意する
ループを記載する
テーマ内にアップする
wordpressの管理画面の『固定ページ』からページタイプを選択して公開する

手順は以上になります。

まずはpage-〇〇.phpファイルを制作していきましょう。

〇〇の部分は任意の名前にします。カスタム投稿をfunctionから制作する際に『register_post_type(‘custom’,$Supportcustom);』という部分がありますが、ここのurlとなる第一引数の部分に使用した名前が無難でしょう。

次に環境に合わせてheaderなどのパーツを設置し、メインとなるループを書いていきます。

以下のコードで表示させることができます。

<?php
  $paged = get_query_var('paged') ?: 1;
  $args = array(
    'post_type' => array('example'), // 取得する投稿タイプのスラッグ
    'orderby' => 'date', //日付で並び替え
    'order' => 'DESC', // 降順 or 昇順
    'paged' => $paged,//現在のページ。これがないとページネーションで次のページに移動しても同じ記事が表示される
    'posts_per_page' => 5,//表示するコンテンツ数
  );
  $the_query = new WP_Query( $args );
  //記事があるか無いかの判別
  if ( $the_query->have_posts()):
    while ( $the_query->have_posts() ) : $the_query->the_post();
    //表示させたいコンテンツをここに記載
    endwhile;
    :else:
      //表示させる記事が存在しない場合
      echo 'no_content';
  endif;
wp_reset_query();//クエリをリセット
?>

<?php

$paged = get_query_var('paged') ?: 1;

$args = array(

'post_type' => array('example'), // 取得する投稿タイプのスラッグ

'orderby' => 'date', //日付で並び替え

'order' => 'DESC', // 降順 or 昇順

'paged' => $paged,//現在のページ。これがないとページネーションで次のページに移動しても同じ記事が表示される

'posts_per_page' => 5,//表示するコンテンツ数

);

$the_query = new WP_Query( $args );

//記事があるか無いかの判別

if ( $the_query->have_posts()):

while ( $the_query->have_posts() ) : $the_query->the_post();

//表示させたいコンテンツをここに記載

endwhile;

:else:

//表示させる記事が存在しない場合

echo 'no_content';

endif;

wp_reset_query();//クエリをリセット

制作したファイルの頭に固定ページのテンプレートとして認識させるよう以下のコメントを残しておきます

/*
Template Name: テンプレートの名前
Template Post Type: page
*/

Template Name: テンプレートの名前

Template Post Type: page

テーマ内に制作したファイルをアップロードし、wordpress管理画面の『固定ページ』のページタイプからこちらを選択し、公開します。

これで完了です。

解説

解説は基本コメントの通りです。

$args = array(
  'post_type' => array('example'), // 取得する投稿タイプのスラッグ
  'orderby' => 'date', //日付で並び替え
  'order' => 'DESC', // 降順 or 昇順
  'paged' => $paged,//現在のページ。これがないとページネーションで次のページに移動しても同じ記事が表示される
  'posts_per_page' => 5,//表示するコンテンツ数
);

$args = array(

'post_type' => array('example'), // 取得する投稿タイプのスラッグ

'orderby' => 'date', //日付で並び替え

'order' => 'DESC', // 降順 or 昇順

'paged' => $paged,//現在のページ。これがないとページネーションで次のページに移動しても同じ記事が表示される

'posts_per_page' => 5,//表示するコンテンツ数

);

こちらで表示する記事を選定しています。

『example』の部分に表示したいカスタム投稿タイプの名前を入力します。

『,』カンマ区切りで複数設定することができます。例えば

array('example','past'),

1	array('example','past'),

とすれば投稿記事も表示することができます。

'orderby' => 'date', //日付で並び替え

1	'orderby' => 'date', //日付で並び替え

こちらで日付け順で並び替えます。

'order' => 'DESC', // 降順 or 昇順

1	'order' => 'DESC', // 降順 or 昇順

こちらで大きい順か小さい順で並び替えることができます。
DESCで大きい順、つまり、日付が新しい順です。ASCで小さい順つまり、日付けが古い順です。

'paged' => $paged,

1	'paged' => $paged,

こちらで何ページ目の記事を表示したいかを設定します。

例えば1ページに5つの記事を表示する設定になっていおり、カスタム投稿タイプから公開された記事が25記事存在するとすると、全部で5つのページが存在し、それらをページネーションで移動することとなります。

この場合、例えばページネーションで3ページ目に移動した際、11記事目〜15記事目を取得しなければなりませんが、このpagedが設定されていない場合、もしくは1など限定されている場合はずっと同じ記事を表示してしまうことになります。（ページを移動しても1記事目〜5記事目が表示される）

ですので、ページネーションに合わせてpagedの値を変更してあげないといけません。

$paged = get_query_var('paged') ?: 1;

1	$paged = get_query_var('paged') ?: 1;

上記のコードで現在のページを取得することができます。

'posts_per_page' => 5,//表示するコンテンツ数

1	'posts_per_page' => 5,//表示するコンテンツ数

1ページに表示する記事の数です。

これらをWP_Queryで設定しthe_queryに保存しループを回します。

if ( $the_query->have_posts()):

1	if ( $the_query->have_posts()):

もし、表示する記事があれば

while ( $the_query->have_posts() ) : $the_query->the_post();

1	while ( $the_query->have_posts() ) : $the_query->the_post();

その記事が存在する分ループを回す。

こちらのループの中でthe_permalinkやthe_titleを使ってコンテンツを取得し記事を表示していきます。

ちなみに$the_query->the_post()の部分はwhile文のカウントアップに相当します。

通常のwhile文を回す時i++しますよね。これと同じです。

ですので、この記載を忘れると永遠にループしますので気をつけて。

wp_reset_query();

1	wp_reset_query();

最後に必ずクエリをリセットします。

functionを確認しながら具体的に当てはめてみる

実際にwordpressに実装しなら具体的にした方がわかりやすりと思うので実施に実装して行こうと思います。

今回はわかりやすくするため、シンプルなテーマ『SANGO』を使っていきたいと思います。

デザインはアーカイブページと同じように一覧で表示したいのでarchive.phpの中身をみてみます。

archive.php

<?php get_header(); ?>
  <div id="content">
    <div id="inner-content" class="wrap cf">
      <main id="main" class="m-all t-2of3 d-5of7 cf" role="main">
        <?php 
          get_template_part('parts/archive/archive-header'); // ヘッダー
          get_template_part('parts/post-grid'); // 記事一覧
        ?>
      </main>
      <?php get_sidebar(); ?>
    </div>
  </div>
<?php get_footer(); ?>

<?php get_header(); ?>

<?php

get_template_part('parts/archive/archive-header'); // ヘッダー

get_template_part('parts/post-grid'); // 記事一覧

</main>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>

記事一覧はget_template_part(‘parts/post-grid’);こちらから表示しているようですので、次にこちらをみてみます。

post-grid.php

<?php
 /** 
  * 記事一覧表示は以下の2種類（カスタマイザーから設定）
  * 1）横長のタイプ
  * 2) 通常のカードタイプ
  */
  if (have_posts()){
  if( is_sidelong() ): // 1)横長
  ?>
    <div class="sidelong cf">
      <?php
        while (have_posts()) :
          the_post();
          sng_sidelong_card();
        endwhile;
      ?>
    </div>
<?php
  else : // 2)カードタイプ 
  ?>
    <div class="cardtype cf">
      <?php
        while (have_posts()) :
          the_post();
          sng_normal_card();
        endwhile;
      ?>
    </div>
<?php
  endif;
  sng_page_navi();
} else {
  // 記事なし
  get_template_part('content', 'not-found');
}
wp_reset_query();
?>

<?php

/**

* 記事一覧表示は以下の2種類（カスタマイザーから設定）

* 1）横長のタイプ

* 2) 通常のカードタイプ

if (have_posts()){

if( is_sidelong() ): // 1)横長

<?php

while (have_posts()) :

the_post();

sng_sidelong_card();

endwhile;

</div>

<?php

else : // 2)カードタイプ

<?php

while (have_posts()) :

the_post();

sng_normal_card();

endwhile;

</div>

<?php

endif;

sng_page_navi();

} else {

// 記事なし

get_template_part('content', 'not-found');

}

wp_reset_query();

構造は

表示する記事があるか確認
↓
横長型かカードタイプを選び、ループを回す
↓
ナビゲーションを表示
↓
記事がなかった時の処理
↓
クエリをリセット

となっていますね。

表示のさせかたに横長型と縦に2列型がありますが、今回は縦に2列型で表示させようと思います。

必要な部分だけを切り出してみました。

<?php
  if (have_posts()):
?>
    <div class="cardtype cf">
      <?php
        while (have_posts()) ://ループ
          the_post();
          sng_normal_card();//コンテンツ
        endwhile;
      ?>
    </div>
<?php
  sng_page_navi();//ページネーション
  :else:
    get_template_part('content', 'not-found');//記事がない場合に表示するコンテンツ
  endif;
  wp_reset_query();//クエリをリセット
?>

<?php

if (have_posts()):

<?php

while (have_posts()) ://ループ

the_post();

sng_normal_card();//コンテンツ

endwhile;

</div>

<?php

sng_page_navi();//ページネーション

:else:

get_template_part('content', 'not-found');//記事がない場合に表示するコンテンツ

endif;

wp_reset_query();//クエリをリセット

ここのループを今回紹介したコードに置き換えればカスタム投稿タイプから投稿した記事を表示することができます。

当てはめるとこうなります。

<div class="cardtype cf">
  <?php
    $paged = get_query_var('paged') ?: 1;
    $args = array(
      'post_type' => array('example'), // 取得する投稿タイプのスラッグ
      'orderby' => 'date', //日付で並び替え
      'order' => 'DESC', // 降順 or 昇順
      'paged' => $paged,//現在のページ。これがないとページネーションで次のページに移動しても同じ記事が表示される
      'posts_per_page' => 5,//表示するコンテンツ数
    );
    $the_query = new WP_Query( $args );
    if ( $the_query->have_posts()):
      while ( $the_query->have_posts() ) : $the_query->the_post();
      sng_normal_card();//コンテンツ
    endwhile;
  ?>
<div>
<?php
  sng_page_navi();//ページネーション
  :else:
    get_template_part('content', 'not-found');//記事がない場合に表示するコンテンツ
  endif;
  wp_reset_query();//クエリをリセット
?>

<?php

$paged = get_query_var('paged') ?: 1;

$args = array(

'post_type' => array('example'), // 取得する投稿タイプのスラッグ

'orderby' => 'date', //日付で並び替え

'order' => 'DESC', // 降順 or 昇順

'paged' => $paged,//現在のページ。これがないとページネーションで次のページに移動しても同じ記事が表示される

'posts_per_page' => 5,//表示するコンテンツ数

);

$the_query = new WP_Query( $args );

if ( $the_query->have_posts()):

while ( $the_query->have_posts() ) : $the_query->the_post();

sng_normal_card();//コンテンツ

endwhile;

<div>

<?php

sng_page_navi();//ページネーション

:else:

get_template_part('content', 'not-found');//記事がない場合に表示するコンテンツ

endif;

wp_reset_query();//クエリをリセット

そしてexampleの部分を表示させたいカスタム投稿タイプの名前に変更します。

カスタム投稿タイプの名前は作る時に書いたfunctionから確認できます。

カスタム投稿タイプの作り方は別記事の『カスタム投稿タイプを作る方法』で紹介しています。

https://trytrytry.work2020/04/26/hoe_to_custom_post/

こちらの記事では投稿名を『custom』としているので、exampleの部分をcustomに変更します。

そしてテンプレートと認識されるようにコメントを記載しておきます。

/*
Template Name: custom-post-theme
Template Post Type: page
*/

Template Name: custom-post-theme

Template Post Type: page

テンプレートの名前はカスタムポストテーマとでもしておきましょう。名前はなんでも大丈夫です。

Template Post Typeは今回は固定ページとして認識して欲しいのでpageとします。ちなみに、こちらをpostにすると投稿ページとして認識します。

完成！このファイルの名前をpage-custom.phpとでもしてサーバーにアップします。

ページを公開する

完成したファイルをサーバーにアップできたらwordpressの管理画面から固定ページとして公開します。

固定ページ→新規追加からタイトルを適当に決め、右サイドバーのページ属性→テンプレートからcustom-post-themeを選択し、公開します。

まとめ

手順

page-〇〇.phpファイルを作る
header/sidebar/footerなどのパーツを用意する
ループを記載する
テーマ内にアップする
wordpressの管理画面の『固定ページ』からページタイプを選択して公開する

コード↓

<?php
  $paged = get_query_var('paged') ?: 1;
  $args = array(
    'post_type' => array('example'), // 取得する投稿タイプのスラッグ
    'orderby' => 'date', //日付で並び替え
    'order' => 'DESC', // 降順 or 昇順
    'paged' => $paged,//現在のページ。これがないとページネーションで次のページに移動しても同じ記事が表示される
    'posts_per_page' => 5,//表示するコンテンツ数
  );
  $the_query = new WP_Query( $args );
  //記事があるか無いかの判別
  if ( $the_query->have_posts()):
    while ( $the_query->have_posts() ) : $the_query->the_post();
    //表示させたいコンテンツをここに記載
    endwhile;
    :else:
      //表示させる記事が存在しない場合
      echo 'no_content';
  endif;
wp_reset_query();//クエリをリセット
?>