WordPressは、ブログだけでなく、コーポレートサイトやポートフォリオ、
ランディングページなど、さまざまなウェブサイトを構築するための柔軟なプラットフォームです。
その中でも「固定ページ」は、投稿とは異なり、ブログ記事以外のコンテンツを表示するために使われます。
例えば、会社概要ページやお問い合わせページなどに使用されることが一般的です。
本記事では、WordPressの固定ページテンプレートを作成する方法について詳しく解説します。
これにより、カスタマイズ性の高いページを作成し、
ウェブサイトの機能性とデザインを向上させることができます。
固定ページテンプレートとは？
固定ページテンプレートは、特定のページだけに適用する
デザインやレイアウトをカスタマイズできるファイルのことです。
WordPressでは、通常の固定ページのテンプレートに加えて、
特定のページだけで異なるデザインを使用したい場合や、
ページごとに特別な機能を追加したい場合に、カスタムテンプレートを作成します。
WordPressのテーマは通常、page.phpというテンプレートファイルを使用してすべての固定ページを表示しますが、
テンプレートファイルをカスタマイズすることで、
異なるレイアウトやデザインを持つページを作成できます。
固定ページテンプレート作成の準備
まず、WordPressのテーマディレクトリ内にあるpage.phpを確認しておきましょう。
これが、デフォルトの固定ページのテンプレートです。
次に、新しい固定ページテンプレートを作成する準備を進めます。
ファイルの作成
WordPressのテーマディレクトリに移動し、新しいPHPファイルを作成します。
このファイルがカスタムテンプレートになります。
例えば、page-custom.phpという名前でファイルを作成します。
テンプレートヘッダーの追加
固定ページテンプレートファイルの先頭には、テンプレート名を指定するコメントを追加します。
これにより、WordPressの管理画面でテンプレートが選択できるようになります。
<?php
/*
Template Name: カスタム固定ページ
*/
?>
この部分がWordPressにテンプレートとして認識されるためのコードです。
テンプレート名は自由に決められますが、わかりやすい名前を付けると良いでしょう。
例えば「カスタム固定ページ」といった名前にすると、管理画面での選択が簡単になります。
固定ページテンプレートの基本構造
テンプレートファイルは、WordPressテーマの他のテンプレートと同様に、
基本的なHTMLとPHPで構成されます。以下に、固定ページテンプレートの基本構造を示します。
<?php
/*
Template Name: カスタム固定ページ
*/
get_header(); // ヘッダーを読み込み
?>
<main>
<section>
<h1><?php the_title(); // ページタイトルを表示 ?></h1>
<div>
<?php
// ページのコンテンツを表示
if ( have_posts() ) :
while ( have_posts() ) : the_post();
the_content();
endwhile;
endif;
?>
</div>
</section>
</main>
<?php get_footer(); // フッターを読み込み ?>
この基本構造では、get_header()とget_footer()関数でWordPressの
共通ヘッダーとフッターを読み込み、the_title()とthe_content()でページのタイトルとコンテンツを表示します。
条件分岐を使ってカスタム機能を追加
テンプレートファイルに条件分岐を加えることで、特定のページでのみ異なるコンテンツを表示したり、
特定の機能を追加することができます。
<?php
/*
Template Name: カスタム固定ページ
*/
get_header();
?>
<main>
<section>
<h1><?php the_title(); ?></h1>
<div>
<?php if ( is_page('contact') ) : ?>
<p>このページはお問い合わせページです。</p>
<?php else : ?>
<p>通常の固定ページです。</p>
<?php endif; ?>
</div>
</section>
</main>
<?php get_footer(); ?>
この例では、ページのスラッグが「contact」の場合には特別なメッセージを表示し、
それ以外の場合には通常の固定ページとしてのメッセージを表示します。
このように、条件分岐を使うことで、ページごとのカスタマイズが可能です。
テンプレートファイルのカスタマイズ
固定ページテンプレートを作成したら、そのデザインや機能を自由にカスタマイズすることができます。
ここでは、いくつかのカスタマイズ例を紹介します。
カスタムフィールドを使用する
WordPressのカスタムフィールド機能を使って、
テンプレート内に動的なコンテンツを表示することが可能です。
たとえば、固定ページに特定の情報を入力し、それをテンプレート内で表示したい場合に役立ちます。
<?php
/*
Template Name: カスタム固定ページ
*/
get_header();
?>
<main>
<section>
<h1><?php the_title(); ?></h1>
<div>
<?php the_content(); ?>
<p>カスタムフィールドの値: <?php echo get_post_meta(get_the_ID(), 'custom_field_name', true); ?></p>
</div>
</section>
</main>
<?php get_footer(); ?>
この例では、get_post_meta()関数を使用して、
カスタムフィールドに入力されたデータをテンプレート内に表示しています。custom_field_nameには、カスタムフィールドのキーを指定します。
固定ページにサイドバーを追加
固定ページテンプレートにサイドバーを追加することで、より複雑なレイアウトを作成することができます。
WordPressのget_sidebar()関数を使って、サイドバーを呼び出すことが可能です。
<?php
/*
Template Name: サイドバー付きページ
*/
get_header();
?>
<main>
<div class="content-with-sidebar">
<section class="main-content">
<h1><?php the_title(); ?></h1>
<div><?php the_content(); ?></div>
</section>
<aside class="sidebar">
<?php get_sidebar(); ?>
</aside>
</div>
</main>
<?php get_footer(); ?>
この例では、メインコンテンツとサイドバーをdivタグで囲んでレイアウトを作成しています。
CSSを使って、サイドバーとメインコンテンツのスタイルを調整することができます。
固定ページテンプレートの選択方法
カスタム固定ページテンプレートを作成した後、
WordPressの管理画面からそのテンプレートを特定の固定ページに適用する必要があります。
以下の手順でテンプレートを選択できます。
- WordPress管理画面にログインします。
- 固定ページ一覧から編集したいページを選択して「編集」をクリックします。
- 右サイドバーの「ページ属性」セクションに移動します。
- 「テンプレート」ドロップダウンメニューから、作成したカスタムテンプレートを選択します。
- 「更新」ボタンをクリックして変更を保存します。
これで、選択したテンプレートがそのページに適用されます。
固定ページテンプレートの活用例
最後に、固定ページテンプレートを使った具体的な活用例をいくつか紹介します。
ランディングページの作成
カスタムテンプレートを使用して、通常のヘッダーやサイドバーを削除し、
シンプルなランディングページを作成することができます。
これにより、製品やサービスの紹介ページを効果的にデザインすることができます。
カスタムレイアウトの採用
カスタムレイアウトを作成し、ページごとに異なるデザインを適用することができます。
例えば、会社概要ページにはフルスクリーンの画像を表示し、
お問い合わせページにはフォームを中央に配置するなど、
各ページの目的に応じたレイアウトを作成することが可能です。
シングルページアプリケーション（SPA）の実装
固定ページテンプレートを使用して、
JavaScriptを活用したシングルページアプリケーション（SPA）を構築することも可能です。
特定の固定ページでReactやVue.jsなどのフレームワークを利用し、
動的なユーザー体験を提供することができます。
まとめ
WordPressの固定ページテンプレートを作成することで、
特定のページに独自のデザインや機能を追加することが可能になります。
この記事では、テンプレートの作成方法や基本的なカスタマイズの例を紹介しました。
テンプレートを活用することで、より高度で柔軟なサイトを作成でき、
訪問者にとって魅力的なウェブサイトを提供することができます。
固定ページテンプレートは、WordPressサイトのカスタマイズにおいて非常に強力なツールです。
ぜひ、自分のサイトに合ったテンプレートを作成し、独自のデザインや機能を追加してみてください。