BLOG ブログ

ホームページ制作
BLOG
【WordPressカスタム投稿】記事一覧・詳細を実装してみよう（後編）

【WordPressカスタム投稿】記事一覧・詳細を実装してみよう（後編）

更新日：2021/04/13

WordPressに慣れていないと投稿をカスタマイズするので大変なのに、カスタム投稿タイプだとさらに大変ですし、混乱します。

おおまかな構築の流れさえ理解していれば、似たようなことをやっていることに気づきます。
その構築の流れをざっくり紹介していきます。

前回は、カスタム投稿タイプ・カスタムタクソノミーの作成、詳細ページの構築について紹介しました。

【WordPressカスタム投稿】記事一覧・詳細を実装してみよう（前編）

今回は後編として、カスタム投稿タイプの一覧ページ + α（タクソノミー一覧、トップへの表示など）解説してます。

1 テンプレートファイルの配置場所
2 一覧ページの実装
- 2.1 ループについて
- 2.2 コードの解説
3 ページネーションの実装
- 3.1 コードの解説
4 ターム一覧を表示
- 4.1 コードの解説
5 ターム一覧ページの実装
6 トップページにカスタム投稿タイプを〇件出力
- 6.1 コードの解説
7 まとめ

テンプレートファイルの配置場所

これからいくつかテンプレートファイルを作成していきます。
テンプレートファイルは、WordPressのページを生成するために使われるPHPファイルです。
HTML、PHP、そして WordPressテンプレートタグで構成されています。

ヘッダーやフッターなど共通化できる部分は、そこだけを記述したテンプレートファイルを作成します。このような共通したパーツをテンプレートパーツと呼びます。
テンプレートパーツの具体例としてheader.phpやfooter.phpが挙げられます。

作成するテンプレートファイルの配置する場所を図で示しました。
作成する場所を間違えないように気を付けて下さい。

一覧ページの実装

一覧ページはターム一覧の表示、ページネーションなど詰まるポイントがたくさんあるなと思っています。
ひとまず、記事の一覧を表示させていきましょう。
テンプレートはarchive-カスタム投稿タイプ名.phpです。今回だとarchive-news.phpになります。


<?php

get_header(); ?>

  <div class="page-news">
  <main class="news-archive">

    <?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post();

        $thumbnail = ( has_post_thumbnail() ) ? get_the_post_thumbnail_url( get_the_ID(), 'medium' ) : 'https://placehold.jp/150x150.png';
      ?>

    <article class="news-item">
      <a href="<?php the_permalink(); ?>" class="news-item__inner">
        <div class="news-item__media js-img-bg">
          <img src="<?php print $thumbnail; ?>" alt="">
        </div>
        <div class="news-item__body">
          <h2 class="news-item__title"><?php the_title(); ?></h2>
          <time datetime="the_time( 'Y-m-d' )"><?php the_time( 'Y.m.d' ); ?></time>
          <p class="news-item__text"><?php print mb_strimwidth( strip_tags( get_the_content() ), 0, 200, "…", "UTF-8" ); ?></p>
        </div>
      </a>
    </article>

    <?php endwhile; ?>

    <?php else : ?>
    何も投稿がありません。
    <?php endif; ?>

  </main>

</div>

  <?php get_footer(); ?>

<?php

get_header(); ?>

<?php if ( have_posts() ) : ?>

<?php while ( have_posts() ) : the_post();

$thumbnail = ( has_post_thumbnail() ) ? get_the_post_thumbnail_url( get_the_ID(), 'medium' ) : 'https://placehold.jp/150x150.png';

<a href="<?php the_permalink(); ?>" class="news-item__inner">

</div>

</div>

</a>

</article>

<?php endwhile; ?>

<?php else : ?>

何も投稿がありません。

<?php endif; ?>

</main>

</div>

<?php get_footer(); ?>

その後、管理画面の左のメニュー「お知らせ」をクリックし、投稿一覧を表示をクリックすると

このように表示されると思います。

コードを解説する前に、ループについて話します。

ループについて

WordPressでは、以下の形が頻出します。



  <?php if ( have_posts() ) : ?>

  <?php while ( have_posts() ) : the_post(); ?>

  <?php endwhile; ?>

  <?php endif; ?>

<?php if ( have_posts() ) : ?>

<?php while ( have_posts() ) : the_post(); ?>

<?php endwhile; ?>

<?php endif; ?>

