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

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つのオプション、ElementorBeaver 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サイト作成について質問がありませんか?ぜひ以下のコメント欄でお知らせください!

Author
著者

Yūto Ōmura

イギリスから日本へ帰国後、翻訳者として8年従事。英国の大学ではメディア・映像を専攻し、以来、日英両言語にて10年以上複数のウェブサイトおよび動画メディアを運営。プライベートでは、料理をしたり、家族で小旅行に行ったりするのが好きです!