【WordPress】カスタムテンプレートの作り方と使い方


WordPressの固定ページごとに、レイアウトやデザインを変えたくないですか。

たとえば、固定ページごとにサイドバーのデザインを変更し、それぞれのページに合った広告やナビゲーションを配置するために。

それを可能にするのが『カスタムテンプレート』。

固定ページ限定なので、ご注意を。

以下で、『カスタムテンプレートの作り方と使い方』をご説明します。ぜひとも、導入してください。

自由に作れる「カスタムテンプレート」

カスタムテンプレートの可能性は無限大。

カスタムテンプレートとは?

固定ページ限定のテンプレートのことで、固定ページ毎にテンプレートファイルを変更できます。

デザインを変更したい「固定ページ」があれば、編集ページの右サイドバーより選択。

WordPressを使わずに「Webサイト」を作成する時は、1ページ毎に1ファイルを作成し、個々のページ毎にレイアウトやデザインを変えれます。

カスタムテンプレートを使えば、WordPressで、それと同様なことが可能。

スポンサーリンク

カスタムテンプレートの優先順位

テンプレートファイルには、優先順位があり、順位が高いテンプレートから適用されます。

カスタムテンプレートもテンプレートファイルなので、この規制を受けますが、固定ページの優先順位において、カスタムテンプレートは最も優先されるテンプレートになります。

つまり、カスタムテンプレートを選択すると、必ずカスタムテンプレートの内容が適用されます。

以下に固定ページの優先順位を記載します。(❶が最も高い優先順位

固定ページの優先順位

カスタムテンプレート
❷page-スラッグ名.php
❸page-ID番号.php
❹page.php
❺singular.php
❻index.php

カスタムテンプレートの作り方

カスタムテンプレートの作り方は、簡単。

①PHPファイルを作成

テンプレートとなるPHPファイル(○○.php)を作成する。

ファイル名は、WordPressで既に存在するテンプレート名・テンプレートパーツ名以外であれば、何でもOK。例:car.php

⇒【WordPress】テーマのテンプレートファイルの種類と使い方

⇒【WordPress】テンプレートパーツの種類と使い方

そして、作成したPHPファイルを、テーマの直下に配置するか、それとも「my-templates」というフォルダを作成して、そのフォルダ内に配置します。

/themes/テーマ名
/themes/テーマ名/my-templates

子テーマを作成している場合、どちらかのテーマ内に配置します。配置の要領は、上記と同じ。※親テーマと子テーマの両方に、同じファイル名で作成した場合は、子テーマ側が優先されます。

/themes/親テーマ名
/themes/親テーマ名/my-templates
/themes/子テーマ名
/themes/子テーマ名/my-templates
スポンサーリンク

②ファイル内に「カスタムテンプレートの表記」を追加

そして、作成したファイルに通常どおり、「ページの内容(HTMLなど)」を記述し、最上部に以下の記述を加えるだけ。

<?php 
/* 
Template Name: テンプレート名 
*/ 
?>

※テンプレート名は、選択画面に出る名称。任意で記入してください。

もし、header.phpの呼び出しコード(<?php get_header(); ?>)をカスタムテンプレートの最上部に加える場合は、1つにまとめることができます。

<?php 
/* 
Template Name: テンプレート名 
*/ 

get_header(); ?>

③テーマの編集に追加される

「テーマの編集」画面の右メニューに、『ファイル名+固定ページテンプレート』のファイルが追加されます。

”固定ページテンプレート”という文言も追加されるので、区別しやすい。

カスタムテンプレートの使い方

①「固定ページ編集画面」の右サイドバーに「テンプレート選択の項目」が追加されます。何も操作しなければ、デフォルトテンプレートになっています。

②作成したカスタムテンプレートに変更する。以下の図は、テンプレート名を「WordPress」で設定した場合。

カスタムテンプレート利用の例

一般的なカスタムテンプレートの使い方は、通常の固定ページと同様にWordPressループを利用し、編集画面で固定ページの内容を書き込んで使います。

WordPressループとは?

WordPressの投稿を表示するために、使われるPHPコードのこと。WordPressループを利用すると、編集ページに記入した内容が個々のページに出力されます。

以下のような記述がされます。


<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
ループ処理
<?php endwhile; ?>
<?php endif; ?>

また、カスタムテンプレートによる変更箇所は、メインコンテンツ以外の、サイドバーやフッターの変更や、ページ内容にあった画像の追加などだと思います。

ですが、僕は発想を変えて、カスタムテンプレートを利用しています。

以下で、僕の利用方法をご紹介します。

僕のカスタムテンプレートの使い方

僕は、1つの固定ページに1つのカスタムテンプレートを作成し、WordPressループも利用しません

そして、固定ページの編集画面を使わずに、直接、カスタムテンプレートに内容を書き込んでいます。※編集ページには、何も書き込みません。

WordPressの編集画面は、非常に便利なのですが、編集できるHTMLの箇所が一ヶ所だけに限られます。通常であれば、メインコンテンツのみ。

1つのページで複数箇所の編集をするのであれば、カスタムフィールドを活用するしかありません。

もし、カスタムテンプレートを利用すれば、1つのページ全体を編集できるので、好きな場所に、コメントや広告、画像を追加でき、Webデザインの自由度はMAXになります♪

より自由なレイアウトデザインのためにも、固定ページに関しては、個々にカスタムテンプレートを利用してみてください。

スポンサーリンク
ページ先頭へ