ページに投稿を表示するための部分で、ループと言います。
ループにはメインループとサブループがあって、ここではメインループが行われています。

仮に、「http://example.jp/news/」というURLを見たいとします。
静的ページだと、サーバーにあるnewsディレクトリのindex.htmlを読み込みます。

それに対してWordPressは、

①リクエストされたURLを元に、データベースに投稿データの取得を要求し、取得する（メインクエリ）
②メインクエリをグローバル変数$wp_queryに格納
③テンプレート階層に従って、テンプレートが選択される
④テンプレート内でループが実行され、記事が出力される

のような流れでページが表示されています。

これがURLリクエストされると自動的に行われています。このメインクエリによるループがメインループです。

メインクエリの表示順や、特定の投稿を除外するにはクエリの条件を変更する必要があります。
pre_get_posts()というアクションフックを使って、投稿を取得する前にクエリ条件を変更することができます。

例えば、管理画面の設定 > 表示設定で1ページに表示する最大投稿数が10件になっているけど、特定のカスタム投稿タイプでは20件まで表示したい場合


add_action('pre_get_posts', 'my_pre_get_posts');

function my_pre_get_posts($query) {
if (!is_admin() && $query->is_main_query() && is_post_type_archive('カスタム投稿タイプ名')) {
  $query->set('posts_per_page', 20);
  }
}

add_action('pre_get_posts', 'my_pre_get_posts');

