【WordPress】固定ページの実装方法

はじめに

この記事では、WordPress で固定ページを作成し、Web ページとして表示する実装方法を記載します。
Docker でローカル環境を構築済みの状態からスタートします。

開発環境

開発環境は以下の通りです。

• Windows11
• Docker Desktop 4.36.0
• WordPress 6.9.0
• MySQL 9.5.0
• PHP 8.3

実装方法の選択

WordPressで固定ページを実装する方法は大きく2つあります。

方法1: 管理画面のGUIエディタで作成（コード不要）

• ブロックエディタで記事を書く感覚で作成
• コーディング知識不要

方法2: カスタムテンプレートをコーディング

• PHPファイルを作成してHTML/CSS/PHPを自由にコーディング
• 細かいCSSカスタマイズが可能

この記事では、両方の方法を説明します。

方法1: 管理画面で固定ページを作成

WordPressの初期設定

サイト情報の入力

http://localhost:8080 にアクセスし、WordPress の初期設定を行います。
サイトのタイトル、ユーザー名、パスワード、メールアドレスを入力して「WordPress をインストール」をクリックします。

管理画面へログイン

インストールが完了したら、設定したユーザー名とパスワードで管理画面にログインします。

ログインすると、WordPress のダッシュボードが表示されます。

固定ページの作成

新規ページの追加

左側のメニューから「固定ページ」→「固定ページを追加」をクリックします。

ページタイトルと内容の入力

ページエディタが表示されるので、タイトルと本文を入力します。
WordPress 6.9 では、ブロックエディタ（Gutenberg）が標準で使用されます。

タイトル: 会社概要
本文: 
当社は2025年に設立されたテクノロジー企業です。
最新の技術を活用し、お客様のビジネスを支援します。

ブロックエディタでは、「+」ボタンをクリックすることで、段落、見出し、画像、リストなど様々なブロックを追加できます。

ページの公開

右上の「公開」ボタンをクリックし、確認画面でもう一度「公開」をクリックします。
公開が完了すると、「ページを表示」リンクが表示されます。

ページの表示確認

公開ページへのアクセス

「固定ページを表示」をクリックします。
作成した固定ページが表示されます。

デフォルトでは、ページのURLはタイトルから自動生成されます。
この例では http://localhost:8080/会社概要/ となります。

方法2: カスタムテンプレートをコーディング

より自由度の高いデザインやレイアウトを実現するには、PHPでカスタムテンプレートを作成します。

テンプレートファイルの準備

テーマディレクトリの確認

Dockerコンテナ内のテーマディレクトリを確認します。

docker exec -it wordpress-app ls /var/www/html/wp-content/themes

デフォルトでは twentytwentyfive テーマが使用されています。

テンプレートファイルの作成

ローカルに page-about.php ファイルを作成します。

page-about.php

<?php
/*
Template Name: 会社概要テンプレート
*/
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php wp_title(); ?></title>
    <?php wp_head(); ?>
    <style>
        body {
            font-family: 'Helvetica Neue', Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }
        .custom-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 60px 20px;
            text-align: center;
        }
        .custom-header h1 {
            font-size: 3em;
            margin: 0;
            font-weight: bold;
        }
        .custom-content {
            max-width: 800px;
            margin: 40px auto;
            padding: 40px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .custom-content p {
            line-height: 1.8;
            color: #333;
            font-size: 1.1em;
        }
        .company-info {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }
        .info-card {
            padding: 20px;
            background: #f8f9fa;
            border-left: 4px solid #667eea;
            border-radius: 4px;
        }
        .info-card h3 {
            margin-top: 0;
            color: #667eea;
        }
    </style>
</head>
<body <?php body_class(); ?>>

<div class="custom-header">
    <h1><?php the_title(); ?></h1>
</div>

<div class="custom-content">
    <?php
    while (have_posts()) : the_post();
        the_content();
    endwhile;
    ?>
    
    <div class="company-info">
        <div class="info-card">
            <h3>設立年</h3>
            <p>2025年</p>
        </div>
        <div class="info-card">
            <h3>事業内容</h3>
            <p>Webシステム開発</p>
        </div>
        <div class="info-card">
            <h3>所在地</h3>
            <p>東京都</p>
        </div>
    </div>
</div>

<?php wp_footer(); ?>
</body>
</html>

Template Name の後に半角スペースを入れないように注意してください。また、このコメントが認識されることで、管理画面でテンプレートを選択できるようになります。

Dockerコンテナへファイルをコピー

作成したテンプレートファイルをコンテナ内のテーマディレクトリにコピーします。

docker cp page-about.php wordpress-app:/var/www/html/wp-content/themes/twentytwentyfive/

テンプレートの適用

固定ページでテンプレートを選択

WordPress管理画面で固定ページを編集（または新規作成）します。
右側のパネルから「テンプレート」セクションを探し、作成した「会社概要テンプレート」を選択します。

ページを更新

「更新」または「公開」ボタンをクリックして、テンプレートを適用します。

カスタムテンプレートの確認

ページを表示すると、独自にデザインしたレイアウトが適用されていることが確認できます。

CSSのカスタマイズ

カスタムテンプレートでは、<style> タグ内に直接CSSを記述できます。
より本格的な開発では、別ファイルとしてCSSを分離することも可能です。

外部CSSファイルの使用

style.css を作成し、テンプレートから読み込みます。

style.css

/* カスタムスタイル */
.custom-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 60px 20px;
    text-align: center;
    animation: fadeIn 1s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.info-card:hover {
    transform: translateY(-5px);
    transition: transform 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

テンプレートファイルの <head> 内で読み込みます。

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css">

動的コンテンツの追加

PHPを使って、データベースから動的にコンテンツを取得することもできます。

page-members.php

<?php
/*
Template Name: メンバー一覧
*/
get_header();
?>

<div class="members-container">
    <h1>チームメンバー</h1>
    
    <?php
    // カスタムフィールドからメンバー情報を取得
    $members = array(
        array('name' => '山田太郎', 'position' => 'CEO'),
        array('name' => '佐藤花子', 'position' => 'CTO'),
        array('name' => '鈴木一郎', 'position' => 'デザイナー')
    );
    
    foreach ($members as $member) :
    ?>
        <div class="member-card">
            <h3><?php echo esc_html($member['name']); ?></h3>
            <p><?php echo esc_html($member['position']); ?></p>
        </div>
    <?php endforeach; ?>
</div>

<?php get_footer(); ?>

複数ページの作成とフロントページの設定

追加ページの作成

同様の手順で、複数の固定ページを作成します。

- トップページ (home)
- 会社概要 (about)
- サービス (services)
- お問い合わせ (contact)

フロントページの設定

「設定」→「表示設定」から、サイトのトップページを固定ページに設定できます。

1. 「ホームページの表示」で「固定ページ」を選択
2. 「ホームページ」で作成したトップページを選択
3. 「変更を保存」をクリック

これで、http://localhost:8080/ にアクセスすると、指定した固定ページが表示されます。

参考

• WordPress Support - Pages
• WordPress テンプレート階層
• WordPress テーマ開発
• Docker Documentation