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

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

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

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

この記事はWordPressテーマで投稿ページを表示するための重要なファイル「single.php」を作り忘れてしまった人が、single.phpを作成して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の管理画面を開いてサイドメニューのテーマエディタをクリックして「テーマを編集」のページを表示させます。

 

Advertisement

 

「テーマを編集」のページで、使用している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(); ?>

 

Advertisement

 

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に記述した内容を投稿ページのサイドバーに表示してくれます。

 

WordPressテーマの投稿ページで表示を確認

 

single.phpを作成して投稿ページの内容をループ内に記述できたら、WordPressテーマの投稿ページを表示させて問題なく表示できているかを確認します。

投稿ページの表示確認は、WordPressの管理画面から投稿編集ページに移動してプレビューで確認してもいいですし、トップページのアーカイブから投稿ページに移動して確認するなど、確認しやすいやり方で投稿ページを表示します。

 

 

single.phpに記述した投稿タイトルと投稿本文、サムネイルがある場合はサムネイルもWordPressの投稿ページに表示されていれば、single.phpを作成してWordPressテーマに投稿ページを表示するまでのやり方が成功しています。

あとはsingle.phpで表示させた投稿ページを、使用するWordPressテーマに合わせたレイアウトやデザインにCSSで調整していくだけです。

 

 

たとえば上の画像のようにPC画面のような大きい画面幅ではWordPressの投稿ページにサイドバーを表示させて、スマホの小さい画面幅ではサイドバーを投稿本文の下に落としてレイアウトを組むなど、ごにょごにょとWordPressの投稿ページを完成させます。

WordPress使い方カテゴリの最新記事