wordpressで独自のページテンプレートを作成して固定ページに適用するための手順

公開日:2016/02/20 更新日:2016/02/20
wordpressで独自のページテンプレートを作成して固定ページに適用するための手順のサムネイル

はじめに

wordpressではページの種類として固定ページ、投稿ページなどがありますが、固定ページは固定ページ用のテンプレート、投稿ページは投稿ページ用のテンプレートを読み込んで表示しています。そしてwordpressでは、固定ページに対して独自のページテンプレートを作成して読み込ませることができます。 用途として良くあるのが、ほとんどの固定ページではサイドバーを表示するけど、特定のページではサイドバーを表示したくない場合などです。この場合はサイドバーを表示しないページテンプレートを用意して読み込ませます。以下ではこのサイドバーを表示しないページテンプレートの作成と、これを固定ページで読み込ませるまでの手順をメモします。

環境について

環境は以下です。

  • OS : OS X El Capitan ver 10.11.3
  • wordpressの動作環境 : MAMP 3.0.7.3を使用
  • wordpress : ver 4.4.2
  • wordpressで使用するテーマ : Twenty Sixtenn

固定ページのページテンプレートについて

はじめに固定ページのページテンプレートがデフォルトでどうなっているかをメモしておきます。 以下は固定ページの新規作成画面ですが、画面右側に「ページ属性」という項目があります。この中の「テンプレート」を変更することでこの固定ページで使用するページテンプレートを変更できます。標準では「デフォルトテンプレート」となっています。

page-view.png

そしてTwenty Sixteenでは、このデフォルトテンプレートは以下のようにテーマフォルダにある「page.php」が該当します。なお、大体のテーマでは固定ページのデフォルトテンプレートとして「page.php」という名前に設定していますが、中には「content-page.php」など違う名前になっている場合があります。各テーマでどのファイルが固定ページのデフォルトテンプレートとなっているかは、作成者サイトなどで確認できると思います。

pagephp-dir.png

この「page.php」の一部を修正して独自のページテンプレートを作成し、上記で説明した「ページ属性」の「テンプレート」で選択できるようにします。この作業によって任意の固定ページで独自のページテンプレートを使用することができます。この作業手順を以下にのせます。

ページテンプレートの作成

実際にページテンプレートを作成し、使用する手順をメモします。といっても非常に簡単です。以下はwordpressの標準テーマであるTwenty Sixteenを使用していますが、Twenty Fifteenやその他のテーマでもほとんど同様の手順です。 まず、Twenty Sixteenのテーマフォルダにある「page.php」の中身をコピーしたものを、ファイル名「page-nosidebar.php」としてテーマフォルダ直下に作成します。続いてその中身を以下のように修正します。

twentysixteen/page-nosidebar.php
<?php
/**
 * Template Name: page-nosidebar
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages and that
 * other "pages" on your WordPress site will use a different template.
 *
 * @package WordPress
 * @subpackage Twenty_Sixteen
 * @since Twenty Sixteen 1.0
 */

get_header(); ?>

<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">
        <?php
        // Start the loop.
        while ( have_posts() ) : the_post();

            // Include the page content template.
            get_template_part( 'template-parts/content', 'page' );

            // If comments are open or we have at least one comment, load up the comment template.
            if ( comments_open() || get_comments_number() ) {
                comments_template();
            }

            // End of the loop.
        endwhile;
        ?>

    </main><!-- .site-main -->

    <?php get_sidebar( 'content-bottom' ); ?>

</div><!-- .content-area -->

<?php // get_sidebar(); ?>
<?php get_footer(); ?>

上記の「page-nosidebar.php」が「page.php」と違うのは以下の2箇所だけです。

  • 冒頭3行目にTemplate Name : page-nosidebarを追記している
  • 末尾40行目のサイドバー表示部分であるget_sidebar();をコメント化している
Template Name : page-nosidebarを記述することで、wordpressの固定ページ作成画面の「ページ属性」→「テンプレート」から「page-nosidebar」を選択できるようになります。このTemplate Nameがないと選択肢としてでません。 あとはget_sidebar();をコメント化してサイドバーを消しています。 これだけでサイドバーを表示しない固定ページ用のページテンプレートが完成です。

そして後は以下のように「page-nosidebar.php」を適用したい固定ページ作成画面で、「テンプレート」を「page-nosidebar」にして公開します。

chose-template.png

以下のようにサイドバーが表示されない固定ページになります。以下はテーマとしてTwenty Sixteenを使用しています。

page-nosidebar.png 以上でページテンプレートの作成と適用は完了です。

まとめ

上記のように自由にカスタマイズしたページテンプレートを任意の固定ページに適用できると、wordpressを使ってできることの幅が広がると思います。なお、上記では作成したページテンプレートをテーマフォルダ直下に置きましたが、wordpress3.5ぐらいからはテーマフォルダ内のフォルダも再帰的にチェックしてページテンプレートを見つけてくれるようなので、整理したい場合はフォルダを作成して用途が同じページテンプレートをまとめて入れておくといいかもしれません。

関連記事

開発アプリ

nanolog.app

毎日の小さな出来事をなんでも記録して、ログとして残すためのライフログアプリです。