既存のWordPressサイトに3Dページを1枚だけ足す方法｜勝てるホームページ作成会社ぞろ屋

サイト全体を作り替えなくても、3Dのページは足せます。

「3Dのサイトを作りたい」という相談を受けたとき、僕がまず提案するのはこれです。今のサイトはそのまま残して、体験ページを1枚だけ追加する。

理由は単純で、リスクが小さいからです。既存ページの検索順位も、問い合わせ導線も、社内の運用も変えずに済む。効果が薄ければ、そのページだけ下げればいい。

この記事では、WordPressの既存サイトに3Dページを1枚追加する手順を書きます。あわせて実際に踏んだ事故と、その原因も出します。技術的な話が続きますが、制作を外注する立場の方にも「何が起きうるか」は知っておいてほしい内容です。

載せ方は3通りある

まず選択肢を整理します。

形	向いている場面	手間
固定ページ＋カスタムテンプレート	既存サイトに1枚だけ足す	小
自作テーマ	サイト全体をその世界観にする	大
静的ファイルのまま別ドメイン	期間限定・キャンペーン	極小

既存サイトがある会社なら、1つめを選んでください。

2つめはサイト全体を作り替えることになるので、話の規模がまったく変わります。3つめはドメインが分かれるため、既存サイトの評価を引き継げません。キャンペーン用と割り切るならこれで十分です。

以下は1つめの手順です。

ファイルは専用フォルダに隔離する

まず置き場所です。

wp-content/themes/<テーマ名>/
├── page-experience.php     ← 体験ページのテンプレート
└── assets/xp/
    ├── css/brand.css
    ├── js/bs-core.js
    ├── js/vendor/three.module.min.js
    ├── img/
    └── media/

ポイントは assets/xp/ という専用フォルダにまとめることです。

理由は既存テーマのCSSと混ぜないため。3Dページ用のCSSは、リセット指定などが既存テーマとぶつかりやすい。同じフォルダに置くと、後から「どっちのファイルだったか」が分からなくなります。

分けておけば、不要になったときにフォルダごと消せます。

テンプレートファイルを作る

page-experience.phpを作るとWordPress管理画面のページ属性から選べるようになる

page-experience.php を作り、先頭にテンプレート名を書きます。

<?php
/* Template Name: 没入型体験ページ */
get_header();
?>
<!-- ここに、静的HTMLの <body> の中身をそのまま貼る -->
<?php
get_footer();

これだけで、WordPressの管理画面から「ページ属性」でこのテンプレートを選べるようになります。

既存のヘッダーやフッターが演出の邪魔になる場合は、get_header() を使わず自分でHTMLを書く方法もあります。ただしその場合もwp_head() と wp_footer() だけは必ず呼んでください。ここを省くと、プラグインが動かなくなったり、管理バーが出なくなったりします。

一番よく事故るのは、読み込みの1行

type=moduleが付かないと画面が真っ白になり、script_loader_tagフィルタで正常に動く

ここが本題です。実装で最も多い失敗を先に書きます。

JavaScriptの読み込みは functions.php に書きます。

add_action('wp_enqueue_scripts', function () {
    if (!is_page_template('page-experience.php')) return;

    $base = get_stylesheet_directory_uri() . '/assets/xp';
    $ver  = filemtime(get_stylesheet_directory() . '/assets/xp/css/brand.css');

    wp_enqueue_style('bs-experience', "$base/css/brand.css", [], $ver);
    wp_enqueue_script('bs-app', "$base/js/bs-core.js", [], $ver, true);
});

これで動きそうに見えます。でも動きません。

3Dのコードは「ESモジュール」という形式で書かれていて、読み込むときに type="module" という指定が必要です。ところがWordPressの標準機能は、この指定を付けてくれません。

結果、ブラウザが import という記述を理解できずエラーになり、画面が真っ白のまま止まります。

対処はこれです。

add_filter('script_loader_tag', function ($tag, $handle, $src) {
    if ($handle !== 'bs-app') return $tag;
    return sprintf('<script type="module" src="%s"></script>' . "\n", esc_url($src));
}, 10, 3);

この数行を入れ忘れるだけで、3Dは1ミリも動きません。しかもエラーの見た目が「真っ白」なので、原因がファイルの置き場所なのか読み込みなのか判断しづらい。

もし納品されたページが真っ白なら、ブラウザの開発者ツールで type="module" が付いているかを最初に見てください。

既存テーマとぶつかる5パターン

3Dページを既存サイトに載せると、テーマ側の指定と干渉します。実際に起きたものを挙げます。

