ゼロから始めるWordPress自作テーマ #2「トップページにブログ記事の一覧を表示しよう」

WordPress 作成日：2021.08.18

「ゼロから始めるWordPress自作テーマ」では、既成のテーマを使わずにゼロからWordPressサイトを構築する方法を、私のブログサイト「OUNI studio」の構築例をもとに紹介します。

WordPressの既成テーマは簡単にインストールできますが、実際にサイトを構築する際には、既成のテーマをカスタマイズするよりも、自分でテーマを作成した方が簡単な場合が多いです。自分でWordPressテーマを作れるようになれば、サイトを自由にデザインできるようになります。

第２回は「トップページにブログ記事の一覧を表示しよう」です。

以下のようにブログのトップページに記事一覧を表示させるようにします。

下準備

ダミーの記事をつくっておく

もし、まだ記事を作っていない場合は、いくつかダミーの記事を書いておきましょう。記事の一覧をつくっても表示される記事がないと寂しいので。

ぼくはひとまず３記事を用意しておきました。

一度に表示する記事の最大数を設定しておく

トップページに最大何個の記事を一度に表示させるかを設定しておきます。

以下の場所で設定できます。

ホームページ（トップページ）の表示を「最新の投稿」に
１ページに表示する最大件数を「１０件（お好きな数）」に

これで下準備は完了です。

一覧表示をプログラミングする

編集のやりかた

それでは、実際に記事の一覧を表示させるプログラミングをしていきます。「外観」→「テーマエディタ」を開きます。そして、画面右側のテーマファイルから「index.php」を選択します。画面中央に index.php が表示されますので、そこの中身を編集していきます。

まずは、HTMLで一覧表示をつくる

まずは、HTMLで以下のように書きます。この状態では、WordPressで作った記事の情報をつかっていませんが、ひとまずHTMLで構造だけをつくります。

<body>
  <h1>記事の一覧</h1>

  <div>
    <hr>
    <div>
      <h3>記事のタイトル１</h3>
      <p>カテゴリ１</p>
      <time>2021.08.17</time>
    </div>
    <hr>
    <div>
      <h3>記事のタイトル２</h3>
      <p>カテゴリ２</p>
      <time>2021.08.16</time>
    </div>
    <hr>
    <div>
      <h3>記事のタイトル３</h3>
      <p>カテゴリ３</p>
      <time>2021.08.15</time>
    </div>
  </div>
  
</body>

保存して、サイトを確認すると、以下のように表示されます。

PHPでブログ記事データを読み込む

それでは、ここから実際に記事のデータを取得してきて、トップページに表示させていきます。

WordPressの記事や画像やカテゴリなど、すべての情報はデータベースで管理されています。PHPというプログラミング言語で、そのデータベースから情報を取得してきて表示させるというのが、基本の処理の流れです。

それでは実際にやってみます。

index.php を以下のように書き換えます。

<body>
  <h1>記事の一覧</h1>

  <div>
    <!-- 投稿の数だけ繰り返して処理する -->
    <?php while ( have_posts() ) :　?>
        
      <!-- 投稿を取得 -->
      <?php the_post(); ?>

      <div>
        <hr>
        <!-- 投稿のタイトルを表示して、投稿ページへのリンクを張る -->
        <h3><a href="<?php echo get_permalink(); ?>"><?php echo the_title(); ?></a></h3>
        <!-- カテゴリを表示する -->
        <p><?php the_category(', '); ?></p>
        <!-- 投稿日時をを表示する -->
        <time datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y.m.d'); ?></time>
      </div>

    <?php endwhile; ?>
  </div>
</body>

これで記事一覧を取得してきて表示させることができます。

解説：PHPを書くとき

HTMLではなく、PHPを書く場合は <?php と ?> で囲って、以下のように書きます。

<?php ここにPHPのプログラムを書く ?>

このように囲われている部分がPHPのコードで、それ以外がHTMLのコードです。

解説：データを取得する

データベースからデータを取得してくる場合は、PHPのコードを書きます。

どの関数でどのデータが取得できるかは、以下の関数リファレンスに書かれています。

wpdocs.osdn.jp

関数リファレンス - WordPress Codex 日本語版

https://wpdocs.osdn.jp/関数リファレンス

今回は以下の関数を使っています。

the_post : １つの投稿を取得する
get_parmalink : 投稿のリンクを取得する
the_title : 投稿のタイトルを取得する
the_category : 投稿のカテゴリを取得する
the_time : 投稿の投稿日を取得する

そして、これをHTMLのコードの中に埋め込んでいます。

      <!-- １つの投稿を取得して -->
      <?php the_post(); ?>

      <div>
        <hr>
        <!-- 投稿のタイトルを表示する。そして投稿ページへのリンクを張る。 -->
        <h3><a href="<?php echo get_permalink(); ?>"><?php echo the_title(); ?></a></h3>
        <!-- 投稿のカテゴリを表示する。 -->
        <p><?php the_category(', '); ?></p>
        <!-- 投稿日を表示する -->
        <time datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y.m.d'); ?></time>
      </div>

解説：投稿の数だけ繰り返す

プログラムを使うと、同じ処理を簡単に繰り返すことができます。今回は While文を使って繰り返しさせています。

    <!-- 投稿が取得できる間、繰り返す。have_postsは投稿があるかどうかを判定する関数。 -->
    <?php while ( have_posts() ) :　?>
        
      <!-- ここを繰り返す -->

    <?php endwhile; ?>

まとめ

今回は、投稿記事の一覧を表示させました。

「データベースから、PHPで書かれている関数でデータを取得してきて、HTMLで表示させる」という流れがWordPressの基本です。

これが理解できれば、大抵のことは同じようなやりかたで出来ます。

次回は、投稿のサムネイル画像を表示させてみます。