投稿(ブログ記事)を表示するsingle.phpを作成する【WordPress制作入門講座】 | SkillhubAI(スキルハブエーアイ)

投稿(ブログ記事)を表示するsingle.phpを作成する【WordPress制作入門講座】

single.phpの作成

いよいよ最後です!
ブログの記事を読めるように、single.phpを作成しましょう。
file

新規ファイルを作成し、page-form.phpの中身を全て張り付けます。
「single.php」と名前をつけて保存してください。

mainタグのクラス、その下の画像(imgタグ)を削除します。
file

h2タグの中身を、投稿のタイトルを呼び出すWordPressタグ <?php the_title(); ?> に変更します。
タイトル部分もループ内に入れましょう。

single.php

<?php get_header(); ?>

  <main>
    <section>
        <?php while (have_posts()) : the_post(); ?>
          <h2><?php the_title(); ?></h2>
          <?php the_content(); ?>
        <?php endwhile; ?>
    </section>
  </main>

<?php get_footer(); ?>

保存して、ブラウザで投稿のページを見てみましょう。
投稿(ブログの記事)ページが表示されるようになっています。
file

ただ、タイトルとcontent(本文)以外にも、投稿の作成時には色々な設定をしましたよね。 アイキャッチ画像と、サイトを見ている人がわかりやすいようにカテゴリーとタグの表示ができるようにしましょう。
投稿に設定しているカテゴリーとタグは、下記のWordPressタグで呼び出せます。

投稿に設定されているカテゴリーを表示する

<?php the_category(); ?>

投稿に設定されているタグを表示する

 <?php the_tags(); ?>

single.php

<?php get_header(); ?>

  <main>
    <section>
        <?php while (have_posts()) : the_post(); ?>
          <h2><?php the_title(); ?></h2>
                    <?php the_post_thumbnail('full'); ?>
          <?php the_content(); ?>
          <p><?php the_category(); ?></p>
          <p><?php the_tags(); ?></p>
        <?php endwhile; ?>
    </section>
  </main>

<?php get_footer(); ?>

保存して、表示を見てみましょう。 file

投稿のアイキャッチが小さいですね。 カテゴリーは縦並び、タグは「タグ:」という文字付きの横並で、ちょっと違和感があります。

もう少し、統一感のある表示を目指して改良してみましょう。
こういう時は ()の中に、引数と呼ばれる指示を追加することで、出力する内容を調整することができます。
file

single.php(完成!)

<?php get_header(); ?>

  <main>
    <section>
      <?php while (have_posts()):the_post(); ?>
        <h2><?php the_title(); ?></h2>
        <?php the_post_thumbnail('full'); ?>
        <?php the_content(); ?>
        <p>カテゴリー: <?php the_category(' / '); ?></p>
        <p><?php the_tags(); ?></p>
      <?php endwhile; ?>
    </section>
  </main>

<?php get_footer(); ?>

上書き保存して、表示ページを再読み込みしてみます。
少し見やすくなったのではないでしょうか。
file
それぞれをpタグやdivタグで囲い、この囲った要素にクラス名を付ければ、Style.cssでスタイル指定を追加することもできます。
このあたりはお好みに合わせて設定してみてください。

これで株式会社エドベースサイトのWordPress化は完成です。 お疲れさまでした。

テーマ制作基礎のまとめ

WordPressのテーマは、WordPressの機能を使ってサイトを作るためのファイル一式をまとめたもの。テーマの中には、ページを表示するためのテンプレート(php)ファイルが含まれており、WordPressはファイル名をみて「どのページを表示する時に使うか」を判定しています。

file

テンプレートファイルはテータベースの情報を取り出して表示します。 また、別のphpファイルを読み込むことも出来ます。重複する部分は1つのファイルとして作成して、色々なページから呼びだすことが可能です。

データベースの情報や、他のphpファイルの情報を書き出すためには、phpやWordPressで定義されているタグを使用します。

ループ(繰り返し)処理を行うことで、データベースから情報を取り出ます。一覧ページを表示することも可能ですし、single.phpやpage.phpなどもループの中でデータベースから情報を取り出して表示させています。 条件に当てはまる情報が1つしかなければ繰り返されません。

ループなどをより詳しく設定することで、様々なサイトの構築が可能になります。WordPressはプラグインを追加することでも、便利な機能が手軽に追加できます。

今回はシンプルに、最低限のテーマを作成しました。 慣れてきたら、必要に応じて使える機能を増やしていきましょう!