【WordPress】静的HTMLからの移行も安心！公開中ディレクトリをCMS化する方法

この記事でわかること

• 静的HTMLからWordPressへのCMS化を本番環境で安全に進めるコツ
• 公開状態のまま、BASIC認証付きの仮ディレクトリで動作確認するテクニック
• リスク最小限で効率的に本番ディレクトリに切り替える方法

背景・ポイント

静的HTMLで作られた既存サイトの製品情報ページ（/products/ 配下）を、WordPress のカスタム投稿タイプで大胆リニューアルすることになりました🎉

ただ…製品ページの数がハンパなく多い！！

さらにお客さんからは、「ステージングじゃなくて本番環境で実際のデータを投稿しながら確認したい」という要望もありました。

今までどおり、「ステージング環境で確認して → 本番へ反映」というフローだと、
✅ 工数はかかるし
✅ 作業＆移行ミスのリスクもあるし
ちょっと現実的じゃない…

ということで今回は、本番環境で直接新しいページを投稿＆公開しながら、仮ディレクトリを設定しつつBASIC認証でアクセス制限をかける方法を採用しました！

こうすることで、
✔ 本番データ＆設定そのままで動作チェック可能
✔ スピーディ＆効率的に検証できる
✔ ミスのリスクもグッと減らせる
という、いいとこ取りの作戦です🙌

実現の流れ

1. カスタム投稿タイプ products を作成
2. rewrite['slug'] を一時的に wp-products に設定（仮ディレクトリとして設定）
3. template_redirect で専用テンプレートを適用
4. /wp-products/ に BASIC認証を設定
5. リリース時に /products/ に戻して本番公開

以下に具体的な設定方法をまとめていきます！

カスタム投稿タイプ作成

register_post_type( 'products',
  array(
    'label' => '製品情報',
    'public' => true,
    'has_archive' => true,
    'show_in_rest' => true,
    'labels' => labels_post_type('製品情報'),
    'rewrite' => array(
      'slug'       => 'wp-products', // 仮ディレクトリ
      'with_front' => false,
    ),
    'supports' => ['title', 'thumbnail', 'revisions', 'author']
  )
);

これで /wp-products/ にアクセスすると、products のアーカイブが表示されます。

Rewriteルール追加

function register_custom_products_rewrite_rules() {
  // アーカイブ
  add_rewrite_rule('^wp-products/?$', 'index.php?post_type=products', 'top');

  // タクソノミー
  add_rewrite_rule('^wp-products/category/([^/]+)/?$', 'index.php?products_cat=$matches[1]&post_type=products', 'top');

  // 個別投稿
  add_rewrite_rule('^wp-products/([^/]+)/?$', 'index.php?post_type=products&name=$matches[1]', 'top');
}
add_action('init', 'register_custom_products_rewrite_rules');

この関数で、/wp-products/ 配下のアーカイブ・カテゴリ・個別ページが、それぞれ products 投稿タイプとして正しく表示されるようになります。

template_redirect でテンプレートを適用

function custom_products_template_redirect() {
  global $wp_query;

  // シングルページ
  if (isset($wp_query->query_vars['post_type']) && $wp_query->query_vars['post_type'] === 'products' && $wp_query->is_single) {
    include(get_template_directory() . '/single-products.php');
    exit();
  }

  // アーカイブページ
  if (isset($wp_query->query_vars['post_type']) && $wp_query->query_vars['post_type'] === 'products' && !isset($wp_query->query_vars['products_cat'])) {
    include(get_template_directory() . '/archive-products.php');
    exit();
  }

  // カテゴリーアーカイブページ
  if (isset($wp_query->query_vars['products_cat']) && empty($wp_query->is_single)) {
    include(get_template_directory() . '/taxonomy-products_cat.php');
    exit();
  }
}
add_action('template_redirect', 'custom_products_template_redirect');

この関数で、products 投稿タイプのシングル・アーカイブ・カテゴリーページに、それぞれ専用テンプレートを適用できるようになります。

BASIC認証の設定

# /wp-products 以下に BASIC認証を適用
<If "%{REQUEST_URI} =~ m#^/wp-products#">
  AuthUserFile "/path/to/.htpasswd"
  AuthName "WP Products"
  AuthType Basic
  Require valid-user
</If>

/wp-products/ 配下にアクセス制限をかけることで、本番環境でも外部に非公開のまま動作確認ができるようになります。

※ AuthUserFile のパスはサーバー環境に合わせて適宜変更してください。

リリース時の切り替え手順

1. rewrite['slug'] など各種設定を products に変更
2. WordPress管理画面の「パーマリンク設定」を再保存（または flush_rewrite_rules() 実行）
3. BASIC認証を解除
4. 旧 /products/ 静的ファイル（index.html など）を削除

これで、仮ディレクトリから本番用のURLにスムーズに切り替わり、BASIC認証も解除されて公開状態になります。

まとめ

この方法を使えば、

• 制作側は公開中のページに影響を与えず、安全＆安心に作業できる
• お客さんはアーカイブページも含めて「本番と同じ環境」で確認しながらコンテンツを投入できる
• 公開直前のトラブルやデータのズレによる不具合もグッと減らせる

結果として、制作側とお客さん双方にとってリスクが少なく、安心感のある公開フローが実現します！
見えないところでの準備がしっかりしているからこそ、作業はサクサク進み、公開後も気持ちよくスタートできます🙌