WordPress自作テーマ-投稿ページを作る

今回は投稿ページを作成します。

用意するテンプレートファイルはsingle.php。

投稿ページ(ブログなど)に該当するhtmlファイルをsingle.phpに書き換えます。

single.phpの編集

共通部分を置き換える

テンプレートファイルの用意ができたら、編集していきます。

手順はpage.phpと同様。header.php、footer.phpなどの共通部分をsingle.phpに読み込ませていきます。

heder部分、footer部分を削除し、インクルードタグget_header()、get_footer()に書き換えます。

この段階で、投稿ページの編集画面「プレビュー」から、webページの表示を確認することができます。

ループ文を記載していないので静的なページが表示されていだけですが、single.phpが反映されていることが確認できます。

記事部分を動的に出力する

記事部分を動的に出力します。ループ文の基本はpage.phpと同じ、まずはループ文を記述します。

次に、投稿ページに特有の記述部分を編集していきます。固定ページにはない日付やカテゴリー、タグなどの表示と各ページへのリンクなどを動的に表示できるように置き換えます。

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

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

          <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>  //id、クラスの出力
            <div class="date"><?php the_date('Y.m.d') ?></div> 　//日付の出力

            <h1><?php the_title(); ?></h1>　//ページタイトルはh1
              <?php the_category(','); ?>　　//カテゴリーの出力
          
            <div class="content-body">
              <p class="single-img">
                <?php the_post_thumbnail('single'); ?>　　//画像の出力
              </p>
              <?php the_content(); ?>　　　//本文
            </div>

          </article>

        <?php endwhile; ?>
      <?php endif; ?>

カテゴリーはthe_category()を使用しました。the_category()は、各カテゴリーの一覧ページへのリンクが付与されます。

アイキャッチは、条件分岐で記述します(シンプルに記載してます)。

サイズはあらかじめ指定しておきます。

single.phpの基本的な記述が完成しました。