WordPressのサイトに1ページだけ独立した静的HTMLを足す方法｜公開フォルダに実フォルダを置くと本体を触らずに表示される仕組みと、ヘッダー・フッター移植の注意点

新しいサービスの紹介ページを1枚だけ、動画を使った別の作りで足したい。でもWordPressの本体やテーマは触りたくない。WordPressとページビルダーで作ったサイトを運用していると、こうした場面がよくあります。

先に結論を書きます。サーバーの公開フォルダに、ページ用の実フォルダ（例：/special/index.html）を置くのがいちばん安全です。

• ページは、WordPressとは別に静的なHTML（あらかじめ完成させたページ）として手元で作る
• 公開フォルダの直下に、ページのURLと同じ名前のフォルダを作って置く
• WordPressの仕組み上、実在するファイルやフォルダはWordPressより先に表示される
• WordPress本体・テーマ・プラグイン・データベースは一切変更しない。消せば元どおり

この記事では、EC事業者のWordPressサイトに、制作動画を使ったサービス紹介ページを1枚足した実例をもとに、仕組み・手順・ヘッダーとフッターの移植で気をつける点・公開前後の確認をまとめます。トップページだけを差し替えたい場合は、別の方法が向いています（トップページだけを静的HTMLに差し替える方法）。

なぜ実フォルダを置くとWordPressより先に表示されるのか

WordPressは、URLへのアクセスを自分の入口（index.php）に集めて「どのページを出すか」を決めています。この振り分けは、公開フォルダの .htaccess（サーバーの設定ファイル）の次の数行が担っています。

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

1・2行目は「実在するファイルもフォルダも無いときだけ」という条件です。つまり、実在するファイルやフォルダがあれば、WordPressに回さずにそのまま表示する決まりです。画像やCSSが表示されるのもこの仕組みによります。

この性質を使い、公開フォルダに special/index.html を置くと、https://example.com/special/ にアクセスしたときは、WordPressを通らずにそのHTMLが表示されます。WordPressの設定もテーマも変えていないので、他のページには影響しません。

1ページを足す3つの方法と選び方

WordPressのサイトに別デザインのページを足す方法は、主に3つあります。

方法	WordPressへの変更	元に戻す方法	向いている場面
①固定ページ＋ページビルダーで作る	固定ページが1件増える	ページを非公開にする	既存ページと同じ部品で作れるとき
②テーマに専用テンプレートを作る	テーマのファイルを追加・編集	ファイルを消す	管理画面から本文を更新したいとき
③公開フォルダに実フォルダを置く	なし	フォルダを消す	動画や独自の動きなど、既存の部品では作れないとき

①は管理画面で完結しますが、ページビルダーの部品で表現できる範囲に限られます。②はテーマを触るため、テーマの更新で消えたり、子テーマ（親テーマを書き換えずに上乗せする仕組み）の用意が必要になったりします。

既存の部品では作れないデザインで、しかも本体を一切触りたくないなら③です。実例のページは、縦型の制作動画4本と、工程をつないだ映像・商品写真を組み合わせて見せる作りでした。ページビルダーの部品では表現しにくく、③を選びました。

実例：EC事業者のサイトに紹介ページを足した構成

実例のサイトは、WordPressにページビルダー（Elementor）を組み合わせて作られていました。サーバーはSSH（コマンドでの操作）が使えずFTPのみという条件です。

• ページの本体は手元で静的ページとして完成させ、表示確認も手元で済ませた
• 公開フォルダの直下にページ用のフォルダを1つ作り、HTML・CSS・画像・動画をすべてその中にまとめた（公開したファイルは40本）
• 動画4本はWeb用に再圧縮し、1本あたり10MB以下・合計約28MBに収めた
• LINE公式アカウントのボタン4か所には、このページ専用の友だち追加URLを入れた（追加した人に案内を自動で送り、タグで経路を残す）

LINEの入口を分けておくと、このページから何人が友だち追加したかを後から数えられます。入口ごとに分ける設計はLINEの友だち追加を入口ごとに分けて計測する方法で詳しく書いています。

手順：実フォルダで1ページを足す

