WordPress

StudioからWordPress（クラシックテーマ）へ移行した手順｜HTMLの持ち出し方とURLの大文字・小文字の301リダイレクト

アバタートノムラマサシ

Studio で作られたサイトを、WordPress（クラシックテーマ）に移行しました。ドメインはそのままで、ページの構成もほぼ同じです。

作業してみると、Studio ならではのつまずきどころが3つありました。コードを書き出す機能がないこと、一覧ページにページネーションがないこと、そしてURLに大文字が使われていたことです。特に3つ目は「ドメインもページも同じだからリダイレクトはいらない」と思っていると見落としやすいポイントです。

この記事では、実際に進めた順番に沿って、移行の手順と注意点をまとめます。

移行の流れ

  1. Studio のページを HTML として保存する
  2. HTML をもとにクラシックテーマを作り、足りない機能を WordPress で追加する
  3. 旧URLの一覧を作り、URLが変わるページに301リダイレクトを設定する
  4. 切り替え後に、旧URLの転送やリンク切れを確認する

1. Studio のページを HTML として保存する

Studio には、HTML・CSS・JavaScript を書き出すエクスポート機能がありません。そこで、ブラウザの保存機能を使って、公開中のページを HTML として保存しました。

  1. 公開中のページを開き、ページ上部の何もない場所で右クリックする
  2. 「別名でページを保存」（ブラウザによっては「名前を付けて保存」）を選ぶ
  3. 保存の形式を「ウェブページ、完全」にして保存する

これで、HTMLファイルと、画像などが入ったアセットフォルダがダウンロードされます。ページの数だけ、この作業を繰り返します。

保存した HTML を使うときの注意

2. クラシックテーマに組み込み、足りない機能を追加する

保存した HTML から Vue.js のコードを取り除き、ヘッダー・フッター・各ページのテンプレートに分けてクラシックテーマ（PHP のテンプレートで作るテーマ）にしていきました。CMS で管理していたブログやお知らせは WordPress の投稿に、フォームは WordPress のフォームプラグインに置き換えます。

ページネーションは WordPress の機能で追加する

Studio にはページネーション（「1 2 3 … 次へ」のようなページ送り）の機能がありません。ブログやお知らせの一覧は、WordPress に移すタイミングで次の2つで追加しました。

<?php the_posts_pagination(); ?>

2ページ目以降は /page/2/ のようなURLになります。旧サイトにはなかったURLなのでリダイレクトは必要ありませんが、一覧ページそのもののURLが Studio 時代から変わる場合は、次の章の301リダイレクトを忘れずに設定します。

3. URLの大文字・小文字が変わるなら301リダイレクトする

旧サイトのURLを一覧にしてみると、/About や /Service のように頭文字が大文字のURLが混ざっていました。WordPress は投稿やページのスラッグを基本的に小文字に変換して保存するので、移行すると /about や /service になります。

大文字と小文字が違うと、別のURLになる

URLのパス部分（ドメインより後ろ）は、大文字と小文字を区別します。Google の John Mueller 氏も、URLは大文字・小文字を区別するので /About と /about は別のURLとして扱われる、と説明しています。何もしないで切り替えると、次のようなことが起こります。

URLが変わるページは、旧URLから新URLへ 301リダイレクト（恒久的な転送）を設定します。301にしておけば、検索エンジンにも「このページは引っ越しました」と伝わり、評価の引き継ぎが期待できます。

方法1：.htaccess に書く

Apache 系のサーバー（多くのレンタルサーバー）なら、WordPress の .htaccess に次のように書けます。WordPress が自動で書き換える # BEGIN WordPress〜# END WordPress の範囲の外（上）に書くのがポイントです。範囲の中に書くと、パーマリンク設定を保存したときなどに消えてしまいます。

# Studio時代の旧URL → WordPressの新URL
RedirectMatch 301 ^/About/?$ /about/
RedirectMatch 301 ^/Service/?$ /service/
RedirectMatch 301 ^/Contact/?$ /contact/

RedirectMatch の正規表現は大文字・小文字を区別するので、^/About/?$ は /About にだけ一致し、転送先の /about/ には一致しません。ここで「大文字・小文字を区別しない」設定（(?i) や mod_rewrite の [NC] フラグ）を付けてしまうと、転送先の /about/ にも一致して、リダイレクトのループになるので注意してください。

方法2：Redirection プラグインを使う

.htaccess を触りたくない場合や、お客さん自身に管理してもらう場合は、WordPress のプラグイン「Redirection」が便利です。管理画面から旧URLと新URLを登録するだけで301リダイレクトを設定でき、404になったURLの記録も確認できます。

「全部小文字にする」設定は .htaccess だけではできない

「大文字のURLをすべて小文字に転送する」方法として、Apache の RewriteMap と int:tolower を使う例もよく見かけます。

RewriteMap lc int:tolower
RewriteRule "(.*)" "${lc:$1}" [R=301]

ただし Apache の公式ドキュメントによると、RewriteMap はサーバー全体またはバーチャルホストの設定でしか宣言できず、.htaccess には書けません。共有のレンタルサーバーではサーバー全体の設定を触れないことが多いので、この方法は基本的に使えないと考えておいたほうがいいです。ページ数がそれほど多くなければ、旧URLを1つずつ書き出して転送するのが確実です。

4. 切り替えの前後に確認すること

  1. 旧サイトのURLを一覧にする：サイトマップ、Google Search Console の「ページ」レポート、アクセス解析のページ一覧などから、実際に使われていたURLを洗い出します
  2. 新URLと1対1で対応表を作る：大文字・小文字、末尾のスラッシュ、ブログ記事のURLの形式（カテゴリを含むかどうか）などの違いをチェックします
  3. 301リダイレクトを設定する：URLが変わるものはすべて転送します。対応するページがないものは、近い内容のページか一覧ページへ
  4. サイト内のリンクを新URLにそろえる：保存した HTML から作ったテンプレートには旧URLのリンクが残りやすいので、メニューや本文のリンクを新URLに直します
  5. 切り替え後に実際に開いて確認する：旧URLを開いて、301で新URLに移動するかを確認します。旧URLのままページが200で表示される場合は、重複URLになっているので設定を見直します
  6. Search Console でサイトマップを送信する：WordPress のサイトマップを送信し、しばらくはクロールのエラーや404を確認します

リダイレクトの確認は、ターミナルで curl -I を使うとステータスコードと転送先が一目で分かります。

curl -I https://example.com/About

HTTP/1.1 301 Moved Permanently
Location: https://example.com/about/

まとめ

「ドメインもページも同じだから大丈夫」と思っていても、URLを1文字ずつ見比べると違いが見つかることがあります。HTMLを保存するタイミングで旧URLの一覧も作っておくと、移行全体がスムーズに進みます。

アバター
この記事を書いた人 トノムラマサシ

masashi Webサイト屋兼ブロガー｜過去に企業常駐などを経て現在はフリーランスでディレクションとコーダーとして活動しております。JS大好きなのでJSの仕事依頼お待ちしております。京都在中で5人家族。

関連記事