0から始めるWordPress自作テーマ作成【投稿ページ作成編】

前回は固定ページの作成方法をご紹介し、WEBサイトの下層ページを作成しました。
今回はWordpressの投稿ページの作成方法をご紹介していきたいと思います。

前回にもお伝えした、WordPressには固定ページと投稿ページと2つの特性をもった機能があり、それぞれの特性に合わせてページを作成していきます。
固定ページと投稿ページの違いについては、以下の記事をご覧下さい。

固定ページと投稿ページの違いについて>>

これまでの関連記事はこちらから読めます

0から始めるWordPress自作テーマ作成【固定ページ作成編】

0から始めるWordPress自作テーマ作成【TOPページの表示とテンプレートタグ編】

0から始めるWordPress自作テーマ作成【footer.php作成編】

0から始めるWordPress自作テーマ作成【header.php作成編】

まずは投稿ページになるテンプレートファイルとして作成します

前回の固定ページと同様に、phpファイルを新規作成していきます。

ファイルに、ヘッダーとフッターを表示させるテンプレートタグを記述し、そのヘッダーとフッターのタグの間に、コードを書いていきます。

作成すると、以下のようなコードになるかと思います。確認をしてみましょう。

<?php get_header(); ?>// ヘッダーを呼び出すテンプレートタグ
<main>
// ここに、下層ページのコンテンツになるコードが入る想定です。
</main>
<?php get_footer(); ?>// フッターを呼び出すテンプレートタグ

ヘッダーを呼び出すタグとフッターを呼び出すタグに挟まれて、下層ページのコンテンツになるコードが入っている形になるかと思います。

メインタグの中にメインループと呼ばれるコードを記述します

管理画面の投稿ページのエディターの中身を反映させたいので、メインタグの中に、以下のようなメインループと呼ばれるコードを記述します。

<?php get_header(); ?>//  ヘッダーを呼び出すテンプレートタグ
<main>
  <?php if(have_posts): ?>
    <?php while(have_post): ?>
      <?php the_post(); ?>
      <?php the_content(); ?>
    <?php endwhile(); ?>
  <?php endif(); ?>
</main>
<?php get_footer(); ?>//  フッターを呼び出すテンプレートタグ

メインタグの中にメインループになるコードを記述したら、新規作成したphpファイルの名前を「single」という名前にして保存します。

作成したsingle.phpをアップロードします

ファイルの保存ができたら、WordPressのテーマフォルダにsingle.phpをアップロードします。

ここまでの手順は前回の固定ページとほとんど同じですね。

固定ページのコンテンツの作成では、元々作成していたHTMLを管理画面のエディターに貼り付けて表示をさせていましたが、投稿ページでは、HTMLを使わず管理画面のエディターで文章を作成して記事を投稿していきます。(もちろん、固定ページでもHTMLを使わずエディターでコンテンツを編集する事も可能です。)

それでは、早速記事を作ってみましょう。

管理画面の新規投稿で、記事を投稿します

管理画面左の投稿メニュー＞新規投稿で記事を投稿していきます。

タイトル枠に記事のタイトルになる文字を入力します。

このタイトル枠は、記事の見出しやタイトルになる内容の文章を入れましょう。

このタイトルの入力が終わりましたら、タイトル枠の下にある、コンテンツの入力枠に本文や見出し、画像などといった内容を入れていきます。

※エディターがGutenbergの場合は、こちらの記事も参考にしてみて下さい。

コンテンツの編集が終わりましたら、「公開」ボタンを押して、記事を投稿します。

WEBサイトに表示されていたら、無事、投稿ページの完成です。

投稿ページには、個別ページと一覧ページと作成ができます

投稿ページには、先程作成した記事の個別ページの他に、記事の一覧を表示する「一覧ページ」の作成も可能です。
よくWEBサイトで見るような、ニュース記事一覧のページなどを見かけた事はないでしょうか？
もし、そのサイトがWordPressを使用している場合は、ほとんどこの機能を使っている可能性が高いです。

では、一覧ページの作成方法も見ていきましょう。

記事一覧になるHTMLファイルを作成し、ヘッダーとフッターの部分をテンプレートタグに変えます。

