masakichi-code

WordPressのカスタム投稿の一覧ページの作り方【パターンごと有り】

WordPress

2023.02.28(火)

『WordPressのカスタム投稿の一覧ページを作りたい』『WordPressのカスタム投稿の一覧ページをうまく作れなかった』『簡単に作るやり方があれば知りたい』

こういった疑問に答えます。

本記事の内容

・WordPressのカスタム投稿の一覧ページの作り方
・WordPressのカスタム投稿の一覧ページのパターンごとの作り方

Webエンジニア歴半年
WordPressの運営＆立ち上げ70サイト以上かかわっている

こういった私が解説していきます。

1. WordPressのカスタム投稿の一覧ページの作り方

その①：カスタム投稿タイプを用意する
その②：カスタム投稿のアーカイブ用ファイルを作る
その③：コードを記述する

その①：カスタム投稿タイプを用意する

カスタム投稿タイプを用意しましょう。
用意している方は次の項目へどうぞ。
これからカスタム投稿タイプを作成する方は、こちらの記事を見ながら作成してみてくださいね。

WordPressのカスタム投稿の作り方【パターンごとでページ表示させる方法もご紹介】

その②：カスタム投稿のアーカイブ用ファイルを作る

・archive-〇〇〇.phpファイルを作成する

archive-〇〇〇.phpファイルを作成しましょう。
すでにあるarchives.phpをコピーして作成するのが早いですね。
下記のようなコードを例として載せておきます。

/* サンプルコード */
  <?php get_header(); ?>

  <div id="content" class="w-inner">
  <ul class="topics_list ml-auto">
  <?php if(have_posts()) : while(have_posts()) : the_post(); ?>
  <li class="topics_item">
  <a href="<?php the_permalink(); ?>"> <time class="topics_date"><?php the_date(); ?></time>
  <h3 class="topics_ttl"><?php the_title(); ?></h3>
  </a>
  </li>
  <?php endwhile; ?>
  <?php endif; ?>
  </ul>
  </div>

  <?php get_footer(); ?>

/* サンプルコード */

<?php get_header(); ?>

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

</a>

</li>

<?php endwhile; ?>

<?php endif; ?>

</ul>

</div>

<?php get_footer(); ?>

・archives.php以外にも表示するやり方がある

実は、archive-〇〇〇.php以外にも表示するやり方があります。
次の章でパターンごとに紹介しているので、ぜひ最後まで見ていってください。

その③：コードを記述する

・大体こんなコードです

カスタム投稿タイプを一覧で表示するやり方は大体以下のコードです。

メインクエリ、サブクエリという難しい話は一旦置いておきますね。
後で記事にしようと思っています。

2. WordPressのカスタム投稿の一覧ページのパターンごとの作り方

その①：page-〇〇〇.phpで表示する場合
その②：archive-〇〇〇.phpに表示する場合

その①：page-〇〇〇.phpで表示する場合

・固定ページで表示する際の注意

CPT(Custom Post Type UI)のプラグインを使っている場合は階層を『偽』にしておきましょう。
また、functions.phpへ記載している方は『has_archive』を『false』にしておきましょう。

・page-〇〇〇.phpに記載する

page-〇〇〇.phpへ以下のコードを記載してみてください。

/* 固定ページサンプル */
<?php
/*
Template Name: テンプレート名
*/
get_header();
?>
<main class="archive">

<section class="sec">
<div class="inner">

<?php
// 固定ページかつ、トップページに指定しているので『paged』を『page』にしています。
$paged = ( get_query_var( 'page' ) ) ? absint( get_query_var( 'page' ) ) : 1;
$args = array(
'post_type' => 'property', // 投稿タイプ
'post_status' => 'publish', // 公開された投稿、または固定ページを表示(デフォルト)
'posts_per_page' => 12, // 表示件数の指定
'paged' => $paged, //現在のページ目を取得する
'order' => 'DESC' // ソートの並び順を指定'DESC' 降順、'ASC' 昇順

);

//------------------
$the_query = new WP_Query($args);
if ($the_query->have_posts()) :
while ($the_query->have_posts()) : $the_query->the_post();

