WordPressのトップページだけを静的HTMLの新デザインに差し替える方法｜テーマはそのまま、mu-pluginでトップだけ切り替えてブログや会員記事を残し、外せば戻る手順

「トップページだけ今風のデザインにしたい。でもブログや、会員向けにパスワードを掛けた記事は今のまま使い続けたい」。長くWordPressで運用してきたお店や本部のサイトで、よくいただく相談です。

先に結論を書きます。テーマは変えずに、トップページの表示だけを「mu-plugin（エムユープラグイン）」で新しいHTMLに切り替えるのがいちばん安全です。

• 新しいトップは、WordPressとは別に静的なHTML（あらかじめ完成させたページ）として作る
• mu-pluginで「トップページのときだけ、そのHTMLを出す」と指定する
• ブログ・下層ページ・パスワード付き記事は、これまでどおりテーマが表示する
• 元に戻すときは、mu-pluginのファイルを1つ別の場所へ移すだけ

mu-pluginとは、wp-content/mu-plugins/ というフォルダに置いたPHPファイルを、WordPressが毎回必ず読み込む仕組みです。通常のプラグインと違って管理画面から誤って停止されることがなく、テーマの更新でも消えません。

この記事では、多店舗展開する美容室の本部サイトでトップだけを差し替えた実例をもとに、手順と判断基準、切り替え当日に慌てないための注意点をまとめます。

トップだけを差し替える3つの方法と選び方

トップページだけを新しくする方法は、大きく3つあります。

方法	元に戻す方法	ブログ・保護記事	注意点
①ルートに index.html を置く	index.html を消す	そのまま動く	サーバーの設定次第。WordPressが出していたタグは全て手で移す必要がある
②テーマに front-page.php を作る	ファイルを消す	そのまま動く	テーマの更新で消えることがある。子テーマが無いと親テーマを直接触ることになる
③mu-pluginでトップだけ切り替える	mu-pluginを外す	そのまま動く	新しいトップがWordPressのタグ出力（wp_head）を通さない作りなら、①と同じく計測タグの移し替えが必要

①ルートに index.html を置く方法

サーバーの公開フォルダに index.html を置くと、多くのレンタルサーバーでは index.php（WordPressの入口）より先に index.html が表示されます。WordPressには一切触れないので、いちばん手軽です。

別のサービスサイトでは、実際にこの方法でトップと1つの下層ページを先に新デザインへ切り替えました。WordPressのファイルも .htaccess（サーバーの設定ファイル）も無変更で、戻すときは index.html を消すだけです。

ただし、この方法が使えるかどうかは、サーバー側で「どちらのファイルを優先するか」の設定に左右されます。また、WordPressのテーマやプラグインが自動で出していた計測タグ・canonical（正規URLの指定）は、静的HTMLには一切入りません。

②テーマに front-page.php を作る方法

WordPressには「トップページの表示には front-page.php というテンプレートを優先して使う」という決まりがあります。テーマの中にこのファイルを作れば、トップだけ見た目を変えられます。

ただ、配布されているテーマを直接編集すると、テーマの更新で上書きされて消えることがあります。子テーマ（親テーマを書き換えずに上乗せする仕組み）が無いサイトでは、まず子テーマの用意から始めることになり、作業が広がります。

③mu-pluginでトップだけ切り替える方法（おすすめ）

上の2つの良いところを取ったのが③です。テーマのファイルは一切書き換えません。切り替えのスイッチは mu-plugins フォルダの1ファイルだけで、新しいトップのHTMLと画像は別のフォルダに置きます。WordPressの判定（今表示しているのがトップページかどうか）を使うので、サーバーの設定にも左右されません。

本部サイトでは、トップの下に「ブログ」「会員向けのパスワード付き記事」「店舗一覧」などがぶら下がっており、どれも止められない状態でした。テーマを触らず、外せば一手で戻るという条件を満たすのが③だったため、この方式を選んでいます。

実例：本部サイトのトップを差し替えた構成

実際の構成は次のとおりです。

