WordPress固定ページ（page.php）の作り方と活用法

2024年6月26日

小ネタ君

WordPressの固定ページを作成するためには、単に管理画面からページを追加するだけではなく、テンプレートファイルを適切に作成・カスタマイズすることが重要です。
本記事では、page.phpの作り方からその活用法、さらにデザインのカスタマイズ方法まで、詳しく解説していきます。

固定ページとは？投稿ページとの違い

固定ページとは、ブログ記事とは異なり、恒常的なコンテンツを提供するためのページです。
通常、「お問い合わせ」や「会社概要」、「サービス内容」などに使用されます。

固定ページ:
永続的なコンテンツに適しています。例えば、「プライバシーポリシー」や「利用規約」など、長期間にわたって内容が大きく変わらないページが該当します。
投稿ページ:
ブログ記事など、時系列で管理されるコンテンツに適しています。最新の情報を提供することが目的であり、「ニュース」や「お知らせ」などが典型的な例です。

固定ページは、サイト全体の基本構造やナビゲーションに重要な役割を果たします。
そのため、適切に設計し、カスタマイズすることが求められます。

固定ページ（page.php）の基本構造

page.phpは、WordPressの固定ページの表示に使用されるテンプレートファイルです。
基本的な構造は以下の通りです。

<?php
get_header();
if ( have_posts() ) :
    while ( have_posts() ) : the_post();
        the_content();
    endwhile;
endif;
get_footer();
?>

上記サンプルコードの解説は下記になります。

get_header();:
ヘッダーを読み込む。これにより、テーマのheader.phpファイルの内容が挿入されます。
if ( have_posts() ) : while ( have_posts() ) : the_post();:
投稿が存在する場合、その投稿を表示するループ。固定ページは1つしか表示されないため、基本的に1回のループで完了します。
the_content();:
投稿内容を表示する。この関数は、固定ページの本文を出力します。
get_footer();:
フッターを読み込む。これにより、テーマのfooter.phpファイルの内容が挿入されます。

page.phpの基本構造は非常にシンプルですが、これをカスタマイズすることで、固定ページの表示を柔軟に変更することができます。

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

固定ページのテンプレートを作成することで、特定のページに独自のデザインや機能を追加できます。
以下の手順に従って、カスタムテンプレートを作成しましょう。

固定ページテンプレートの作成手順

テーマディレクトリに移動
- 使用しているテーマのフォルダに移動します。例: wp-content/themes/your-theme/
新しいテンプレートファイルを作成（例：page-custom.php）
- 以下のコードを含む新しいPHPファイルを作成します。

<?php
/*
Template Name: Custom Page
*/
get_header();
if ( have_posts() ) :
    while ( have_posts() ) : the_post();
        the_content();
    endwhile;
endif;
get_footer();
?>

カスタムテンプレートの指定

固定ページの編集画面に移動します。
右サイドバーの「ページ属性」セクションで、「テンプレート」のドロップダウンメニューから新しく作成したテンプレート（例：Custom Page）を選択します。
ページを更新して、カスタムテンプレートが適用されていることを確認します。

このカスタムテンプレートにより、特定の固定ページに対して独自のレイアウトやスタイルを適用することができます。

固定ページのデザインとカスタマイズ

固定ページのデザインをカスタマイズするためには、CSSやJavaScriptを使用します。
以下は基本的なカスタマイズ例です。

CSSのカスタマイズ

固定ページのデザインを変更するには、テーマのstyle.cssファイルにカスタムスタイルを追加します。

カスタマイズ例

背景色の変更: ページ全体の背景色を変更することで、視覚的なインパクトを与えることができます。
```
.page-template-custom-page {
    background-color: #f4f4f4;
}
```
フォントの変更: サイトのブランドに合わせてフォントを変更します。
```
.page-template-custom-page {
    font-family: Arial, sans-serif;
}
```

ボタンスタイルのカスタマイズ: 固定ページ内のボタンスタイルを変更することも重要です。