1. URLが空いていることを確かめる

最初に、使いたいURL（例：/special/）をブラウザで開き、404（存在しないページ）になることを確認します。実例でも、公開前にこのURLが404で空いていることを確かめてからフォルダを置きました。

同じ名前の固定ページがすでにあると、実フォルダを置いた瞬間にそのページが表示されなくなるためです。

2. ページを手元で完成させる

WordPressと切り離して、手元でページを完成させます。

ページの元データ（原稿のHTMLと、そこから完成版を作るスクリプト）を1か所に決めておくことも大切です。公開後に本番のHTMLだけを直すと、次に元データから作り直したときにその修正が消えるためです。実例では、元データから作った完成版と本番のHTMLを比べて差分が0であることを確認し、「本番を直したら元データにも同じ変更を入れる」ことを決まりとして記録しました。巻き戻りの構造は本番を直接直した修正が次の更新で消えるときの記事にまとめています。

3. ヘッダーとフッターは「今の実装」から移植する

独立したページでも、ヘッダーとフッターはサイトの他のページと同じにします。訪問者にとっては同じサイトの1ページだからです。デザインを見て作り直すのではなく、今表示されている実装をそのまま移すのが正しいやり方です。

Elementorで作られたサイトの場合、手がかりは次の場所にあります。

• フッターのHTML：テーマビルダーで作られたフッターのテンプレートが出力しているHTML
• フッターの見た目：wp-content/uploads/elementor/css/post-{テンプレートのID}.css の中にある独自CSS（Custom CSS）
• ヘッダーの追従（スクロールしても上に残る動き）：ヘッダー要素の data-settings 属性にある sticky の指定。これを見て同じ動きをCSSで再現する

4. サイトが読み込んでいないWebフォントは、こちらでも読み込まない

移植で見落としやすいのがフォントです。フッターのCSSに、サイト側で実際には読み込まれていないWebフォント（実例ではCinzelやBodoni）が指定されていることがあります。その場合、他のページのフッターは、指定どおりの書体ではなく代わりの書体で表示されています。

ここで特設ページでだけそのフォントを読み込むと、特設ページのフッターだけ見た目が変わります。移植の基準は「CSSの指定」ではなく「実際の表示」です。ブラウザの開発者ツールで他のページの実際の書体を確かめ、同じ状態に合わせます。フォントの指定が2系統になる仕組みはホームページの文字の形がページごとに違って見える原因でも解説しています。

5. 計測タグとSEOのタグを自分で入れる

実フォルダのページはWordPressを通らないため、WordPressのテーマやプラグインが自動で出していたタグは一切入りません。他のページのHTMLソースを開いて、次のものを書き出し、特設ページに入れます。

• Googleアナリティクス・タグマネージャー・広告の計測タグ
• title、description、canonical（正規URLの指定）、OGP（SNSで共有されたときの表示）

また、このページはWordPressが自動で作るサイトマップにも載りません。検索に出したいページであれば、サーチコンソールでURLを個別に送信するか、サイトマップへの追加を検討します。

6. アップロードしたら、本番のファイルを手元と照合する

アップロード後は、本番のファイルが手元と同じかを確かめます。実例ではFTPで40本を公開した後、本番のHTMLと手元のHTMLのハッシュ値（ファイルの指紋のような値）が一致することを確認しました。

あわせて、既存のページが今までどおり200（正常表示）で返るかも確かめます。実例ではトップと主要な下層ページが200のままであることを確認しました。

動画を使うページで仕上がりを上げる3つの加工

特設ページで動画や商品写真を使う場合は、素材側を少し加工するだけで仕上がりが大きく変わります。実例で使った方法をまとめます。

縦型動画からテロップの無い部分だけを切り出す

スマホ向けに作った縦型の動画（720×1280）は、上下が黒い帯とタイトルで、中央の横長の帯（縦437〜842ピクセルの範囲）だけが実際の映像でした。しかも帯の下の方にはテロップ、左上には工程名が焼き込まれています。

そこで、帯の中からさらに縦478〜790ピクセル（720×312の横長）だけを切り出すと、工程をつないだ映像もループ映像も、すべてテロップの無い素材になりました。

