カスタムWordPressページテンプレートの作成方法

Webサイトのデザインには多くの時間がかかることがあります。高機能なWordPressテーマやページビルダーを使っていても、ページの作成や編集に何時間も費やすことがあるでしょう。また、既成レイアウトではなく、自分だけのカスタムWordPressページテンプレートを作成したいと考える方もいるかもしれません。

WordPressのテンプレートを作成しておけば、Webサイト内の任意のページに適用できます。そのため、すべてのページを手動で更新しなくても、サイト全体のデザインを柔軟に調整できます。

この記事では、カスタムテンプレートを使う理由と、実際にWordPressページテンプレートを作成する方法について解説します。

それでは始めましょう。

カスタムWordPressページテンプレートの作成方法（2通り）

ここまで見てきたように、カスタムのWordPressページテンプレートを作成することで、サイトの見た目をより自由にカスタマイズできるようになります。また、作業時間の短縮にもつながります。

幸い、WordPressではページテンプレートを作成する方法がいくつか用意されています。例えば、テンプレートを手動で作成してサイトにアップロードする方法や、ページビルダープラグインを使う方法があります。

それぞれの方法について、詳しく見ていきましょう！

1. ページテンプレートを手動で作成する

すでにWordPressテーマの作成に慣れている方であれば、手動で作成する方法を選ぶのもおすすめです。この方法には多少のコーディング知識が必要ですが、カスタムデザインに対して高い柔軟性が得られます。

ステップ1：テンプレートファイルを作成する

まずは、お好みのテキストエディターを開き、次のコードを追加します。

<?php /* Template Name: CustomPage */ ?>

テンプレート名は自由に設定できますが、後から見てわかりやすい名前を付けるのがおすすめです。

例えば、特定の種類のブログ記事（ハウツーガイドなど）専用のページテンプレートを作成する場合、「Tutorials（チュートリアル）」といった名前にするとよいでしょう。同様に、テーマのサイドバーを含まないテンプレートを作る場合は、「PageWithoutSidebar（サイドバーなしページ）」といった名前が適しています。

コードを追加したら、そのファイルを「custompage.php」のような名前で保存します。テンプレートファイルの名前は自由に設定できますが、拡張子は必ず「.php」である必要があります。

ステップ2：テンプレートファイルをサイトにアップロードする

次に、このテンプレートファイルをWebサイトにアップロードします。その際は、FileZillaなどのFTPクライアントを使用するのが一般的です。

FTPを初めて使う場合は、ユーザー名やサーバーのホスト名などの認証情報を入力する必要があります。これらの情報は、WordPressのホスティングアカウントのダッシュボードで確認できます。

FileZillaでサイトに接続したら、wp-content/themes/フォルダに移動し、子テーマのフォルダを開きます：

次に、先ほど作成したテンプレートファイルをこのフォルダにアップロードします。

アップロードが完了すると、このテンプレートがWebサイト上で利用できるようになります。

確認するには、WordPressの管理画面にアクセスし、新しい固定ページを作成するか、既存のページを開いてください。右側の「Settings（設定）」パネルにある「Template（テンプレート）」セクションを探し、クリックすると利用可能なテンプレートの一覧が表示されます：

作成したテンプレートが一覧に表示されているはずです。ただし、そのテンプレートを選択して「Preview（プレビュー）」をクリックすると、ページが空白のまま表示されます。これは、まだテンプレートファイルに何もコードを追加していないためです。次のステップでは、このテンプレートのカスタマイズ方法をご紹介します。

ステップ3：テンプレートファイルをカスタマイズする

まずは、現在のテーマで使用されている既存のページテンプレートをコピーする必要があります。そのために、FTP経由でサイトに接続し、現在使用しているテーマのフォルダに移動します。次に、「page.php」というファイルを探して、テキストエディターで開きます。

その後、page.phpファイル内の次のコードをコピーします：

コピーが完了したら、自作のページテンプレートファイルを開き、次の行のすぐ下に先ほどのコードを貼り付けます：

<?php /* Template Name: CustomPage */ ?>

テンプレートファイルは、次のような構成になっているはずです：

これで、カスタムWordPressページテンプレートのファイルを編集できるようになりました。例えば、テンプレートからフッターを削除したい場合は、次の行を削除します：

<?php get_footer(); ?>

さらに、自分好みにカスタマイズするために、独自のPHPコードを追加することもできます。編集が終わったら、ファイルを保存してください。

その後、テンプレートを適用した投稿や固定ページに戻り、「プレビュー」をクリックすると、編集内容が反映されていることを確認できます。

2. ページビルダープラグインでテンプレートを作成する

コーディングの知識がなくても心配はいりません。自分だけのテンプレートをもっと簡単に作成する方法があります。それが、ページビルダーを使う方法です。

幸い、WordPressにはカスタムデザインを構築できるページビルダーがいくつか存在します。このセクションでは、その中でも特に人気のある2つのツール「Elementor」と「Beaver Builder」を比較してご紹介します。

ElementorでカスタムWordPressページを作成する

Elementorには、ドラッグ＆ドロップ操作で簡単にページを作成・カスタマイズできるエディターが搭載されています。ウィジェットを使ってカスタムテンプレートを作成し、Webサイト全体で使い回すことができます。また、あらかじめ用意されたElementorのテンプレートを選び、自分好みに調整することも可能です。

このチュートリアルでは、Elementorを使って基本的なWordPressページテンプレートを作成する方法をご紹介します。無料版のElementorでも、WordPressのカスタムデザインを作成し、特定のページに適用することができます。ただし、Elementor Proを利用すれば、より多くのカスタマイズ機能や便利なツールが利用可能です。