.page-template-custom-page .button {
    background-color: #0073aa;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
}

JavaScriptのカスタマイズ

インタラクティブな要素を追加するためには、JavaScriptを使用します。
例えば、下記のようなカスタマイズが可能です。

1. モーダルウィンドウの表示

ボタンをクリックすると表示されるモーダルウィンドウのサンプルコードです。


document.addEventListener('DOMContentLoaded', function() {
    var modal = document.getElementById('myModal');
    var btn = document.getElementById('myBtn');
    var span = document.getElementsByClassName('close')[0];

    btn.onclick = function() {
        modal.style.display = 'block';
    }

    span.onclick = function() {
        modal.style.display = 'none';
    }

    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = 'none';
        }
    }
});

2. スムーズスクロール

リンクをクリックするとページ内の指定箇所にスムーズにスクロールします。


document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
        e.preventDefault();
        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

3. トップへ戻るボタン

スクロール位置に応じて表示されるトップへ戻るボタンのサンプルです。


document.addEventListener('DOMContentLoaded', function() {
    var topButton = document.getElementById('topBtn');
    window.onscroll = function() {
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            topButton.style.display = 'block';
        } else {
            topButton.style.display = 'none';
        }
    };

    topButton.addEventListener('click', function() {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
    });
});

固定ページのSEO対策

SEO対策は、検索エンジンで上位表示させるために重要です。
固定ページでも適切なSEO対策を行うことで、サイトの評価を高めることができます。

タイトルとメタディスクリプション

タイトルタグ:
キーワードを含めた魅力的なタイトルを設定し、検索結果でクリックされやすい内容にしましょう。
例：WordPress固定ページ（page.php）の作り方と活用法
メタディスクリプション:
ページの概要とキーワードを含めることで、検索結果に表示される際のクリック率を向上させます。
例：WordPressの固定ページの作り方と活用法を詳しく解説。初心者からプロまで使えるガイドです。

見出しタグの使用

適切なH1、H2、H3タグを使用することで、コンテンツの構造を明確にし、検索エンジンが内容を理解しやすくなります。

【見出し構成のサンプル】

<h2>固定ページとは？投稿ページとの違い</h2>
<h2>固定ページ（page.php）の基本構造</h2>
<h2>固定ページのテンプレート作成</h2>
 <h3>固定ページテンプレートの作成手順</h3>
 <h3>カスタムテンプレートの指定</h3>
<h2>固定ページのデザインとカスタマイズ</h2>
 <h3>CSSのカスタマイズ</h3>
 <h3>カスタマイズ例</h3>
 <h3>JavaScriptのカスタマイズ</h3>

画像の最適化

代替テキストの設定: 画像の説明をaltタグに記載し、SEO効果を高めます。
```
<img src="example.jpg" alt="WordPress固定ページの作り方">        
```
画像のサイズの最適化: 画像ファイルのサイズを適切にすることで、ページの読み込み速度を向上させます。

固定ページの管理とメンテナンス

固定ページを長期間にわたって効果的に運用するためには、定期的な管理とメンテナンスが必要です。

定期的な更新

コンテンツが最新であることを確認し、定期的に見直します。
古い情報を更新し、新しい情報を追加することで、ユーザーにとって価値のあるページを維持します。

セキュリティ対策

プラグインやテーマの更新を怠らないようにしましょう。
定期的なバックアップも忘れずに行い、不測の事態に備えます。

参考：【初心者向け】WordPressバックアップ方法を難易度別に解説

パフォーマンスの最適化

ページの読み込み速度を改善するために、画像の最適化やキャッシュの活用などを行います。
PageSpeed Insightsなどのツールを使用して、パフォーマンスをチェックし、改善点を見つけます。

ユーザーエクスペリエンスの向上

ユーザビリティテストを行い、ユーザーがページを利用しやすいように改善します。
ナビゲーションの見直しや、モバイルフレンドリーなデザインを採用することも重要です。

まとめ