症状	原因	対処
ヘッダーが二重に出る	テーマのナビと3Dページ側のナビが両方出ている	どちらかを消す
画面が縦に潰れる	親テーマの本文幅の指定	このテンプレートだけ幅指定を外す
文字が想定より太い	親テーマの文字太さの指定	3D用CSSを後ろに読ませる
横スクロールが出る	親テーマの余白やはみ出し設定	`overflow-x: hidden` を指定
スクロールがガタつく	テーマ側のスムーススクロールと二重に効いている	どちらか片方に寄せる

最後の1つは気づきにくいです。どちらも「なめらかにする」機能なので、二重にかかると逆にぎこちなくなります。テーマの設定でスムーススクロールを切るのが早いです。

キャッシュプラグインは必ず設定を変える

JavaScriptの結合と遅延読み込みは切る。ESモジュールを結合すると壊れる

これが2つめの大きな事故ポイントです。

表示速度を上げるプラグイン（AutoptimizeやWP Rocketなど）には、JavaScriptをまとめて1つにする機能があります。ファイル数が減るので通常は速くなる。

ところがESモジュールを結合すると、確実に壊れます。モジュールは「どのファイルがどれを読むか」という関係で成り立っているので、1つにまとめると関係が崩れる。

具体的には次の2つを切ってください。

JavaScriptの結合（Combine JS / JSファイルの最適化）
JavaScriptの遅延読み込み（Delay JavaScript）

厄介なのは、制作時は動いていたのに、後からプラグインを入れた時点で壊れることです。制作会社が引き渡した後に、社内の誰かが「速くしよう」と設定を変えて動かなくなる。

引き渡すときに、この2つは触らないよう伝えておくべきです。

文言を管理画面から直せるようにする

3Dページの文章を、あとから自分で直したい場合があります。

ACFというプラグインの繰り返しフィールドを使えば、管理画面から編集できるようになります。

<div class="bs-stanzas">
<?php while (have_rows('stanzas')) : the_row(); ?>
  <div class="bs-stanza">
    <?php while (have_rows('lines')) : the_row(); ?>
      <span class="bs-line"><?php echo esc_html(get_sub_field('text')); ?></span>
    <?php endwhile; ?>
  </div>
<?php endwhile; ?>
</div>

ただし1つ注意があります。

3Dページの文章は、どこで改行するかを意図して決めています。1行の長さが変わると、画面の中での文字の収まりが崩れる。

編集者に自由入力させると「1行30字」のような節が入って、型が壊れます。フィールドの説明欄に「1行12〜18字」と目安を書いておいてください。これだけで事故がかなり減ります。

公開前に見る5つ

引き渡し前、または納品を受けたときに確認する項目です。

ブラウザの開発者ツールで type="module" が付いているか
three.module.min.js が正しく読み込まれているか（エラーになっていないか）
コンソールにエラーが出ていないか
スマートフォンの実機でスクロールが引っかからないか
キャッシュプラグインがJavaScriptを結合していないか

4つめは必ず実機で見てください。パソコンのブラウザで画面幅を狭めるだけでは、実際の指の動きやスクロールの慣性は再現されません。

3Dは処理が重いので、パソコンで問題なくてもスマートフォンで引っかかることがあります。

まとめ

この記事の核心は3点です。

既存サイトがあるなら固定ページ＋カスタムテンプレートで1枚だけ足す。サイト全体を作り替えなくていい
最頻の事故は type="module" の付け忘れ。これだけで画面が真っ白になる
キャッシュプラグインのJavaScript結合と遅延読み込みは必ず切る。後から入れると壊れる

3Dのページを作るとき、難しいのは3Dそのものではありませんでした。既存のサイトと、どう共存させるかのほうが手間がかかります。

今回挙げた事故は、どれも一度は踏んだものです。特に type="module" は、原因が分かるまで時間を使いました。画面が真っ白なので、ファイルの置き場所を疑ってしまう。

ここは正直に書いておきます。この作業は、WordPressのテーマファイルを直接触ります。バックアップを取らずに触るのは危険です。テーマファイルの編集に不安があるなら、制作会社に依頼したほうが安全だと思います。

自分のサイトが今どう見えているのか、まず確かめたい方へ。URLを入れるだけで、AI検索への対応度を8つの軸で採点するツールを配っています。公式LINEに登録して「AIO」と送ってください。

https://online.zoroya.co.jp/line/open/0RvI2YIDwo6D?mtid=215Go3drIXpK

出典

実装手順・事故事例はすべて自社の3Dホームページ生成ツールの開発と、実際のWordPress移植作業で得たもの
script_loader_tag フィルタの仕様：WordPress公式リファレンス
ESモジュールの読み込み仕様：MDN Web Docs

「良いな」と思ったらシェアしてください！損はさせません

URLをコピーしました！

URLをコピーしました！