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

公開: 2022-05-30

WordPressテーマのページテンプレートは、Webサイト内のページのレイアウトを決定するのに役立ちます。ただし、これらのテンプレートを微調整することは、特に初心者にとっては恐ろしい場合があります。幸いなことに、WordPressは、テーマにカスタムページテンプレートを作成できるようにすることで、ページテンプレートに関してかなりの柔軟性を提供します。

サイトのカスタムページテンプレートを作成すると、サイトのレイアウトとデザインを好みに合わせて簡単に調整できます。また、ページごとに異なるヘッダーを使用するなど、カスタム要件を追加することもできます。これらの変更は、実際には異なるページまたは単一のページに適用できます。

この記事では、カスタムWordPressページテンプレートとは何か、デフォルトのページテンプレート階層、およびテーマでカスタムWordPressページテンプレートを作成する方法について説明します。

カスタムWordPressページテンプレートとは何ですか

WordPressページテンプレート階層

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

グローバルカスタムテンプレートを作成する方法
単一のページテンプレートの作成

結論

カスタムWordPressページテンプレートとは何ですか

カスタムWordPressページテンプレートは、Webサイトのデザインと雰囲気を個別に設定できるテンプレートファイルです。

たとえば、サイトにブログテーマがある場合は、サイドバーやコメントを表示しない、サイトのカスタムテンプレートを作成できます。ボックスレイアウトと全幅レイアウトでコンテンツをレンダリングするテンプレートがあるページのテンプレートを作成することもできます。作成できるページテンプレートの数に制限はありません。

ページのレンダリングは、WordPressのpage.phpファイルによって制御されます。したがって、このファイルは、ページコンテンツをレンダリングするためのデフォルトのベースとして形成され、以下に示すように、テーマファイルのルート内に配置されます。

より具体的なページテンプレートが配置されている場合は、テンプレート階層が開始されます。

WordPressページテンプレート階層

ページテンプレート階層は、行われたリクエストの性質とテーマ内での存在に応じて、WordPressがページを表示するときに選択するテンプレートファイルを決定します。

デフォルトのWordPressテンプレート階層は次のとおりです。

ページテンプレート：WordPressはページに割り当てられたテンプレートをチェックし、ページ内でこのテンプレートを使用します

page-{slug} .php ：ページにテンプレートが割り当てられていない場合、WordPressは、スラッグがページに含まれているテンプレートをチェックし、見つかった場合はそれを適用します。

スラッグは、ドメイン名の後のページURL内の部分であり、編集できます。以下は、これに関するサンプル図です。

page- {id} .php ：スラッグのあるテンプレートが見つからない場合、WordPressはレンダリングされているページのページIDを持つページテンプレートの存在を確認します。

page.php ：ページIDのテンプレートが見つからない場合、WordPressは標準のpage.phpテンプレートを使用してページをレンダリングします。

singular.php ：page.phpファイルが見つからない場合、WordPressは投稿の種類に関係なくsingular.phpファイルを使用します。

index.php ：上記のテンプレートのいずれも使用できない場合、WordPressはデフォルトでindex.phpファイルを使用してページをレンダリングします。

したがって、WordPress環境内でのページのレンダリングは、上記のページテンプレートのいずれかによって実行できます。したがって、設定する優先順位レベルを決定するのはあなた次第です。

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

テーマでのカスタムページテンプレートの作成は非常に簡単です。ただし、ページテンプレートが単一ページ用か任意のページ用かを決定する必要があります。

このガイドでは、Staxテーマでグローバルページテンプレートを手動で作成する方法と、ページの1つに単一のページテンプレートを作成する方法について説明します。

グローバルカスタムテンプレートを作成する方法

Webサイト内の任意のページでグローバルに使用できるページテンプレートを作成したい場合があります。

そのためには、まず、メモ帳、メモ帳++、崇高なテキスト、その他の好みのエディターなど、使用するテキストエディターを特定する必要があります。

これが完了したら、次の手順を実行してテンプレートファイルの作成を開始できます。

ステップ1：新しいファイルを作成し、次のコードを追加します。

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

Webサイト内で使用している可能性のある他のページテンプレートでは使用されていないテンプレート名と、サイトページを簡単に識別して関連付けることができる名前を使用することをお勧めします。

これが完了したら、新しいページテンプレートを.php拡張子で保存します。ここでは、テンプレートファイルにpagewithnofooter.phpという名前を付けます。任意の名前を使用できますが、テンプレート名と同様の名前を使用することをお勧めします。

ステップ2：ファイルに目的のコードを追加します

このステップでは、PHPまたはPHPとHTMLの両方のファイルに好みのコードを追加できます。

説明のために、ここでは、pagewithnofooter.phpファイル内のデフォルトのright-sidebar.phpファイルの内容を使用しますが、それをカスタマイズし、カスタムHTMLウェルカムテキストをレンダリングするコードを追加し、フッターを無効にします。別のWordPressテーマを使用している場合は、page.phpのコンテンツを、テーマまたはテーマに設定されている可能性のある他のテーマ定義のページテンプレート内にコピーすることもできます。

