WordPress固定ページテンプレートの作成方法

Webサイトのデザインって時間がかかりますよね。パワフルなWordPressテーマやページビルダーを使っていても、ページの作成や編集に何時間も費やすことがあります。一般的な既製レイアウトではなく、WordPress固定ページ用のカスタムテンプレートを作成したいと思ったことはありませんか?
WordPressテンプレートを作成すれば、サイト内のどのページにも適用できるので、各ページを手動で更新することなく、サイト全体のデザインを一気に調整することが可能になります。本記事では、カスタムページテンプレートを使うメリットと、WordPressでの作成方法を詳しく紹介します。さっそく見ていきましょう!
WordPress固定ページテンプレートの作成方法(2つの方法)
カスタムWordPress固定ページテンプレートを作れば、サイトの外観をより自由にカスタマイズできるうえ、時間の節約にもなります。
WordPressでページテンプレートを作成する方法はいくつかあります。たとえば、テンプレートを手動で作成してサイトにアップロードする方法や、ページビルダーエディターを使う方法などです。
それぞれの方法を詳しく見ていきましょう!
1.手動でページテンプレートを作成する
すでにWordPressテーマの作成方法を理解している方なら、手動でのアプローチがおすすめ。コーディングの知識が少し必要になりますが、カスタムテンプレートデザインの柔軟性がグッと高まります。
重要!このチュートリアルでは、テンプレートファイルを作成して現在のテーマにアップロードします。あらかじめ子テーマを作成しておくことをおすすめします。そうすれば、親テーマが更新されても、新しく加えた変更が失われることはありません。
ステップ1:テンプレートファイルを作成する
まずは、お好みのテキストエディタを開いて、次のコードを追加しましょう。
<?php /* Template Name:CustomPage */ ?>
テンプレート名は自由ですが、後で識別しやすい名前にしておくのがよいでしょう。
たとえば、ハウツーガイドなど特定タイプのブログ投稿用のページテンプレートを作るなら「Tutorials」。同様に、テーマのサイドバーを非表示にするテンプレートなら「PageWithoutSidebar」などの名前が分かりやすいです。
コードを追加したら、ファイルを「custompage.php」などの名前で保存します。テンプレートファイル名は自由に決められますが、.php拡張子が必須です。
ステップ2:テンプレートファイルをサイトにアップロードする
次に、このファイルをサイトにアップロードする必要があります。FileZillaなどのファイル転送プロトコル(FTP)クライアントを使うと便利です。
FTPを初めて使う場合は、ユーザー名やサーバーホスト名などの認証情報を入力する必要があります。この情報はWordPressレンタルサーバーアカウントのダッシュボードで確認可能です。
FileZillaを接続したら、wp-content/themes/ フォルダに移動し、子テーマフォルダを開きます。

そして、作成したテンプレートファイルをこのフォルダにアップロードすれば、テンプレートがサイトで使えるようになります。
確認した場合は、WordPress管理エリアに移動して新しいページを作成(または既存のページを開く)します。設定パネルで、テンプレートセクションを見つけてクリックし、オプションを表示させましょう。

リストに新しいテンプレートが表示されるはずですが、これをテンプレートとして設定してプレビューをクリックすると、空白のページが表示されます。
これはまだファイルに何も追加していないためです。次の手順でカスタマイズ方法を説明します。
ステップ3:テンプレートファイルをカスタマイズする
まずは、テーマの既存のページテンプレートをコピーしましょう。FTP経由でサイトに接続し、現在のテーマフォルダに移動します。次に、page.phpというファイルを探して、テキストエディタで開きます。
page.phpファイル内の以下のコードをコピーしましょう。

完了したら、カスタムページテンプレートファイルを開き、次の行のすぐ下にそのコードを貼り付けます。
<?php /* Template Name:CustomPage */ ?>
テンプレートファイルは次のような感じになります。

これでカスタムページテンプレートファイルを編集できるようになりました。たとえば、テンプレートからフッターを削除したい場合は、次の行を削除すればOKです。
<?php get_footer(); ?>
また、カスタムPHPコードを追加して、テンプレートをさらに細かくカスタマイズすることも可能。編集が完了したら、忘れずに変更を保存しましょう。
テンプレートを適用した投稿やページに戻ってプレビューをクリックすると、新しい変更が反映されているはずです。

2.ページビルダーエディターでページテンプレートを作成する
コーディングの知識がない方も心配ありません。ページビルダーエディターを使えば、もっと簡単に独自のテンプレートを作ることが可能です。
カスタムデザインを構築できるWordPressページビルダーはいくつも存在しています。ここでは、人気の高い2つのオプション、ElementorとBeaver Builderを見ていきましょう。
ElementorでカスタムWordPressページを構築する
Elementorにはドラッグ&ドロップエディターが搭載されており、WordPressでページを簡単に構築・カスタマイズできます。ウィジェットを使ってカスタムテンプレートを作り、サイト全体で活用できるわけです。もちろん、既製のElementorテンプレートを選んで自分好みに調整することも可能です。
このチュートリアルでは、ElementorでWordPress固定ページテンプレートを基本的に構築する方法を紹介します。ビルダーの無料版を使って、WordPressカスタムデザインを作成し、好きなページに適用できます。より多くのカスタマイズオプションや機能が欲しい場合は、Elementor Proがおすすめです。
ステップ1:テンプレートをデザインする
ElementorをWebサイトにインストールして有効化したら、テンプレートに移動して新規追加をクリックします。

