hollywis's diary (はりうすブログ)

システム会社:合同会社はりうすの活動日記です

WordPressテーマの投稿ページのテンプレートを作成する

f:id:hollywis:20180904205359p:plain

こんにちは、前回は固定ページのテンプレートを作成しました。

hollywis.hatenablog.com

今回、第11回目は投稿ページのテンプレートを作成していきます。

投稿ページのテーマの作成方法

投稿ページはWordPressで定期的な記事の投稿時に利用する機能です。ブログ機能とも言えますが、投稿タイプを増やすことで様々な投稿に対応しています。

今回はこの投稿ページのテンプレートの作成方法をご紹介します。

投稿ページのテンプレートを作成することで、その他のページと独立して自由にデザインを設定することができます。

テンプレートファイル名は予め決まっており「single.php」になります。

もしテーマの中にsingle.phpがある場合、投稿ページを表示する際の挙動が、index.phpよりもsingle.phpの方が表示優先度が高くなります。

この仕組みを利用して、投稿ページのテンプレートを作ります。

それでは実際に書いて見ましょう。 「single.php」というファイル名でテーマ直下に新規作成し、次のようにコードを記載します。

single.php

    <?php while ( have_posts() ) : the_post(); ?>
       <h1><?php the_title() ?>:single.phpによる投稿ページ</h1>
       <div>
         <?php the_content(); ?>
      </div>
    <?php endwhile; ?>

固定ページとほぼ一緒です。 実は、その他にヘッダーやフッター、サイドバー、などの表示も一緒です。

詳しくはこちらを参照ください。

hollywis.hatenablog.com

投稿ページのデザインの使い分ける方法

このままでは表示が味気無いので、CSSを触ってデザインを強化したいと思います。 しかし、例えば別の投稿タイプの時にデザインを変えたい場合はどうすればいいのでしょうか。 (例:ブログ、プレスリリースなど)

そこで、WordPressでは固定ページと同様に投稿ページ毎にデザインを変える方法が2つ用意されています。

  1. ページ毎に違うidやclassを自動的に埋め込む
  2. 投稿タイプ毎にページテンプレートを作る

投稿ページのテンプレート階層は次の通りです。

f:id:hollywis:20180904210800p:plain

このように、投稿タイプ(post_type)毎にテンプレートを作ることができます。

それでは試しに、作成しましょう。

カスタム投稿タイプを作る

カスタム投稿タイプを作る一番簡単な方法は、プラグイン「Custom Post Type Ui」を入れることです。

ja.wordpress.org

プラグインの新規追加画面から「Custom Post Type Ui」で検索してインストールし有効化します。 f:id:hollywis:20180904211416p:plain

次に、管理画面に「CPT UI」という項目ができているので、そこから「投稿タイプの追加と編集」を押します。

今回はカスタム投稿タイプ「blog」と増やしたいと思います。

f:id:hollywis:20180904211857p:plain

このように入力して、「投稿タイプと追加」ボタンを押して登録完了です。

管理画面のメニューに「投稿」の他に「blog」のメニューが追加されているかと思います。ここから記事を追加することができます。

カスタム投稿タイプ用のテンプレートを作成する

カスタム投稿タイプ「blog」ができたので、これに対応するテンプレートを作成します。

ファイル名は「single-blog.php」です。 内容は次のようにします。

single-blog.php

    <?php while ( have_posts() ) : the_post(); ?>
       <h1><?php the_title() ?>:single-blog.phpによる投稿ページ</h1>
       <div>
         <?php the_content(); ?>
      </div>
    <?php endwhile; ?>

そして、試しにblogの記事を1つ書いて、表示させてみます。 f:id:hollywis:20180904212854p:plain

このような感じで、投稿タイプ毎にテンプレートを設定することができました。

本日は以上です。 次回は、個別ページで利用できるテンプレートタグをいくつか紹介します。