ステップ1：テンプレートをデザインする

Elementorをインストールして有効化したら、WordPressの管理画面から「Templates（テンプレート）」に移動し、「Add New（新規追加）」をクリックします：

次に、作成するテンプレートの種類を選択し、名前を付けるようElementorから求められます：

無料版を使用している場合は、「Page（ページ）」「「Section（セクション）」「Landing Page（ランディングページ）」のいずれかを選択できます。WordPressのカスタム投稿テンプレートを作成するには、Elementor Proへのアップグレードが必要です。

準備ができたら、「Create Template（テンプレートを作成）」をクリックします。すると、Elementorのエディターが起動します：

画面の左側には、ページにドラッグ＆ドロップで追加できるさまざまな要素が表示されます。ただし、作業を始める前に、テンプレートのページレイアウトを変更しておくとよいでしょう。

画面左下にある「Settings（設定）」アイコンをクリックします：

例えば「Elementor Canvas」を選ぶと、完全に空白のページが表示されます：

ページレイアウトを選択したら、ページに要素を追加していくことができます。または、既存のテンプレートをベースとして活用することも可能です。

Elementorのテンプレートにアクセスするには、フォルダーアイコンをクリックするだけです：

ここから、ブロック単位またはページ全体のテンプレートを選択できます：

その後、ページ上の任意の要素を選択して、設定を調整できます：

準備ができたら、「Publish（公開）」ボタンの横にある矢印をクリックし、「Save as Template（テンプレートとして保存）」を選択します：

次に、Elementorからテンプレートの名前を入力するよう求められます。入力後、このレイアウトはテンプレートライブラリに保存されます。

ステップ2：テンプレートをページに適用する

テンプレートの作成と保存が完了したら、Elementorで作成された任意のページに適用できます。

まず、「Pages（固定ページ）」→「Add New（新規追加）」をクリックし、「Edit with Elementor（Elementorで編集）」ボタンを選択します：

これで、新しいページがElementorエディターで開きます：

次に、フォルダーアイコンをクリックしてテンプレートライブラリを開き（先ほどの手順と同様）、「My Templates（マイテンプレート）」の中から作成したテンプレートを探します。あとは、ページにそのテンプレートを挿入し、自由にカスタマイズするだけです。

なお、Elementor Proを使用している場合は、「Theme Builder（テーマビルダー）」にもアクセスできるようになります：

この機能を使えば、ヘッダーやフッター、投稿ページ用のテンプレートなど、各要素を自由にデザインし、表示条件を設定できます。

例えば、テーマビルダーでWordPress投稿テンプレートを作成した場合、すべての投稿にそのテンプレートを適用することも可能です。

Beaver BuilderでカスタムWordPressページを作成する

Beaver Builderは、WordPressのカスタムページテンプレートを作成するのに役立つ、もう一つの便利なツールです。Elementorと同様に、このページビルダープラグインにはドラッグ＆ドロップ式のエディターが搭載されており、「モジュール」と呼ばれる多彩な要素を使ってページを構築できます。

Beaver Builderでは、作成したデザインをテンプレートとして保存することも可能です。ただし、この機能は有料版のプラグインでのみ利用できます。

このチュートリアルでは、有料版のプラグインを使用して、WordPressページテンプレートの作成方法をご紹介します。

ステップ1：テンプレートをデザインする

プラグインをインストールしてWordPressのダッシュボードで有効化したら、「Beaver Builder」→「Templates（テンプレート）」に移動し、「Add New（新規追加）」を選択します：

次に、デザインの名前とテンプレートの種類を選択するよう求められます：

その後、「Add Saved Template（保存済みテンプレートを追加）」をクリックし、「Beaver Builder（Beaver Builderを起動）」を選択します。すると、ビルダー画面が開きます：

これでテンプレートの作成を開始できます。「Modules（モジュール）」タブから要素をドラッグ＆ドロップで配置し、それぞれをクリックして設定を調整します。

または、Beaver Builderのテンプレートを使うこともできます：

変更内容に満足したら、画面右上の「Done（完了）」ボタンをクリックし、「Publish（公開）」を選択します。

ステップ2：テンプレートをページに適用する

テンプレートの作成が完了したら、Webサイト内の任意のページに適用できます。まずは編集したいページを開くか、新しいページを作成し、「Launch Beaver Builder（Beaver Builderを起動）」をクリックします：

「Templates（テンプレート）」タブから「Saved Templates（保存済みテンプレート）」を選択し、使用したいデザインを選びます：

Builderによってテンプレートがページに追加されます。あとは自由に内容を編集することができます。編集が完了したら「Done（完了）」をクリックし、「Save Draft（下書き保存）」または「Publish（公開）」を選択します。

まとめ

WordPressページテンプレートの作成方法を学ぶことで、時間や手間を節約できます。この方法を使えば、サイトデザインをより自分のニーズに合わせて柔軟に調整できるようになります。例えば、WordPressシングル投稿テンプレートなど、さまざまなレイアウトを作成できます。

この記事では、WordPressカスタムページテンプレートを作成する2つの方法を紹介しました：

• テンプレートファイルを作成し、FileZillaなどのツールを使ってテーマフォルダーにアップロードする方法
• ElementorやBeaver Builderといったページビルダープラグインを使う方法

どちらの方法も高いカスタマイズ性を備えているため、自分にとって使いやすい方を選ぶことができます。

カスタムのWordPressページテンプレートの作成やウェブサイトの構築についてご不明な点がありましたら、ぜひコメント欄でお知らせください。

本サイトのチュートリアルコンテンツは、 Hostingerの編集方針と価値観に基づき作成されています。