global $post;

?>

<a class="item fadeIn" href="<?php the_permalink(); ?>">
<div class="hover-window">
<?php if( has_post_thumbnail() ): ?>
<!-- サムネイルがある場合 -->
<?php the_post_thumbnail( 'full' ); ?>
<?php else: ?>
<!-- サムネイルがない場合 -->
<img src="<?php echo get_template_directory_uri(); ?>/images/" alt="non-thumnail">
<?php endif; ?>
</div><!-- hover-window -->

<div class="caption">
<h3><?php the_title(); ?></h3>
</div><!-- caption -->
</a><!-- item -->

<?php endwhile; else: ?>
<p>投稿がありません。</p>
<?php endif; wp_reset_query();?>

</div><!-- inner -->

<div class="pagenation fadeIn">
<?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 .= '%_%';
}
echo paginate_links(array(
'base' => $paginate_base,
'format' => $paginate_format,
'total' => $the_query->max_num_pages,
'show_all' => true,
'mid_size' => 2,
'current' => ($paged ? $paged : 1),
'prev_text' => false,
'next_text' => false,
));?>
</div><!-- pagenation -->

</section><!-- sec -->
</main>
<?php get_footer(); ?>

/* 固定ページサンプル */

<?php

Template Name: テンプレート名

get_header();

<?php

// 固定ページかつ、トップページに指定しているので『paged』を『page』にしています。

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

$args = array(

'post_type' => 'property', // 投稿タイプ

'post_status' => 'publish', // 公開された投稿、または固定ページを表示(デフォルト)

'posts_per_page' => 12, // 表示件数の指定

'paged' => $paged, //現在のページ目を取得する

'order' => 'DESC' // ソートの並び順を指定'DESC' 降順、'ASC' 昇順

);

//------------------

$the_query = new WP_Query($args);

if ($the_query->have_posts()) :

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

global $post;

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

<?php the_post_thumbnail( 'full' ); ?>

<?php else: ?>

<img src="<?php echo get_template_directory_uri(); ?>/images/" alt="non-thumnail">

<?php endif; ?>

</div>

</div>

</a>

<?php endwhile; else: ?>

<p>投稿がありません。</p>

<?php endif; wp_reset_query();?>

</div>

<?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 .= '%_%';

}

echo paginate_links(array(

'base' => $paginate_base,

'format' => $paginate_format,

'total' => $the_query->max_num_pages,

'show_all' => true,

'mid_size' => 2,

'current' => ($paged ? $paged : 1),

'prev_text' => false,

'next_text' => false,

));?>

</div>

</section>

</main>

<?php get_footer(); ?>

その②：archive-〇〇〇.phpに表示する場合

・アーカイブページで表示する場合の注意

CPT(Custom Post Type UI)のプラグインを使っている場合は階層を『真』にしておきましょう。
また、functions.phpへ記載している方は『has_archive』を『true』にしておきましょう。

・archive-〇〇〇.phpに記載する

archive-〇〇〇.phpに以下のコードのコードを記載してみてください。

/* サンプルコード */
  <?php get_header(); ?>

  <div id="content" class="w-inner">
  <ul class="topics_list ml-auto">
  <?php if(have_posts()) : while(have_posts()) : the_post(); ?>
  <li class="topics_item">
  <a href="<?php the_permalink(); ?>"> <time class="topics_date"><?php the_date(); ?></time>
  <h3 class="topics_ttl"><?php the_title(); ?></h3>
  </a>
  </li>
  <?php endwhile; ?>
  <?php endif; ?>
  </ul>
  </div>

  <?php get_footer(); ?>

/* サンプルコード */

<?php get_header(); ?>

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

</a>

</li>

<?php endwhile; ?>

<?php endif; ?>

</ul>

</div>

<?php get_footer(); ?>

というわけでWordPressのカスタム投稿の一覧ページの作り方についてご紹介しました。

< 前の記事一覧へ戻る次の記事 >

masakichi

カテゴリー

アーカイブ

2024 (8)
2023 (18)
2022 (8)