• 新しいトップのHTML・CSS・画像は、手元で静的ページとして完成させる（表示確認も手元で済ませる）
• 画像やCSSは、公開フォルダに作った専用フォルダ1つにまとめる（例：/new-top-assets/）。切り替え前のWordPressでこのURLが404（存在しないページ）になることを確かめ、既存のページとぶつからない名前にした
• wp-content/mu-plugins/ に切り替え用のPHPファイルを1つ置く
• トップのHTML本体は、wp-content/ の下に専用フォルダを作って置く

最初の切り替えで送ったファイルは23本でした。送付は手作業ではなくスクリプトにまとめ、次の順で自動的に進むようにしています。

1. 本番サーバーの現状をバックアップする
2. ファイルを送る
3. 手元と本番のファイルが同じかをハッシュ値（ファイルの指紋のような値）で照合する（23本すべて一致）
4. PHPの文法チェック（php -l）を通す
5. 本番のトップをURLで取得して、新しいタイトルが出ているかを確かめる

戻す手順も同じフォルダにスクリプトで用意し、中身は「mu-pluginを退避する」だけにしました。

手順：mu-pluginでトップだけ切り替える

1. 新しいトップを静的HTMLで完成させる

先にWordPressと切り離して、手元でページを完成させます。スマホとPCの両方の幅で、横にはみ出す要素がないか、画像が欠けていないかまで確認しておきます。

2. 切り替え用のmu-pluginを書く

中身はこれだけです（ファイル名やフォルダ名は例です）。

<?php
/*
Plugin Name: Custom Front Page
Description: トップページのときだけ新しいデザインを表示する
*/
add_filter('template_include', function ($template) {
    if (is_front_page()) {
        $custom = WP_CONTENT_DIR . '/custom-top/front-page.php';
        if (file_exists($custom)) {
            return $custom;
        }
    }
    return $template;
}, 99);

template_include は「このページの表示にどのテンプレートを使うか」をWordPressが決める直前に割り込める仕組みです。is_front_page() でトップページのときだけ自前のファイルに差し替え、それ以外は元のテンプレートをそのまま返します。

ブログの一覧をトップに出す設定のサイトでは、2ページ目（/page/2/）でも is_front_page() が真になるため、条件に && ! is_paged() を足しておきます。

file_exists で確認しているのは、HTML側のファイルが何らかの理由で無いときに、真っ白なページではなく元のトップが出るようにするためです。

custom-top/front-page.php の中身は、新しいトップのHTMLを出力するだけでかまいません。テンプレートとして読み込まれるので、必要ならWordPressの新着記事を読み込んでトップのブログ欄に並べることもできます。

3. 計測タグとSEOのタグを移す

ここがいちばん漏れやすい点です。新しいトップはWordPressの wp_head（プラグインがheadにタグを差し込む仕組み）を通さない作りにすることが多く、その場合、元のトップに入っていた計測タグや、SEOプラグインが出していたタグは新しいトップには入りません。

切り替え前に、元のトップのHTMLソースを開き、次のものを書き出しておきます。

• Googleアナリティクス・Googleタグマネージャー・広告のコンバージョン計測タグ
• アクセス解析系プラグインが出しているタグ
• canonical、description、OGP（SNSで共有されたときの表示）

本部サイトでは、元のトップに入っていた計測はアクセス解析プラグインのタグ1つだけで、それを新しいトップに移植しました。もう1つのサービスサイトのほうは、元のトップにタグマネージャーと広告のタグ、LINEボタンのクリック計測が入っていたため、すべて新しいトップへ移しています。

移したタグは「自分で足したもの」なので、新しいトップを作り直すたびに入れ直しが必要です。デザインを作り直した担当者のデータにはタグが入っていない、ということが起こりうるため、更新手順のメモに「タグの移植」を1行入れておきます。

4. 保護記事とブログが生きているかを確かめる

切り替え後に、トップ以外が今までどおり動いているかを確認します。

• ブログの一覧と記事が200（正常表示）で返るか
• パスワード付きの記事を開くと、パスワード入力欄が出るか
• プライバシーポリシーなど下層の固定ページが表示されるか

実例でも、トップ・ブログ・プライバシーポリシー・会員向けの保護記事のそれぞれを実際に開き、保護記事ではパスワード入力欄が出ることまで確かめています。

