single.phpを作成してWordPressテーマに投稿ページを表示する

自作しているWordPressテーマのトップページに記事一覧を表示して満足していたら、リンクからページ移動しようとしたときに、投稿ページが表示できないことに気づきました。

single.phpを作成するのを忘れていました…

この記事はWordPressテーマで投稿ページを表示するための重要なファイル「single.php」を作り忘れてしまった人が、single.phpを作成してWordPressテーマに投稿ページを表示するまでをまとめた記事です。

1. WordPressのsingle.phpを作成する
2. single.phpをWordPressテーマに配置する
3. single.phpのループで投稿ページを表示
4. WordPressテーマの投稿ページで表示を確認

WordPressのsingle.phpを作成する

さっそく作り忘れてしまったWordPressのsingle.phpを作成します。

single.phpの作成はテキストエディタで新規ファイルを保存するときに、ファイル名をsingle.phpに変更して保存します。PHPファイルを作成するので、ファイル拡張子は.phpです。

WordPressに使用するsingle.phpのファイル作成は、これで完成です。

single.phpをWordPressテーマに配置する

作成したsingle.phpは投稿ページを表示したいWordPressテーマのフォルダにテンプレートファイルとして配置します。

WordPressテーマのどこにsingle.phpを配置するのかというとthemesフォルダ内にあるテーマフォルダに、作成したsingle.phpを配置します。

themesフォルダはwp-contentフォルダ内に格納されてます。

single.phpをWordPressテーマのフォルダに配置したら、single.phpがWordPressに読み込まれて投稿ページのテンプレートとして認識しているかを確認しておきます。

WordPressにsingle.phpが読み込めているか確認するには、WordPressの管理画面を開いてサイドメニューのテーマエディタをクリックして「テーマを編集」のページを表示させます。

「テーマを編集」のページで、使用しているWordPressテーマのテンプレートファイルの構成の中に、先ほどテーマフォルダに配置したsingle.phpが「個別投稿」のテンプレートファイルとして読み込まれ認識していれば確認完了です。

single.phpのループで投稿ページを表示

single.phpをWordPressテーマに配置してテンプレートとして読み込みができたら、single.phpのファイル内に投稿ページのヘッダーとフッター、必要ならサイドバー、そして投稿ページのコンテンツをループを記述してWordPressの投稿ページを表示します。

まずはWordPressの投稿ページのヘッダーとフッターを出力させてしまいます。heade.phpとfooter.phpは作成済みとして説明しています。

<?php get_header(); ?>
投稿ページのコンテンツ
<?php get_footer(); ?>

WordPressのget_header()とget_footer()をPHPの開始タグと終了タグで囲んでsingle.phpに記述します。このとき表示確認のためにget_header()とget_footer()の間にテキストを何か入力しておくと投稿ページのコンテンツを表示する位置が分かりやすくなります。

記述後にsingle.phpをファイル保存してブラウザでWordPressを表示させてから、トップページの記事一覧で投稿ページのどれかをクリックすると、ヘッダーとフッターがsingle.phpに出力されて表示するのが確認できます。

次に投稿ページのヘッダーとフッターの間に投稿ページの内容をループで取得して表示します。

<?php get_header(); ?>

<div class="wrapper shingle_wrapper">
    <main class="main_contents">
    <?php if(have_posts()): ?>
    <?php while(have_posts()):the_post(); ?>
        <h1 class="single_title"><?php the_title(); ?></h1>
            <?php if(has_post_thumbnail()) : ?>
            <div class="single_thumbnail">
                <?php the_post_thumbnail(); ?>
            </div>
            <?php endif; ?>
        <div class="single_content">
            <?php the_content(); ?>
        </div>
    <?php endwhile; endif; ?>
    </main>
</div>

<?php get_footer(); ?>

WordPressでsingle.phpのループはメインループで記述します。

上のメインループの記述ではwhile文で取得する投稿ページの情報を「投稿タイトル」「投稿サムネイル」「投稿本文」を取得して表示するシンプルなループの書き方をしています。

投稿タイトルはthe_title()
投稿サムネイルはthe_post_thumbnail()
投稿本文はthe_content()

それぞれWordPressの関数をループ内で使用して、ループの最初のif(have_posts()の記述によって、アクセスしたページの投稿があるかどうかを確認、ある場合にはwhile文で投稿ページのヘッダーとフッターの間に投稿内容を表示します。

投稿サムネイルは投稿編集画面でサムネイルが使われている場合に投稿ページに表示するようにif文で記述しています。

<?php get_header(); ?>

<div class="wrapper shingle_wrapper">
    <main class="main_contents">
    <?php if(have_posts()): ?>
    <?php while(have_posts()):the_post(); ?>
        <h1 class="single_title"><?php the_title(); ?></h1>
            <?php if(has_post_thumbnail()) : ?>
            <div class="single_thumbnail">
                <?php the_post_thumbnail(); ?>
            </div>
            <?php endif; ?>
        <div class="single_content">
            <?php the_content(); ?>
        </div>
    <?php endwhile; endif; ?>
    </main>
    <!--sidebar.phpの読み込み-->
    <div class="sidebar">
        <?php get_sidebar(); ?>
    </div>
</div>

<?php get_footer(); ?>

WordPressの投稿ページにサイドバーも表示する場合には、single.phpのループのコードをマークアップしてるmain終了タグのすぐ下にWordPressの関数get_sidebar()を記述します。

get_sidebar()は投稿ページに使用するサイドバーのテンプレートファイルを読み込みます。sidebar.phpのファイルを作成してテーマフォルダに配置することでget_sidebar()がsidebar.phpに記述した内容を投稿ページのサイドバーに表示してくれます。