したがって、コードは次のようになります。

 <?php /*Template Name: PageWithNoFooter */ namespace Stax; use Stax\Customizer\Config; stax()->force_main_layout( 'right' ); get_header(); ?> <div <?php stax()->main_section_class(); ?>> <div class="svq-site-content"> <?php while ( have_posts() ) : the_post(); ?> <?php if ( 'yes' === stax()->get_option( Config::OPTION_SINGLE_SHOW_TITLE ) ) { stax()->get_template_part( 'template-parts/content/panel', get_post_type() ); } ?> <main class="svq-main-page"> <?php echo ' <H2>Welcome to my custom Template. You can use this template globally within your website</H2>'; ?> <?php stax()->get_template_part( 'template-parts/content/entry', get_post_type() ); ?> </main><!-- #primary --> <?php endwhile; ?> <?php get_sidebar(); ?> </div> </div> <?php //get_footer();

ステップ3：ページテンプレートをテーマファイルにアップロードします。

FilezillaなどのFTPプログラムを使用するか、ホスティングパネルを使用して、カスタムファイルをテーマファイルのルートにアップロードします。この場合、これは次のディレクトリパス内にあります。

i）wp-content>テーマ> Stax

ii）推奨：wp-content>テーマ> stax-child

これは、サイト内で子テーマを使用している場合に適用され、stax-childが子テーマです。

テーマの更新中にカスタマイズが失われないように、ページテンプレートまたはテーマ内の他のファイルのカスタマイズをカスタマイズするときに子テーマを使用することをお勧めします。

ステップ4：新しいページを作成し、それに「PageWithNoFooter」テンプレートを割り当てます

これを実現するには、WordPressダッシュボード内の[ページ]> [新規追加]セクションに移動して、ページを作成します。

ページを作成したら、「PageWithNoFooter」テンプレートをそのページに割り当て、変更を保存します。

以下は、これのサンプル図です。

これで、フロントエンドでページをプレビューすると、ページ内にフッターがレンダリングされなくなります。追加したカスタムHTMLもあります。

以下はこれに関するスクリーンショットです：

テンプレートは、レイアウトを適用する任意のページ、またはフッターを使用する予定のない任意のページで使用できます。

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

単一ページへのカスタムページテンプレートは、よりページ固有です。前述のように、「ページテンプレート」がページに割り当てられていない場合、これらのテンプレートは選択対象と見なされます。

これらのテンプレートについては、スラッグまたはページIDのいずれかでページをターゲティングできます。ページスラッグとIDのどちらを使用するかを決定する際には、Webサイトの将来の見通しを考慮することも重要です。たとえば、サイトを別のドメインに移行する場合、テンプレートファイルを作成するときにページIDを使用することは適切ではありません。代わりに、スラッグを使用する方が良いオプションと見なされます。一方、サイトが複数の人によって管理されていて、彼らがページスラッグを変更する可能性があると思われる場合は、ページテンプレートを作成するときにページIDを使用することをお勧めします。

ここでは、連絡先ページのカスタムページテンプレートを作成し、ページからフッターを無効にします。このようなテンプレートを作成するには、次の手順を実行する必要があります。

ステップ1：page.phpの内容をコピーします

このステップでは、最初にテーマファイル内でpage.phpを見つける必要があります。

ファイルを見つけたら、それを編集してその内容をコピーすることを選択します。

ステップ2：ページに新しいテンプレートを作成する

テーマファイルのルート内で、連絡先ページへのページテンプレートを作成します。 page-{id}.phpまたはpage-{slug}.phpファイルのいずれかを使用します。ここではスラッグを使用します。以下に示すように、「contact」はページスラッグであるため、テンプレートにpage-contact.phpという名前を付けます。

以下は、ファイルの場所の図でもあります。

ステップ3：page.phpファイルの内容を貼り付けます

次に、上記の手順1でコピーしたpage.phpファイルの内容を新しいpage-contact.phpファイルに貼り付ける必要があります。これを行うと、ファイルをカスタマイズして、必要なコード変更を組み込み、変更を保存できます。この場合、連絡先ページのフッターを無効にして、最終的なコードを次のように読み取ります。

 <?php namespace Stax; get_header(); ?> <div <?php stax()->main_section_class(); ?>> <div class="svq-site-content"> <?php /** * Renders the single blog post template. * * @hooked stax_show_single - 10 * @includes template-parts/single.php */ do_action( 'stax_single' ); ?> </div> </div> <?php //get_footer();

連絡先ページをプレビューすると、ページにフッターが組み込まれていないことがわかります。

以下は、最初と新しいテンプレートが適用された後のページのスクリーンショットの比較です。

フッター付きお問い合わせページ

フッターのない連絡先ページ

結論

Webサイトのカスタムページテンプレートの作成は比較的簡単です。このガイドでは、WordPressテーマ内にカスタムテンプレートを手動で作成する方法について具体的に説明しました。ここでは、無料のStaxテーマをユースケースとして使用しました。ただし、WordPressコーディング標準に準拠している他のすべてのWordPressテーマに同じ手法を適用できます。ただし、Elementorなどのページビルダーを使用するなど、カスタムページテンプレートを作成する方法は他にもあります。

この記事が、カスタムページテンプレートを手動で作成する方法についての必要な洞察を提供することを願っています。ご質問やご提案がございましたら、以下にコメントしてください。