なお、動画を書き出す際に広く使われる形式（H.264）は、縦と横のピクセル数がどちらも偶数でないと書き出せないことがあります。切り出しや補正を重ねて奇数になったら、1ピクセル削って偶数に揃えます。

白背景の商品写真は「掛け合わせ」で背景になじませる

白い背景で撮った商品の写真を色の付いた面に置くと、白い四角が浮いて見えます。CSSの mix-blend-mode: multiply（下の色と掛け合わせる指定）を使うと、白の部分が背景の色に置き換わり、商品だけが面の上に載って見えます。背後に大きな番号や文字を置けば、写真と文字が自然に重なります。

それでも端に四角い跡が残るのは、撮影時の影で白が均一でないためです。CSSの明るさ調整では商品の色まで飛ぶため、素材側で明るい部分だけを真っ白に寄せる補正（実例では変換ツールffmpegのトーンカーブ補正）をかけてから使います。仕上げに四辺をグラデーションのマスクで薄く消すと、切れた商品の端も自然に見えます。

動画はスマホでのシーク（早送り）まで確かめる

iPhoneでは、サーバーが動画の部分読み込み（応答コード206）に対応していないと、再生できなかったり、再生位置を動かせなかったりすることがあります。公開後、動画のURLに対して部分読み込みを要求し、206が返ることを確認しておきます。実例のサーバーは対応しており、iPhoneでも再生位置を動かせました。スマホで動画が再生されないときの属性の確認はサイトの動画がスマホで再生されないときを参考にしてください。

公開後に起こりうることと、先に打っておく手

サイト側のヘッダー・フッターが変わると、特設ページだけ古いまま残る

移植したヘッダーとフッターは「写し」なので、サイト側でメニューや連絡先を変えても自動では追従しません。サイト側を変えるときの作業メモに「特設ページの写しも直す」と1行入れておきます。

同じURLの固定ページを後から作ると、そちらが表示されない

実フォルダが優先されるため、後から同じスラッグ（URLの末尾の名前）の固定ページを作っても表示されません。複数人で更新するサイトでは、フォルダ名を共有しておきます。

公開前の確認項目

実例では、公開前後に次の項目を確かめました。

• PCとスマホの両方で、横にはみ出す要素が無いか
• ブラウザのコンソールにJavaScriptのエラーが出ていないか
• 動画がPC・スマホとも再生でき、部分読み込み（206）が返るか
• LINEのボタンすべてに、このページ専用の友だち追加URLが入っているか
• 既存のトップページ・下層ページが200のままか

この方法を選ぶ判断基準

• 既存の部品では作れないデザインで、WordPress本体を触りたくない → 実フォルダ（この記事の方法）
• 既存ページと同じ部品で作れて、担当者が管理画面から文章を直したい → 固定ページ＋ページビルダー
• トップページを丸ごと新しくしたい → mu-pluginでトップだけ切り替える方法
• 今後もページを何枚も増やす予定がある → 1枚ずつ実フォルダを増やすより、サイト全体の作り方を見直す段階

実フォルダの方法は1〜数枚の特設ページ向けです。ページが増えるほどヘッダー・フッターの写しを直す手間も増えます。

まとめ

• WordPressは実在するファイル・フォルダを先に表示する。公開フォルダにページ用のフォルダを置けば、本体を触らずに1ページ足せる
• 置く前にURLが404であることを確かめ、同名の固定ページとぶつからないようにする
• ヘッダー・フッターはデザインを見て作り直さず、今の実装から移植する。サイトが読み込んでいないWebフォントは、こちらでも読み込まない
• 計測タグ・title・canonicalなどは自分で入れる。サイトマップにも自動では載らない
• 公開後は、本番と手元のファイルの一致、既存ページの200、スマホでの表示・動画の再生まで確かめる
• 元データを1か所に決め、本番だけを直さない

WordPressのサイトに新しいサービスの紹介ページを足したい、今のサイトを壊さずに見せ方だけ変えたいといったご相談は、LINE公式アカウントからお気軽にどうぞ。今のサイトの作りを確認したうえで、どの方法が合うかからご提案します。