まずは予めHTMLで記事一覧ページを作成し、ヘッダーとフッターをテンプレートタグに置き換えます。(phpファイルを新規作成して作っていっても問題ありません。)

そこまでができると、ファイル名を「archive(categoryでも可)」という名前にし、保存します。これでarchive(category).phpというファイルが作成されたかと思います。

関連記事：0から始めるWordPress自作テーマ作成【TOPページの表示と点っプレートタグ編】

※HTMLを作成してテンプレートタグを入れた場合は、拡張子をhtml→phpに変更し、名前も「archive(categoryでも可)」とリネームをして下さい。

作成すると以下のようなソースになるかと思いますので、確認してみましょう。

<?php get_header(); ?>//  ヘッダーを呼び出すテンプレートタグ
<main>
  <ul class="topics">
    <li><a href="#"><span>2020/00/00</span>記事タイトルが入ります</a></li>
     <li>
<a href="#"><span>2020/00/00</span>記事タイトルが入ります</a>
</li>
     <li>
<a href="#"><span>2020/00/00</span>記事タイトルが入ります</a>
</li>
  </ul>
</main>
<?php get_footer(); ?>//  フッターを呼び出すテンプレートタグ

上記のような状態なっていれば、ここまでは大丈夫かと思います。

メインタグの中にメインループのコードを記述していきます

記事一覧ページでは、個別記事を投稿すると、一覧ページに記事の投稿日付と見出しが自動で表示されるようにしたいので、ここでもメインループのコードを入れて、記事の見出しと日付を表示させていきます。

メインタグの中のタグをカットして違う場所に保存します

メインタグの中にあるタグを全て一度ちがう場所に保存しておき、メインループを書いていきます。

<?php get_header(); ?>//  ヘッダーを呼び出すテンプレートタグ
<main>
 <?php if(have_posts): ?>
    <?php while(have_post): ?>
      <?php the_post(); ?>
      
    <?php endwhile(); ?>
  <?php endif(); ?>
</main>
<?php get_footer(); ?>//  フッターを呼び出すテンプレートタグ

上記のようにメインループがメインタグの中に入っていれば大丈夫です。

ループ内に先程移動させたulタグとその中身を入れます

the_content();は、WordPressの管理画面のエディターに書かれなた内容を出力するためのタグとなります。
今回はコンテンツを出力せず、記事のタイトルや日付を表示させたいので、先程別の場所に移動させたulタグとその中身をメインループの中に入れていきます。

記事のタイトルを表示させるタグと日付を表示させるタグを入れていきます

記事のタイトルを表示させるには「the_title();」というタグを入れる事によって表示させる事ができます。

aタグの中のテキストと削除し、テンプレートタグを入れて行きます。

そして、spanタグの中には「the_date();」という日付を表示するタグを使い、投稿した日付を表示させて行きます。
さらに、日付を「2020年00月00日」と表示させたいので「date()」の「()」の中に「Y年m月j日」と記述します。

以上の2つをaタグとspanタグの中にと入れると、以下のようなソースコードになっているか確認してみましょう。

<?php get_header(); ?>//  ヘッダーを呼び出すテンプレートタグ
<main>
 <?php if(have_posts): ?>
    <?php while(have_post): ?>
      <?php the_post(); ?>
      
<ul>
        <li><a href="###"><span><?php the_date('Y年m月j日'); ?></span><?php the_title(); ?>
    <?php endwhile(); ?>
  <?php endif(); ?>
</main>
<?php get_footer(); ?>//  フッターを呼び出すテンプレートタグ

ここまで出来たら、再度上書き保存をしてファイルをアップロードします。

アップロードしたら一覧が上手く表示されているか確認をしていみましょう。
問題無く表示されていればこれで、一覧ページの完成です。

細かい設定をすると、記事のカテゴリー分けやその他にも色々な機能をもたせたり表示をさせる事が可能ですが、それは次回以降に機会があればまたご紹介させて頂きたいと思います。

まとめ

WordPressの投稿ページの作成方法について、個別ページと一覧ページと2ページ分の作成方法をご紹介させて頂きましたが、いかがだったでしょうか？

次回はプラグインを使ったお問い合わせフォームと、そのページを作成して行きたいと思います。

次回の記事はこちら：0から始めるWordPress自作テーマ作成【お問合せフォーム作成編】