今回は、Wordpressでオリジナルのページを作成したので、それの共有をさせていただきたいと思います。
調べてもあまりオリジナルのページを作成する方法が掲載されていなかったので、誰かのお役に立てれたらいいなと思います。
テーマは、「lightning」を使用しています。完全無料で作成しています。
ちなみに、私がいう「オリジナルのページ」とは、テーマに依存しない、新しいHTML、CSS、JSを使用したページになります。
ヘッダーとフッターも新しく作成します。
とても頑張りました！
テーマに沿ってある程度サイトを作成しているような状態が前提での説明となります。
私がやったこと
・GitHubで変更を管理したい場合は、子テーマのリポジトリを作成し、そこでファイルの管理をすると、履歴が残るのでお勧めです！
（表示確認方法の検討）
作業する前に、ページの表示確認方法についてです。
私は、FTPを使用してサーバーにファイルをアップして、ワードプレスの管理画面から確認する方法をとりました。
私が挫折したこと
・Docker Desktopを使用して、ページの表示確認をしようと思いましたが、新しいWordpressが作成されたりとうまくいきませんでした。（そこまで知識がないので限界でした・・・）
そのほかにも、オリジナルのページを作成したときに表示確認する方法はいくつかあります。
1. ローカルの開発環境ツールを使う
- Local by Flywheel や XAMPP を使って簡単にWordPress環境を作る
- GUIでクリック数回でサイトを立ち上げられるので、Dockerより楽
- 実際のWordPress管理画面に入りながら編集確認できる
👉 デメリット
本番サイトとプラグインや設定が完全一致しないと「ローカルでは動くけど本番でバグる」が起きやすい
2. 本番にステージング環境を作る（安全）
- さくら、ConoHa、ロリポップなど多くのサーバーは「ステージング機能」を用意してます
- ステージング環境にコピーを作り、そこだけ編集して表示確認
- 完成したら本番へ反映
👉 デメリット
サーバー依存（提供していないレンタルサーバーもある）
3. 本番で最小リスクに確認する（実務で多い）
- GitHubで
recruit-lp.phpやrecruit-lp.jsなどLP関連だけ管理 - 本番サーバーにアップする前に、テスト用の固定ページや「非公開ページ」にだけ適用して確認する
- 不具合があればすぐ戻せる
👉 実際、WordPress案件では「一旦本番にアップして確認」が多いです
理由は「WordPressの構成（テーマ・プラグイン・DB依存）が複雑すぎて、ローカルと完全一致が難しい」から
4. Docker
もしDockerを使いたいなら、
- 最初から本番のDBとテーマ・プラグインを
wp-cliでインポート docker-compose.ymlにvolumeを設定してテーマフォルダだけを同期させる- こうするとWordPressの初期設定を毎回しなくても、本番コピーの環境で即確認できます
👉 構築コストが高い（慣れると便利ですが最初はしんどい）
今回はFTPを使用してサーバーにファイルをアップして、ワードプレスの管理画面から確認する方法についてのご紹介です！
子ページを作成
ここからは子ページを作成して編集を進めた方が、親テーマの更新をしたときにバグが生じて、ページ全体に影響する恐れがないからです。
子ページについては他のページでも紹介しているので、ご参照ください！
VScode（などのコードエディタ）でファイルの作成
VScodeなどのコードエディタを使用して、下記ファイルを作成します。
functions.php（すでにある）
page-recruit.php
header-recruit.php
footer-recruit.php
page-recruit.css
recruit-lp.js
ちなみに今回は採用ページのLPのようなページを作成したかったので、タイトルもそんな感じになっています。
ファイルの中身をあらかた書いておく
内容を少し含めて紹介します！
phpは、<?php から必ず始まり
?> は閉じなくてOK（WordPressの推奨スタイルは 最後に閉じタグを書かない）
page-recruit.php
<?php
/*
Template Name: // ここにわかりやすいテンプレート名を記載 あとで固定ページの時につかう
*/
get_header('recruit');
?>
<main class="recruit-lp">
<section class="fv">
</section>
</main>
<?php get_footer('recruit'); // → footer-recruit.php を呼び出す ?>
header-recruit.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php wp_head(); ?>
</head>
<body <?php body_class('recruit-lp'); ?>>
<header class="recruit-header">
<div class="header-inner">
</div>
</header>
footer-recruit.php
<footer class="recruit-footer">
<p>© <?php echo date('Y'); ?> 企業名. All Rights Reserved.</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>functions.php に追記（CSSとJSを読み込む）
jQueryを使う場合
<?php
// 採用LP専用のCSSとJSを読み込む
function enqueue_recruit_lp_assets() {
if (is_page_template('page-recruit.php')) {
// CSS
wp_enqueue_style(
'recruit-lp',
get_stylesheet_directory_uri() . '/recruit-lp.css',
array(),
'1.0.0'
);
// JS
wp_enqueue_script(
'recruit-lp',
get_stylesheet_directory_uri() . '/recruit-lp.js',
array('jquery'), // jQueryが必要な場合
'1.0.0',
true // フッターで読み込む
);
}
}
add_action('wp_enqueue_scripts', 'enqueue_recruit_lp_assets');
jQueryを使わない場合
wp_enqueue_script(
'recruit-lp', // ハンドル名（自由につけてOK）
get_stylesheet_directory_uri() . '/recruit-lp.js', // ファイルの場所
array(), // 依存スクリプト → 空配列にする
'1.0.0', // バージョン（キャッシュ対策用）
true // true = フッターで読み込む
);
これらのファイルを、ローカル上のフォルダの中に追加
中身は以下の形になります
/wp-content/themes/child-theme/ の中に
functions.php（すでにある）
style.css（すでにある）
page-recruit.php
header-recruit.php
footer-recruit.php
page-recruit.css
recruit-lp.js
FTPなどを使用して、サーバーにアップロード
該当のテーマフォルダ（例: /wp-content/themes/child-theme/）にアップロード
上書き保存します！
ブラウザで確認
WordPressは「テーマ内のテンプレート」を直接呼び出す仕組みではなく、
固定ページに紐づけてテンプレートを使う
仕組みで、サーバーにアップロードして、「https://example.com/page-recruit.php/」のように読み込んでも、エラーとなります！
- WordPress管理画面 → 「固定ページ」 → 「新規追加」
- 右側の「ページ属性」欄に「テンプレート」の選択肢が出る
page-recruit.phpの「/* Template Name:」で書いたやつ - そのページを公開すると、 👉 URLは
https://example.com/recruit/みたいになる - そこであなたの
page-recruit.phpの内容が表示されます 🎉
❌ エラーが出ることがある！
「公開に失敗しました。 返答が正しい JSON レスポンスではありません。」
というエラーが出ることがあります。
それについては他のページで説明しているので、ご参照ください！