【0から学ぶWordPress】カスタム投稿を固定ページに出力する

カスタム投稿で新しく作った記事を個別にページに出力する

カスタム投稿で新しく作った記事を１ページとして出力する方法です

カスタム投稿についてはこちらをご覧ください

個別ページの表示はsingle.phpになりますので、まずは
single.phpをカスタム投稿用に複製しましょう！

FTPなどで使用しているテーマのフォルダの中に
single.phpがあればそれをそのまま複製してください
無ければ作りましょう。

複製したファイル名を
single.php→single-blog.php（カスタム投稿名）
に変更します。

こうすることによってカスタム投稿（blog）は
single.phpより先にsingle-blog.phpを先に読み込みにいき
結果、blogの個別ページとなります。

これはテンプレート階層には決まりがあるのですが
これはまた別の記事に書こうかと思います💦

single.phpと同じデザインになる場合は複製しなくても
single.phpがblogのカスタム投稿のページとして認識しますので
そのままでも使えますが、基本的に書く内容は変わることが多いと思うので
-（ハイフン）を付けてカスタム投稿名にて新しく指定してあげましょう。

single.phpを複製後はどうするか？

さて、カスタム投稿用に固定ページを
single-blog.phpとして作成したら今度は中身を書いていきましょう

single.phpは基本的に投稿の最新記事を読み込むようになってます

では一体どうすればカスタム投稿用の記事を読み込むかというと
基本的にはsingle.phpと書いてる内容は一緒ですが、少し付け加える必要があります。

これはあくまでもサンプルのソースですが
一通り抜き出せると思います。
ヘッダー、サイドバー、フッターも追記してます。

カスタム投稿を出力させるHTML

<?php
  $args = [
    'post_type' => 'new', // カスタム投稿名が「news」の場合
    'posts_per_page' => 5, // 表示する数
  ];
  $my_query = new WP_Query($args); ?>
 
<?php if ($my_query->have_posts()): // 投稿がある場合 ?>
 
  <ul>
 
    <?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
 
    <!-- ▽ ループ開始 ▽ -->
 
    <li>
      <h3><?php the_title(); ?></h3>
      <p><?php the_time(get_option('date_format')); ?></p>
    </li>
 
    <!-- △ ループ終了 △ -->
 
    <?php endwhile; ?>
 
  </ul>
 
<?php else: // 投稿がない場合?>
 
  <p>まだ投稿がありません。</p>
 
<?php endif; wp_reset_postdata(); ?>

完成サンプル

<?php get_header(); ?>
<main>
<div class="schedule_blog">
                    <div class="d-md-flex flex-wrap">
                        <?php
                        $args = [
                            'post_type' => 'service', // カスタム投稿名が「gourmet」の場合
                            'posts_per_page' => 5, // 表示する数
                        ];
                        $my_query = new WP_Query($args); ?>
                        <?php if ($my_query->have_posts()) : ?>
                            <?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
                                <div class="schedule_item">
                                    <ul>
                                        <li>
                                        <a href="<?php the_permalink(); ?>">
                                            <?php the_post_thumbnail('large'); ?>
                                            <div class="back_article_white">
                                            <h3><?php the_title(); ?></h3>
                                            <p>投稿日：<?php the_time(get_option('date_format')); ?></p>
                                            <?php echo get_the_term_list($post->ID, 'service_category'); ?>
                                            
                                        </a>
                                            </div>
                                           
                                        </li>

                                </div>
                            <?php endwhile; ?>
                        <?php else : ?>
                            <p>まだ投稿がありません。</p>
                        <?php endif; wp_reset_postdata(); ?>
</main>
<?php wp_reset_postdata(); ?>
<?php get_footer(); ?>​

お仕事のご依頼やお問い合わせはフォームやツイッターにてお気軽にお問い合わせ下さい。

お問い合わせフォーム

» 高橋しゃちょー (@osaka_dos) | Twitter