カスタム投稿タイプ一覧ページの作り方を紹介します。テンプレートファイル、アーカイブのURL、ループ構造のPHP記述例、ページネーションなど。
目次
テンプレートファイル
カスタム投稿タイプのアーカイブページのテンプレートファイルは下記のとおりです。
テンプレートファイル名
archive-$posttype.php
$posttypeにはカスタム投稿ページのスラッグが入ります。
例えば、カスタム投稿のスラッグがnewsの場合には、archive-news.phpとファイル名にします。
アーカイブページのURL
特定のカスタム投稿タイプのアーカイブへのリンクを出力したい場合は、下記のようにget_post_type_archive_link()関数の引数にカスタム投稿タイプのスラッグを入れてhref属性の中に下記にように書きます。
href="<?php echo esc_url(get_post_type_archive_link('カスタム投稿タイプのスラッグ')); ?>"例えば、カスタム投稿タイプのスラッグがnewsの時には下記のようになります。
href="<?php echo esc_url(get_post_type_archive_link('news')); ?>"関連情報
現在表示中のカスタム投稿タイプのページで、そのアーカイプページのURLを取得したい場合には、下記のように書けば投稿タイプのスラッグを自動的に取得することができます。
<?php get_post_type_archive_link(get_post_type())); ?>また、下記のようにトップページURLにカスタム投稿タイプのスラッグを付けてもアーカイプページのURLにすることができます。
href="<?php echo esc_url(home_url('/')); ?>カスタム投稿タイプのスラッグ"ページネーションを使う場合のfunctions.php設定
カスタム投稿タイプのアーカイブ（archive-$posttype.php）でページネーションを使いたい時は、下記のようにfunctions.phpの一筆書く必要があります。
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', １ページに載せる最大記事数); //１ページに載せる最大記事数
}
}たとえば、カスタム投稿タイプのスラッグがcustom01、１ページに載せる最大記事数が10ページの場合には下記のように書きます。
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('custom01')) {
$query->set('posts_per_page', 10); //１ページに載せる最大記事数
}
}注意事項
ページネーションの設定で下記のようにカスタム投稿タイプのアーカイブ（archive-$posttype.php）ファイル内でも最大投稿数を設定している場合には必ず、functions.phpの最大記事数と同じにして下さい。これを怠るとページネーションの２ページ以降が404ページになる等のバグが発生することがあります。
<?php
// ページ番号の取得
$paged = get_query_var('paged') ? get_query_var('paged') : 1;
$args = array(
'post_type' => 'custom01', //カスタム投稿タイプのスラッグ
'posts_per_page' => 10, //１ページの表示数:全件表示
'order' => 'ASC', //昇順
'order' => 'ASC', //昇順
'paged' => $paged //現在のページ番号（ページネーション用なのでなくてもOK）
);
// 中略
?>PHP記述例
ループ部分の記述例全文
カスタム投稿アーカイブページの記事ループ部分の記述例の全文を下記に載せておきます。
<!-- カスタム投稿の記事一覧ループ-->
<ul class="custom01-ul_wrapper">
<?php
// ページ番号の取得
$paged = get_query_var('paged') ? get_query_var('paged') : 1;
$args = array(
'post_type' => 'custom01', //カスタム投稿タイプのスラッグ
'posts_per_page' => 5, //１ページの表示数:全件表示
'order' => 'ASC', //昇順
'orderby' => 'date', //日付順
'paged' => $paged //現在のページ番号（ページネーション用なのでなくてもOK）
);
// 以下、ループ構造
$the_query = new WP_Query($args);
if ($the_query->have_posts()) : while ($the_query->have_posts()) : $the_query->the_post(); ?>
<li class="custom01-li">
<a href="<?php the_permalink(); ?>" class="custom01_li-a">
<!-- サムネイル -->
<div class="custom01-img_wrapper">
<?php the_post_thumbnail('medium'); ?>
</div>
<div class="custom01-text_wrapper">
<!-- タイトル表示 -->
<div class="custom01-title"><?php the_title() ?></div>
<!-- 投稿日表示 -->
<div class="custom01-date"><?php the_time('Y年n月j日') ?></div>
<!-- カテゴリ名表示（カテゴリ名slugでクラス付与・リンクなし) -->
<div class="custom01-term">
<?php
$terms = get_the_terms($post->ID, 'works-cat');
if (!empty($terms)) {
foreach ($terms as $term) :
echo $term->name;
endforeach;
} else {
echo '未分類';
}
?>
</div>
</div>
</a>
</li>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else : ?>
<p>投稿がありませんでした。</p>
<?php endif;
?>
</ul>
<!-- ページネーション設定 -->
<div class="post-pagination-wrapper">
<?php
$args = array(
'type' => 'list',
'current' => $paged,
'total' => $the_query->max_num_pages,
'prev_text' => '<',
'next_text' => '>',
);
echo paginate_links($args);
?>
</div>基本的に、コード横のコメントアウトを読めば意味は理解できると思いますが、以下、パーツごとに解説をしていきます。
ループ設定部分のコード解説
個別記事のループの前に、ページ番号の取得等の設定を書きます。
<?php
$paged = get_query_var('paged') ? get_query_var('paged') : 1; //現在のページ番号の設定｜ページネーション用なのでなくてもOK
$args = array(
'post_type' => 'custom01', //カスタム投稿タイプのスラッグ
'posts_per_page' => 10, //１ページの表示数:全件表示
'order' => 'ASC', //昇順
'orderby' => 'date', //日付順
'paged' => $paged //現在のページ番号（ページネーション用なのでなくてもOK）
);上のコードの設定値について解説をまとめておきます。
コード解説
- post_type：投稿タイプのスラッグです。
- posts_per_page：-1なら全件表示で、1ページに最大10件なら10と記入して下さい。
- order：ASCは昇順です。DESCなら降順になります。
- orderby：dateは日付順を意味します。他のオプションには、titleならタイトル順、modifiedなら更新日時の新しい順などがあります。
ループ本体のコード解説
以下のコードがループ本体です。
<ul class="news-info_wrapper">
<?php
// 中略
// 以下、ループ構造
$the_query = new WP_Query($args);
if ($the_query->have_posts()) : while ($the_query->have_posts()) : $the_query->the_post(); ?>
<li class="custom01_wrapper">
<a href="<?php the_permalink(); ?>" class="archive_li-a">
<!-- サムネイル -->
<div class="custom01-img_wrapper">
<?php the_post_thumbnail('medium'); ?>
</div>
<div class="custom01-text_wrapper">
<!-- タイトル表示 -->
<div class="custom01-title"><?php the_title() ?></div>
<!-- 投稿日表示 -->
<div class="custom01-date"><?php the_time('Y年n月j日') ?></div>
<!-- カテゴリ名表示（カテゴリ名slugでクラス付与・リンクなし) -->
<div class="custom01-term">
<?php
$terms = get_the_terms($post->ID, 'custom01-cat');
if (!empty($terms)) {
foreach ($terms as $term) :
echo $term->name;
endforeach;
} else {
echo '未分類';
}
?>
</div>
</div>
</a>
</li>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else : ?>
<p>投稿がありませんでした。</p>
<?php endif;
?>
</ul>コード解説
コメントアウトに書いてあるように、この例では下記の4項目をループさせています。
- パーマリンク：<?php the_permalink(); ?>
- サムネイル画像：<?php the_post_thumbnail(‘medium’); ?>
- タイトル：<?php the_title(); ?>
- 投稿日：<?php the_time(‘Y年n月j日’) ?>
- ターム名（カテゴリー名）：get_the_terms()関数の引数にタームのスラッグ（上の例ではcustom01-cat）を入れてターム名を配列から取得・出力しています。
ほかにも必要に応じて下記の項目なども追加できます。
- 抜粋：<?php the_excerpt(); ?>
ページネーション
上の方で説明したルールを守れば、下記のように投稿タイプとまったく同じコードが使えます。
<!-- ページネーション -->
<div class="post-pagination-wrapper">
<?php
$args = array(
'type' => 'list',
'current' => $paged,
'total' => $the_query->max_num_pages,
'prev_text' => '<',
'next_text' => '>',
);
echo paginate_links($args);
?>なお、カスタム投稿タイプではページネーションを必要としないケースも多いため、不必要であれば関係箇所のコードを削除して下さい。
関連記事
カスタムタクソノミーのfunctions.php設定
あわせて読みたい
【WordPress】カスタム投稿タイプにカテゴリーとタグを追加する方法【カスタムタクソノミー】
カスタム投稿タイプのカスタムタクソノミー（カテゴリーとタグ）はfunctions.phpに設定を記述しないと使うことができません。この記事ではWordPressのカスタム投稿タイ...
カスタム投稿タイプのターム名（カテゴリー名）を表示する方法
あわせて読みたい
【WordPress】カスタム投稿タイプのターム名（カテゴリー名）表示する方法【カスタムタクソノミー】
カスタム投稿タイプのターム名（カテゴリー名）を表示させる方法を紹介します。 PHP記述例 基本構文のPHP記述例を下の載せておきます。基本的にコピペでターム名が表示...
