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

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

single.phpの作成

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

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

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(); ?>

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

サイトを見ている人がわかりやすいように、カテゴリーとタグも表示しましょう。
投稿に設定しているカテゴリーとタグは、下記の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_content(); ?>
          <p><?php the_category( ); ?></p>
          <p><?php the_tags( ); ?></p>
        <?php endwhile; ?>
    </section>
  </main>

<?php get_footer(); ?>

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

カテゴリーは縦並び、タグは「タグ:」という文字付きの横並び。
ちょっと変ですね。

カテゴリーもタグと同じように表示させてみます。


single.php(完成!)

<?php get_header(); ?>

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

<?php get_footer(); ?>

上書き保存して、表示ページを再読み込みしてみます。
少し見やすくなったのではないでしょうか。

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

テーマ画像の設定方法について

※この設定はしても、しなくても構いません。

WordPressのテーマの設定画面。
元々入っていたテーマには、適用した場合の見本画像が表示されています。
ですが、新しく作ったテーマには何も表示されていませんよね。

テーマ選択画面にサムネイルを表示するためには、screenshot.pngというpngファイルが必要です。テンプレートと同じく、ここもファイル名で判定されるんですね。

screenshot.pngのサイズは1200×900pxあたりで作ることが多いです。
下記の方法で作成してみましょう。

1.PhotoshopかIllustratorでサイズを決めて新規作成
2.スクリーンショットを張り付ける
3.screenshot.pngと名前をつけて保存する
4.作成中のテーマフォルダ直下に画像を入れる

テーマ選択画面に、作ったscreenshot.pngが反映されますよ。

テーマ制作基礎のまとめ

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

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

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

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

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

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

無料ビデオ講座のお知らせ

Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。

無料講座一覧を見る

×