function my_pre_get_posts($query) {

if (!is_admin() && $query->is_main_query() && is_post_type_archive('カスタム投稿タイプ名')) {

$query->set('posts_per_page', 20);

}

とfunctions.phpに記述することで一覧ページが最大20件まで表示することができます。
ほかにも投稿の古い順に表示するなど指定することができます。

複雑な条件の場合やリクエストしたURLに依らない投稿の情報を取得したい場合は、自分で条件を指定して、ベータベースに要求して取得します。これをサブクエリといい、サブクエリを出力するループをサブループといいます。

コードの解説

今回はお知らせ一覧を取得したいだけなのでメインクエリを回してます。
記事の表示のさせ方は詳細ページとほぼ同じなので、省略しますね。

アイキャッチ画像表示するコードは少し解説します。



$thumbnail = ( has_post_thumbnail() ) ? get_the_post_thumbnail_url( get_the_ID(), 'medium' ) : 'https://placehold.jp/150x150.png';

$thumbnail = ( has_post_thumbnail() ) ? get_the_post_thumbnail_url( get_the_ID(), 'medium' ) : 'https://placehold.jp/150x150.png';

こちらのコードですね。has_post_thumbnail()でアイキャッチが設定されているか判定して、設定されていたらget_the_post_thumbnail_url()でアイキャッチ画像のURLを文字列として取得しています。設定されていない場合は、ダミー画像が表示されるようにしました。


get_the_post_thumbnail_url( $post, $size);

// $post : 投稿IDまたはWP_Postオブジェクト
// $size : ソースを取得するための登録済み画像サイズ

get_the_post_thumbnail_url( $post, $size);

// $post : 投稿IDまたはWP_Postオブジェクト

// $size : ソースを取得するための登録済み画像サイズ

$sizeを指定するとそのサイズの画像URLが取得できます。画像の大きさと$sizeの大きさが違うともともとの画像のURLが取得されます。

get_the_post_thumbnail_url()

アイキャッチが設定されていない場合、画像自体を表示させないのかダミー画像を表示させるか確認した方がいいです。ダミー画像を表示させる場合は、デザイナーの人に作成を依頼する必要があります。

ページネーションの実装

このままだと、1ページに表示する最大投稿数より多く投稿すると記事が見えなくなってしまいます。
なのでページネーションを実装しましょう。

archive-news.phpに記述してもいいのですが、見やすさのためテンプレートパーツに分割しています。
archive-news.phpに以下のようにコードを追加します。


<?php

get_header(); ?>

  <div class="page-news">
  <main class="news-archive">

    <?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post();

        $thumbnail = ( has_post_thumbnail() ) ? get_the_post_thumbnail_url( get_the_ID(), 'medium' ) : 'https://placehold.jp/150x150.png';
      ?>

    <article class="news-item">
      <a href="<?php the_permalink(); ?>" class="news-item__inner">
        <div class="news-item__media js-img-bg">
          <img src="<?php print $thumbnail; ?>" alt="">
        </div>
        <div class="news-item__body">
          <h2 class="news-item__title"><?php the_title(); ?></h2>
          <time datetime="the_time( 'Y-m-d' )"><?php the_time( 'Y.m.d' ); ?></time>
          <p class="news-item__text"><?php print mb_strimwidth( strip_tags( get_the_content() ), 0, 200, "…", "UTF-8" ); ?></p>
        </div>
      </a>
    </article>

    <?php endwhile; ?>

    // 追加した部分
    <?php
      set_query_var( 'paging_query', $wp_query );
      get_template_part( 'paging' );
     ?>
    // 追加した部分終わり

    <?php else : ?>
    何も投稿がありません。
    <?php endif; ?>

  </main>

</div>

  <?php get_footer(); ?>

<?php

get_header(); ?>

<?php if ( have_posts() ) : ?>

<?php while ( have_posts() ) : the_post();

$thumbnail = ( has_post_thumbnail() ) ? get_the_post_thumbnail_url( get_the_ID(), 'medium' ) : 'https://placehold.jp/150x150.png';

<a href="<?php the_permalink(); ?>" class="news-item__inner">

</div>

</div>

</a>

</article>

<?php endwhile; ?>

// 追加した部分

<?php

set_query_var( 'paging_query', $wp_query );

get_template_part( 'paging' );

// 追加した部分終わり

<?php else : ?>

何も投稿がありません。

<?php endif; ?>

</main>

</div>

<?php get_footer(); ?>

ページネーションはテンプレートパーツのpaging.phpに以下のように記述します。



<?php

global $wp_rewrite;
$paginate_base = get_pagenum_link( 1 );
if ( strpos( $paginate_base, '?' ) || !$wp_rewrite->using_permalinks() ) {
  $paginate_format = '';
  $paginate_base = add_query_arg( 'paged', '%#%' );
} else {
  $paginate_format = ( substr( $paginate_base, -1, 1 ) == '/' ? '' : '/' ) . user_trailingslashit( 'page/%#%/', 'paged' );
  $paginate_base .= '%_%';
}
$page_links = paginate_links( array(
  'base' => $paginate_base, //ページネーションのベースのURLを指定。初期値: '%_%'
  'format' => $paginate_format, // ページネーションの構造の指定。初期値: '?page=%#%'
  'total' => $paging_query->max_num_pages, // 全体のページ数。初期値: 1
  'end_size' => 1, // ページ番号の両端にいくつの数字を表示するか。初期値: 1
  'mid_size' => 2, // 現在のページの両端にいくつ数字を表示するか。（現在のページは含まない）初期値: 2
  'current' => ( $paged ? $paged : 1 ), // 現在のページ番号。初期値: 0
  'prev_text' => '前へ', // 前のページへのリンクに表示するテキスト。初期値: '&laquo; Previous'
  'next_text' => '次へ', // 次のページへのリンクに表示するテキスト。初期値: 'Next &raquo;'
) );

if ( strcmp( $page_links, "" ) != 0 ) : ?>

  <div class="paging-area">
    <?php print $page_links; ?>
  </div><!-- /paging-area -->

  <?php endif; ?>

<?php

global $wp_rewrite;

$paginate_base = get_pagenum_link( 1 );

if ( strpos( $paginate_base, '?' ) || !$wp_rewrite->using_permalinks() ) {

$paginate_format = '';

$paginate_base = add_query_arg( 'paged', '%#%' );

} else {

$paginate_format = ( substr( $paginate_base, -1, 1 ) == '/' ? '' : '/' ) . user_trailingslashit( 'page/%#%/', 'paged' );

$paginate_base .= '%_%';

}

$page_links = paginate_links( array(

'base' => $paginate_base, //ページネーションのベースのURLを指定。初期値: '%_%'

'format' => $paginate_format, // ページネーションの構造の指定。初期値: '?page=%#%'

'total' => $paging_query->max_num_pages, // 全体のページ数。初期値: 1

'end_size' => 1, // ページ番号の両端にいくつの数字を表示するか。初期値: 1

'mid_size' => 2, // 現在のページの両端にいくつ数字を表示するか。（現在のページは含まない）初期値: 2

'current' => ( $paged ? $paged : 1 ), // 現在のページ番号。初期値: 0

'prev_text' => '前へ', // 前のページへのリンクに表示するテキスト。初期値: '« Previous'

'next_text' => '次へ', // 次のページへのリンクに表示するテキスト。初期値: 'Next »'

) );

if ( strcmp( $page_links, "" ) != 0 ) : ?>

<?php print $page_links; ?>

</div>

<?php endif; ?>

するとページネーションが記事一覧の下に表示されていると思います。

クリックすると遷移します。
2ページ目以降が表示されず404ページになる場合は、管理画面の設定 > パーマリンク設定で何も変更せずに変更を保存ボタンを押してください。

すると表示されたりします。

あとはサブループで以下のように取得して表示させた場合、


<?php
  $news_args = array(
  'post_type' => array('news'),
  'post_status' => 'publish',
  'posts_per_page' => 6,
  'paged' => $paged,
  );
  $news_query = new WP_Query($news_args);
?>

<?php

$news_args = array(

'post_type' => array('news'),

'post_status' => 'publish',

'posts_per_page' => 6,

'paged' => $paged,

);

$news_query = new WP_Query($news_args);

posts_per_pageで1ページに何件表示するか指定しています。
その件数が
・functions.phpで指定した最大投稿数の数
・（functions.phpで指定していない場合）管理画面の設定 > 表示設定で1ページに表示する最大投稿数
よりも小さい場合、後の方のページが表示されないことがあります。
サブループで取得して、2ページ以降が表示されないという場合は見直してみてください。

コードの解説

テンプレートパーツを読み込んでページネーションを表示しました。
テンプレートパーツはテンプレートの変数にアクセスできないので、読み込む前にset_query_var()で渡したい値をメインクエリの指定したクエリ変数の値にセットしています。要は別のテンプレートでも使えるようにグローバルな値にしているのですね。
今回は$wp_queryの値を持つ「paging_query」というグローバル変数をセットしています。

別のテンプレートに値を渡す方法がこれしかなかったのですが、WordPress5.5からテンプレートに引数を渡すことが可能になったみたいです。

Passing arguments to template files in WordPress 5.5


get_template_part( $slug );

get_template_part( $slug, $name );

// $slug : 一般テンプレートのスラッグ名
// $name : 特定テンプレートの名前

// get_template_part( 'nav' )→nav.phpを呼び出す
// get_template_part( 'nav', 'single' )→nav-single.phpを呼び出す

get_template_part( $slug );

get_template_part( $slug, $name );

// $slug : 一般テンプレートのスラッグ名

// $name : 特定テンプレートの名前

// get_template_part( 'nav' )→nav.phpを呼び出す

// get_template_part( 'nav', 'single' )→nav-single.phpを呼び出す

関数リファレンス/get template part


set_query_var( $var, $value );

// $var : クエリ変数を指定するキー
// $value : クエリ変数にセットする値

set_query_var( $var, $value );

// $var : クエリ変数を指定するキー

// $value : クエリ変数にセットする値

関数リファレンス/set query var

paging.phpで実行しているpaginate_links()でページネーションを取得して、表示してます。


paginate_links( $args );

// $args : 配列

paginate_links( $args );

// $args : 配列

$argsにページネーションの設定を色々指定しています。
詳しくはこちらをどうぞ。

関数リファレンス/paginate links

ページネーションは以下のようなHTML構造で出力されます。


<div class="paging-area">
  <a class="prev page-numbers" href="生成されたリンク">前へ</a>
  <a class="page-numbers" href="生成されたリンク">1</a>
  <a class="page-numbers" href="生成されたリンク">2</a>
  <span class="page-numbers current">3</span>
  <a class="page-numbers" href="生成されたリンク">4</a>
  <a class="next page-numbers" href="生成されたリンク">次へ</a>
</div><!-- /paging-area -->

</div>

静的コーディングの段階から、出力されるタグにスタイルが当たるようにしておきたいです。

また、ページネーションを取得する前に下記の記述がありました。


global $wp_rewrite;
$paginate_base = get_pagenum_link( 1 );
if ( strpos( $paginate_base, '?' ) || !$wp_rewrite->using_permalinks() ) {
  $paginate_format = '';
  $paginate_base = add_query_arg( 'paged', '%#%' );
} else {
  $paginate_format = ( substr( $paginate_base, -1, 1 ) == '/' ? '' : '/' ) .  user_trailingslashit( 'page/%#%/', 'paged' );
  $paginate_base .= '%_%';
}

global $wp_rewrite;

$paginate_base = get_pagenum_link( 1 );

if ( strpos( $paginate_base, '?' ) || !$wp_rewrite->using_permalinks() ) {

$paginate_format = '';

$paginate_base = add_query_arg( 'paged', '%#%' );

} else {

$paginate_format = ( substr( $paginate_base, -1, 1 ) == '/' ? '' : '/' ) . user_trailingslashit( 'page/%#%/', 'paged' );

$paginate_base .= '%_%';

}

これはざっくり説明すると、ページネーションのURLの形を

・http://example.jp/news/?paged=2
・http://example.jp/news/page/2/

のどちらの形にするかページネーションのURLから判定して、その形に沿うように出力するようにしています。

ターム一覧を表示

投稿にカテゴリーをつけることができますよね。
右側の空間に、投稿に紐付いているタクソノミー「tax_news」のターム一覧を表示させようと思います。
これもテンプレートパーツに書くので、archive-news.phpで呼び出していきます。


<?php

get_header(); ?>

  <div class="page-news">
  <main class="news-archive">

    <?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post();

      $thumbnail = ( has_post_thumbnail() ) ? get_the_post_thumbnail_url( get_the_ID(), 'medium' ) : 'https://placehold.jp/150x150.png';
      ?>

    <article class="news-item">
      <a href="<?php the_permalink(); ?>" class="news-item__inner">
        <div class="news-item__media js-img-bg">
          <img src="<?php print $thumbnail; ?>" alt="">
        </div>
        <div class="news-item__body">
          <h2 class="news-item__title"><?php the_title(); ?></h2>
          <time datetime="the_time( 'Y-m-d' )"><?php the_time( 'Y.m.d' ); ?></time>
          <p class="news-item__text"><?php print mb_strimwidth( strip_tags( get_the_content() ), 0, 200, "…", "UTF-8" ); ?></p>
        </div>
      </a>
    </article>

    <?php endwhile; ?>

    <?php
      set_query_var( 'paging_query', $wp_query );
      get_template_part( 'paging' );
      ?>

    <?php else : ?>
    何も投稿がありません。
    <?php endif; ?>

  </main>

  // 追加した部分
    <?php get_sidebar( 'news' ); ?>
    // 追加した部分終わり

</div>

  <?php get_footer(); ?>

<?php

get_header(); ?>

<?php if ( have_posts() ) : ?>

<?php while ( have_posts() ) : the_post();

$thumbnail = ( has_post_thumbnail() ) ? get_the_post_thumbnail_url( get_the_ID(), 'medium' ) : 'https://placehold.jp/150x150.png';

<a href="<?php the_permalink(); ?>" class="news-item__inner">

</div>

</div>

</a>

</article>

<?php endwhile; ?>

<?php

set_query_var( 'paging_query', $wp_query );

get_template_part( 'paging' );

<?php else : ?>

何も投稿がありません。

<?php endif; ?>

</main>

// 追加した部分

<?php get_sidebar( 'news' ); ?>

// 追加した部分終わり

</div>

<?php get_footer(); ?>

今回は独自のテンプレートパーツを作成せずに、sidebar.phpから派生したsidebar-news.phpを作って以下のように記述しました。


<?php $terms = get_terms( 'tax_news' ); ?>

  <aside class="news-sidebar">
  <?php if ( !empty( $terms ) ) : ?>
    <h2 class="ttl">カテゴリー</h2>
    <ul class="category-list">
      <?php foreach ( $terms as $term ) : ?>
      <li>
          <a href="<?php print get_term_link( $term ); ?>">
            <?php print $term->name; ?>
          </a>
        </li>
      <?php endforeach; ?>
    </ul>
    <?php endif; ?>
</aside>

<?php $terms = get_terms( 'tax_news' ); ?>

<?php if ( !empty( $terms ) ) : ?>

<h2 class="ttl">カテゴリー</h2>

<?php foreach ( $terms as $term ) : ?>

<li>

<?php print $term->name; ?>

</a>

</li>

<?php endforeach; ?>

</ul>

<?php endif; ?>

</aside>

投稿にタームを指定すると、上の画像のように表示されると思います。

コードの解説

get_header()、get_footer()と同じような感じでget_sidebar()でテーマディレクトリ内のsidebar.phpを読み込むことができます。
引数を指定することで、sidebar-引数名.phpを読み込もうとします。

でsidebar-news.php内でget_terms()でタクソノミーのリストを取得しています。