Elementorは、作成するテンプレートのタイプを選択して名前を付けるよう求めてきます。

無料版を使っている場合は、ページ、セクション、またはランディングページから選べます。WordPressカスタム投稿テンプレートを作りたい場合は、Elementor Proにアップグレードしてください。
準備ができたら、テンプレートを作成をクリックしましょう。これでElementorエディターが起動します。

左側にドラッグ&ドロップできる要素が表示されていますが、始める前に、テンプレートのページレイアウトを変更したい場合もありますよね。
そのような場合は、左下隅の設定アイコンをクリックしましょう。

表示されるリストからページレイアウトを選択できます。たとえば、Elementor Canvasを選ぶと、完全に空白のページが表示されます。

ページレイアウトを選んだら、ページに要素を追加していきましょう。もしくは、既存のテンプレートをベースとして使うこともできます。
Elementorテンプレートにアクセスするには、フォルダアイコンをクリックするだけです。

ブロックまたは完全なページを選べます。

ページ上の任意の要素を選択して、設定をカスタマイズできます。

準備ができたら、公開ボタンの横にある矢印をクリックし、テンプレートとして保存を選びます。

Elementorはテンプレートの名前を入力するよう求めてきます。なお、このレイアウトはテンプレートライブラリに保存されます。
ステップ2:テンプレートをページに適用する
テンプレートを作成して保存すると、Elementorでデザインした任意のページで使えるようになります。
まず、固定ページ→新規追加をクリックし、Elementorで編集ボタンを選びましょう。

新しいページがElementorエディターで開きます。

フォルダアイコンをクリックしてテンプレートライブラリを開き(前述の通り)、マイテンプレートでテンプレートを探します。テンプレートをページに挿入し、必要に応じてカスタマイズしましょう。
Elementor Proを使っている場合は、テーマビルダーにもアクセスできます。

この機能を使えば、ヘッダー、フッター、単一投稿テンプレートなどのカスタム要素をデザインし、表示条件を設定可能。
たとえば、テーマビルダーでWordPress投稿テンプレートを作成した場合、すべての投稿に一括で適用することができます。
Beaver BuilderでカスタムWordPressページを構築する
Beaver Builderも、WordPress固定ページテンプレートの作成に役立つ優れたツール。Elementor同様に、ドラッグ&ドロップエディターと「モジュール」と呼ばれる幅広い要素が用意されています。
Beaver Builderでもデザインをテンプレートとして保存できますが、この機能はプラグインの有料版でのみ利用可能です。
このチュートリアルでは、有料版を使ってWordPress固定ページテンプレートを作る方法を紹介します。
ステップ1:テンプレートをデザインする
WordPressダッシュボードでプラグインをインストールして有効化したら、Beaver Builder→テンプレートに移動し、新規追加を選びましょう。

デザインの名前を付け、テンプレートタイプを選ぶよう求められます。

次に、保存済みテンプレートを追加をクリックし、Beaver Builderを起動を選択します。これでエディター画面に移動します。

ここからテンプレート作成を始められます。モジュールタブから要素をドラッグ&ドロップし、クリックして設定をカスタマイズ可能。
もちろん、Beaver Builderの既製テンプレートを使うこともできます。

変更に満足したら、右上隅の完了ボタンをクリックし、公開を選びます。
ステップ2:テンプレートをページに適用する
テンプレートを作成したら、Webサイトの好きなページに適用できます。ページを編集用に開く(または新しいページを作成する)ところから始め、Beaver Builderを起動をクリックしましょう。

テンプレートタブから、保存済みテンプレートを選び、作ったデザインを選択します。

Beaver Builderはテンプレートを固定ページに追加します。必要に応じて変更を加えることもできます。準備ができたら、完了をクリックし、下書き保存または公開を選んでください。
まとめ
WordPress固定ページテンプレートの作成方法を身につければ、時間と労力を大幅に節約できるだけでなく、サイトのデザインをニーズに合わせて簡単に調整することも可能になります。 WordPress単一投稿テンプレートなど、さまざまなレイアウトを自由に作成可能。
本記事では、WordPressカスタム固定ページテンプレートを構築する2つの主な方法を紹介してきました。
- FileZillaなどのツールを使って、テンプレートファイルを作成し、テーマフォルダにアップロードする方法
- ElementorやBeaver Builderなどのページビルダーエディターを使う方法
どちらの方法もカスタマイズの自由度が高いので、自分が最も使いやすいと感じる方法を選ぶ形でよいでしょう。他に、WordPress固定ページテンプレートの作成やWebサイト作成について質問がありませんか?ぜひ以下のコメント欄でお知らせください!