アプリケーションページの作成ガイド (カスタムテンプレート)
このガイドでは、「Director’s Console」アプリケーションを表示するための専用のページ設計図（カスタムページテンプレート）を作成します。
なぜ「カスタムページテンプレート」が必要なのか？
WordPressでページを作る際、通常は投稿画面や固定ページの編集画面を使います。では、なぜ今回はわざわざ「カスタムページテンプレート」という特別な設計図を作る必要があるのでしょうか？
結論から言うと、通常の投稿画面は「文章や写真」を入れるための箱であり、あなたの「Director’s Console」のような複雑なアプリケーションを入れるための箱ではないからです。
役割の違いを理解しよう
通常の投稿・固定ページ
これは、写真を飾るための「決まった形のフォトフレーム」のようなものです。中に入れる写真（コンテンツ）は自由ですが、フレーム自体の形や構造を大きく変えることはできません。WordPressのエディターは、このフレームの中にコンテンツを綺麗に流し込むためのツールです。
カスタムページテンプレート
こちらは、好きな大きさ、好きな形の絵を自由に描くための「まっさらなキャンバス」です。フレームの制約を一切受けず、HTML、CSS、JavaScriptを100%自由にコントロールできます。WordPressのエディターを完全に無視し、「このページの表示は、すべてこのPHPファイルに書かれたコードに従ってください」と命令するのが、このテンプレートの役割です。
あなたの「Director’s Console」は、たくさんの入力欄やボタンが連携して動く「アプリケーション」です。もしこの複雑なコードを通常の投稿画面に貼り付けると、WordPressがコードを勝手に書き換え、レイアウトが崩れたり、機能が動かなくなったりする危険性があります。
カスタムページテンプレートを使うことで、WordPressの余計な干渉を受けず、あなたが設計した通りのアプリケーションを、そのままの形でページに表示することができるのです。
作成手順
Step 1: template-console.phpファイルの作成
- Cursorを開き、前回作成したgeneratepress_childフォルダを開きます。
- フォルダ内で右クリックし、「新しいファイル」を選択します。
- ファイル名を template-console.php として、新しいPHPファイルを作成してください。
Step 2: テンプレートコードの記述
作成した template-console.php ファイルに、以下のコードをそのままコピー＆ペーストしてください。
<?php
/**
* Template Name: Console App
*
* @package GeneratePress
*/
// WordPressのヘッダー（サイトのタイトルやメニューなど）を読み込みます
get_header();
?>
<!-- ▼▼▼ ここからあなたのHTMLコードを貼り付け ▼▼▼ -->
<div class="container mx-auto p-4 md:p-8">
<header class="text-center mb-12">
<h1 class="text-4xl md:text-5xl font-black mb-2 uppercase text-gray-200">Director's Console 3.0</h1>
<p class="text-xl md:text-2xl font-bold text-accent">（日本語版）</p>
</header>
<main class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:items-start">
<!-- ...（以前あなたが作成したHTMLの<main>タグの中身）... -->
</main>
</div>
<!-- ...（モーダルウィンドウのHTMLなど）... -->
<!-- ▲▲▲ あなたのHTMLコードはここまで ▲▲▲ -->
<?php
// WordPressのフッター（コピーライトなど）を読み込みます
get_footer(); 【重要】貼り付けるHTMLについて
以前あなたが共有してくれたHTMLソースコードのうち、<body>タグと</body>タグの間の部分をすべて、上記の<!-- ▼▼▼と<!-- ▲▲▲の間に貼り付けてください。（<script>タグや<style>タグも、この時点では一旦すべて含めてしまって大丈夫です）
Step 3: テンプレートの適用
最後に、この新しい設計図を、どのページで使うかをWordPressに教えます。
- WordPressの管理画面に戻り、「固定ページ」→「固定ページ一覧」を開きます。
- 以前作成した「Director’s Console」ページ（またはv1.0用のページ）の編集画面を開きます。
- 画面右側の設定パネルにある「テンプレート」という項目を探します。（「ページ属性」の中にあるかもしれません）
- ドロップダウンメニューから、先ほど作成した「Console App」を選択します。
- ページを「更新」します。
バージョン管理：複数のアプリケーションを共存させるプロフェッショナルな方法
「Director’s Console」のように今後バージョンが増えていくツールでは、バージョンごとにカスタムページテンプレートを分けるのが、まさにプロが行う正しい開発方法です。カスタムページテンプレートは、必要なだけ何個でも作れます。
なぜ、バージョンごとにテンプレートを分けるのか？
v1.0、v2.0、v3.0では機能が異なるため、それぞれが必要とするJavaScriptやCSS、HTMLの構造が違ってくるからです。これを家の設計図で例えるなら、
- template-v1.php: シンプルな「リビング」の設計図
- template-v2.php: 特殊な音響設備を持つ「ホームシアター」の設計図
- template-v3.php: 防音壁や録音機材を備えた「音楽スタジオ」の設計図
それぞれの部屋（バージョン）には、専用の設計図（テンプレート）を用意するのが一番理にかなっていますよね。
具体的な実装方法
1. テンプレートファイルをバージョンごとに作成する
generatepress_childフォルダの中に、以下のようにファイルを作成します。
- template-v1.php
- template-v2.php
- template-v3.php
各ファイルの冒頭には、どのテンプレートか分かるように名前を付けます。
// 例 (template-v2.php):
<?php
/**
* Template Name: Console App v2
*/
// ... v2用のHTMLコード ...
?>2. CSSとJavaScriptファイルもバージョンごとに作成・整理する
generatepress_childフォルダの中にcssとjsという新しいフォルダを作り、その中に各バージョン専用のファイルを整理すると、さらに綺麗になります。
- css/v1-style.css
- css/v2-style.css
- css/v3-style.css
- js/v1-app.js
- js/v2-app.js
- js/v3-app.js
※すべてのバージョンで共通して使いたいデザインは、子テーマのルートにあるstyle.cssに書いておくと効率的です。
3. functions.phpで、正しいCSS/JSを読み込むように指示する
最後に、functions.phpを編集して、「v2のページではv2のCSSとJSを、v3のページではv3のCSSとJSを読み込んでね」とWordPressに命令します。
// functions.php
function directors_console_scripts() {
// 親テーマのスタイルシートを読み込む
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
// 子テーマの共通スタイルシート（style.css）を読み込む
wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parent-style' ) );
// --- バージョンごとのスクリプトとスタイルの読み込み ---
// もしv1のページなら
if ( is_page_template('template-v1.php') ) {
wp_enqueue_style( 'console-v1-style', get_stylesheet_directory_uri() . '/css/v1-style.css' );
wp_enqueue_script( 'console-v1-app', get_stylesheet_directory_uri() . '/js/v1-app.js', array(), '1.0', true );
}
// もしv2のページなら
if ( is_page_template('template-v2.php') ) {
wp_enqueue_style( 'console-v2-style', get_stylesheet_directory_uri() . '/css/v2-style.css' );
wp_enqueue_script( 'console-v2-app', get_stylesheet_directory_uri() . '/js/v2-app.js', array(), '1.0', true );
}
// もしv3のページなら
if ( is_page_template('template-v3.php') ) {
wp_enqueue_style( 'console-v3-style', get_stylesheet_directory_uri() . '/css/v3-style.css' );
wp_enqueue_script( 'console-v3-app', get_stylesheet_directory_uri() . '/js/v3-app.js', array(), '1.0', true );
}
}
add_action( 'wp_enqueue_scripts', 'directors_console_scripts' );この構成にすることで、将来バージョンが増えても、お互いのコードが干渉することなく、非常に整理された状態でアプリケーションを拡張していくことができます。
コメント