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

Posted on by

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の管理画面からそのテンプレートを特定の固定ページに適用する必要があります。
以下の手順でテンプレートを選択できます。

  1. WordPress管理画面にログインします。
  2. 固定ページ一覧から編集したいページを選択して「編集」をクリックします。
  3. 右サイドバーの「ページ属性」セクションに移動します。
  4. 「テンプレート」ドロップダウンメニューから、作成したカスタムテンプレートを選択します。
  5. 「更新」ボタンをクリックして変更を保存します。

これで、選択したテンプレートがそのページに適用されます。

固定ページテンプレートの活用例

最後に、固定ページテンプレートを使った具体的な活用例をいくつか紹介します。

ランディングページの作成

カスタムテンプレートを使用して、通常のヘッダーやサイドバーを削除し、
シンプルなランディングページを作成することができます。
これにより、製品やサービスの紹介ページを効果的にデザインすることができます。

カスタムレイアウトの採用

カスタムレイアウトを作成し、ページごとに異なるデザインを適用することができます。
例えば、会社概要ページにはフルスクリーンの画像を表示し、
お問い合わせページにはフォームを中央に配置するなど、
各ページの目的に応じたレイアウトを作成することが可能です。

シングルページアプリケーション（SPA）の実装

固定ページテンプレートを使用して、
JavaScriptを活用したシングルページアプリケーション（SPA）を構築することも可能です。
特定の固定ページでReactやVue.jsなどのフレームワークを利用し、
動的なユーザー体験を提供することができます。

まとめ

WordPressの固定ページテンプレートを作成することで、
特定のページに独自のデザインや機能を追加することが可能になります。
この記事では、テンプレートの作成方法や基本的なカスタマイズの例を紹介しました。
テンプレートを活用することで、より高度で柔軟なサイトを作成でき、
訪問者にとって魅力的なウェブサイトを提供することができます。

固定ページテンプレートは、WordPressサイトのカスタマイズにおいて非常に強力なツールです。
ぜひ、自分のサイトに合ったテンプレートを作成し、独自のデザインや機能を追加してみてください。