5. 戻し方を先に用意しておく

戻す方法は「mu-pluginのファイルを別のフォルダへ移す」だけです。mu-pluginsフォルダの直下にあるPHPファイルだけが読み込まれる仕組みなので、サブフォルダに移すか、拡張子を変えれば無効になります。

切り替える前に、この戻し方をスクリプトやメモにしておくと、公開後に「やっぱり前の方がいい」となったときも、ファイル操作は数秒で済みます（表示への反映は、次に書くキャッシュの影響で数分遅れることがあります）。

切り替え当日に起こりうること

切り替え直後、数分は旧トップが見えることがある

レンタルサーバーのページキャッシュ（表示結果を一時的に保存して高速化する仕組み）が効いていると、切り替えてすぐは旧トップが表示されることがあります。同じレンタルサーバーで運用している別のサイトでは、ページキャッシュが応答ヘッダーに表示されないまま約2分効いていました。

このため、切り替え直後の自動チェックでは「タイトルが古いまま」「新しいはずの要素が無い」と判定されることがあります。実例でも送付スクリプトの即時確認では旧トップが返ってきましたが、数分後にURLの末尾へキャッシュを避けるパラメーター（例：?nc=適当な文字列）を付けて取り直すと、新しいトップが正しく出ていました。

慌てて戻したり作業をやり直したりする前に、数分置いてから、キャッシュを避けるパラメーター付きでもう一度確かめるのが正しい手順です。キャッシュの影響を避けた確認方法は、プラグイン停止後に設定が戻る問題の記事でも触れています。

確認スクリプトが「何も言わずに」止まることがある

送付後の確認を自動化するときは、確認処理そのものが正しく最後まで走ったかも見ておきます。たとえばシェルスクリプトで set -euo pipefail（途中でエラーが出たら止める設定）を使っている場合、「ある文字列が0件であること」を grep で数えようとすると、0件のときに grep が失敗扱いになり、スクリプトがエラー表示もなく途中で終わることがあります。

0件であることを確かめたい箇所は { grep -o '文字列' || true; } | wc -l のように書き、確認の最後に「全項目完了」と表示させておくと、途中で止まったことにすぐ気づけます。

新しいトップの元データを1か所に決めておく

切り替え後に「本番のHTMLを直接少し直す」と、次に手元のデータから作り直したときにその修正が消えます。元データ（実例では手元のHTMLの原稿と、そこから完成版を作るスクリプト）を正本と決め、修正は必ずそちらで行ってから送る運用にします。この巻き戻りの構造は本番を直接直した修正が次の更新で消えるときの記事で詳しく書いています。

どの方法を選ぶかの判断基準

• WordPressを今後も使い続ける（ブログ・保護記事・プラグインが生きている） → ③mu-plugin
• WordPressはほぼ使っておらず、トップ数ページだけ先に新しくしたい → ①index.html でも可（タグの移植は必須）
• 子テーマがあり、テーマ側でデザインを管理していく方針 → ②front-page.php

サイト全体の見た目を少しずつ今風にしたい場合は、トップだけを差し替えるのではなく、既存の表示に変更を「被せる」方法が向いています。こちらはWordPressのテーマを変えずにデザインを今風にする方法で解説しています。

まとめ

• トップだけ新しくしたいときは、テーマを変えずにmu-pluginで「トップページのときだけ新しいHTMLを出す」形にするのが安全
• ブログ・下層ページ・パスワード付き記事はテーマが今までどおり表示するので止まらない
• 元に戻すときはmu-pluginのファイルを退避するだけ。戻し方は切り替え前に用意しておく
• 新しいトップにはWordPressの計測タグやSEOタグが自動では入らない。元のトップのソースから書き出して移し、作り直すたびに入れ直す
• 切り替え直後はページキャッシュで旧トップが数分見えることがある。数分置き、キャッシュを避けるパラメーター付きで確かめてから判断する

「ブログは残したままトップだけ新しくしたい」「WordPressを触るのが怖くて手を付けられていない」という場合は、現状のサイト構成を確認したうえで、どの方法が合うかからご提案します。お気軽にご相談ください。