ワードプレスのテーマ変更5つの手順｜相談20件でわかった崩れる所と戻し方

ワードプレス(WordPress)で別のテーマに変えて「有効化」を押した直後に、記事の吹き出しやボックスが崩れることがあります。前のテーマのショートコードが、角かっこの付いた文字のまま記事に出ることもあります。記事の装飾や設定画面に貼ったタグは前のテーマが持っていた物なので、新しいテーマには自動で移りません。

この記事では、WordPressのテーマを変える手順を、変える前の控えから崩れた所の直し方・元に戻し方まで5つの手順で解説します。株式会社メリルが運営するブログ相談ドットコムに寄せられた相談のうち、テーマの変更に関わる20件を読んで分けた結果も載せました。

記事を読めば、有効化の前に崩れる所を見つけ、崩れても前の状態に戻せる段取りがわかります。変えた後に困った相談15件のうち7件は、前のテーマの機能や設定が新しいテーマに引き継がれないことが原因でした。バックアップと前のテーマで設定した物の控えを取り、ライブプレビューで記事を開いてから有効化すれば、直す所を先に洗い出せます。

ワードプレスのテーマ変更5つの手順と、相談20件でつまずいた所

WordPressのテーマを変えるときの手順は、以下の5つです。

1. 変える前にバックアップを取り、前のテーマの設定を控える
2. 新しいテーマを入れてライブプレビューで表示を確かめる
3. 新しいテーマを有効化して、すぐに表示を確かめる
4. 崩れた所は前のテーマとの違いかテーマ以外かで分けて直す
5. 直せないときは前のテーマに戻す

ブログ相談ドットコム(株式会社メリル運営)に2021年8月〜2026年9月に公開された相談は1,398件ありました。相談の文に「テーマ」の語が入っていたのは163件で、テーマを変える話の相談は163件のうち7件だけです。

テーマの名前と変える語、テーマのカテゴリーなどに広げて290件を拾い、1件ずつ読んでWordPressのテーマを変えることに関わる20件に分けました。20件は2021年9月〜2023年4月の相談で、17件が2021年と2022年に寄せられています。20件が変える前後のどこでつまずいたかは、以下の表のとおりです。

変える前後のどこでつまずいたか	相談の件数
変えるかどうかを決める	5件
変える準備(バックアップ・テスト用のサイト)	0件
新しいテーマを入れる・有効化する	2件
変えた後の表示や機能を直す	13件
前のテーマに戻す	0件
計	20件

20件のうち15件は、テーマを変えた後に困った相談です。相談した人がバックアップを取ってから変えたと書いていた相談は、20件の中に1件もありませんでした。

変えた後に困った15件を原因で分けると、以下の表のようになります。

原因	相談の件数	起きたことの例
前のテーマとの違い	7件	前のテーマのショートコードが動かない・前のテーマ用のメニューが別の欄に出る・設定欄に貼った確認用のタグが見つからない・前のテーマにあった機能が無い・アイキャッチがぼやける
テーマ以外(プラグイン・WordPress本体・操作)	5件	親テーマを消した・付属のプラグインを有効にしていなかった・別のプラグインの設定・WordPressを置いた場所
分からない	3件	変えたのに表示が変わらない・物販のリンクの出方が変わった・画像の容量が増えた

変える前のテーマは、20件のうち15件がCocoonでした。相談は20件と少ないため、この記事では割合ではなく件数で示しています。回答を書いているのは相談サイトの利用者で、専門家ではありません。

手順1：テーマを変える前にバックアップを取り、前のテーマの設定を控える

テーマを変えても、データベースに入っている記事や固定ページは消えません。記事が残っていても見た目は新しいテーマに変わるので、前の状態に戻せる用意と、前のテーマで設定した物の控えを先に作っておきます。変える前にやっておくことは、以下の3つです。

• サイトのファイルとデータベースのバックアップを取る
• 前のテーマの設定画面に入れたタグやコードを書き出す
• 記事で使っている前のテーマの装飾とショートコードを書き出す

サイトのファイルとデータベースのバックアップを取る

テーマを変える前に、サイトのファイルとデータベースの両方のバックアップを取ります。WordPressのデータベースは、投稿やコメントなど書いた物をすべて収める場所です。テーマを変えるとウィジェットやメニューの置き場所も動くので、変える前の日付のバックアップがあれば、うまくいかなかったときに丸ごと前の状態に戻せます。

相談の20件のうち、回答で変える前にバックアップを取るよう指摘したのは1件だけでした。

バックアップの取り方と、サーバーの自動バックアップが何日分残るかの確かめ方は、以下の記事にまとめました。

» ワードプレスのバックアップの取り方と戻し方｜5つの手順と相談84件

前のテーマの設定画面に入れたタグやコードを書き出す

「外観」→「カスタマイズ」の画面で入れた値は、テーマごとに分けて保存されています。WordPressはカスタマイズの値をテーマのフォルダ名ごとの入れ物にしまうため、新しいテーマを有効にすると前のテーマの値は画面に出てきません。テーマ独自の設定画面も同じで、新しいテーマの設定画面は初めの値のままです。

相談でも、前のテーマの設定欄に貼ったSearch Consoleの確認用のタグを、新しいテーマに貼り直せずに困った例が1件ありました。Search Consoleの所有権は、確認用のタグがサイトに残っている間だけ有効です。タグが見つからない状態が続くと、通知が届いた後に一定の猶予期間を経て、プロパティの権限が失効します。

前のテーマの設定画面に貼っている物は、以下のようにテキストのファイルへ写しておきます。

• Search Consoleの確認用のタグ(google-site-verificationを含むmetaタグ)
• Googleアナリティクスなどの計測のタグ
• アドセンスの審査用のコードや広告のコード
• 「追加 CSS」やテーマの設定欄に書いたCSS
• ヘッダーやフッターに足したHTML

記事で使っている前のテーマの装飾とショートコードを書き出す

吹き出し・ボックス・ボタンなどの装飾やショートコードは、テーマが用意した物だと、テーマを変えた後に表示が崩れます。ショートコードを用意したプラグインやテーマが止まると、記事にはショートコードの文字が処理されないまま出ます。

WordPress.orgで配るテーマの審査の決まりでも、ショートコードはテーマに入れない物の1つです。

変える前の相談5件のうち、記事の装飾が崩れることを心配した相談が2件、直す手間を心配した相談が2件ありました。回答には、すべての記事で装飾を付け直した経験や、まとめて置き換える方法が書かれています。記事で使っている装飾を書き出す手順は、以下のとおりです。

1. 前のテーマのマニュアルで、装飾・専用のブロック・ショートコードの一覧を見る
2. 自分の記事で使っている物に印を付ける
3. 「投稿」→「投稿一覧」の「投稿を検索」でショートコードの名前を入れ、使っている記事の数を見る
4. よく読まれている記事を、直す順番の先頭に並べる

手順2：新しいテーマを入れてライブプレビューで表示を確かめる

新しいテーマは入れただけではサイトに反映されず、有効化した時点で見た目と機能が切り替わります。WordPressには有効化の前に自分の記事で見た目を見られるライブプレビューがあるので、入れたら有効化の前に表示を見ておきます。新しいテーマを入れて表示を見る手順は、以下の3つです。

• 「外観」→「テーマ」から新しいテーマを追加する
• 有効化する前にライブプレビューで記事ページを開く
• 記事が多いブログはテスト用のサイトで先に試す

「外観」→「テーマ」から新しいテーマを追加する

WordPress.orgのテーマディレクトリにあるテーマは管理画面から検索して入れられ、購入したテーマはZIPのファイルをアップロードして入れます。ZIPのファイルで入れる手順は、以下のとおりです。

1. 管理画面の「外観」→「テーマ」を開いて「テーマを追加」を押す
2. 「テーマのアップロード」を押し、テーマのZIPのファイルを選ぶ
3. 「今すぐインストール」を押し、インストールが終わったら有効化はせずにテーマの画面へ戻る

子テーマが用意されているテーマは、親テーマと子テーマの両方を入れます。子テーマは親テーマのデザインと機能を受け継ぐ物で、親テーマを消すと「親テーマが見つかりません」と出て動きません。相談でも、子テーマを使ったまま古い版の親テーマを消して、親テーマが見つからない表示が出た例が1件ありました。親テーマを入れ直して直っています。

有効化する前にライブプレビューで記事ページを開く

ライブプレビューでは、新しいテーマを有効にしたときの見た目を、自分のサイトの記事で見られます。プレビューの中のリンクを押すと記事ページに移れるので、トップページだけで済ませずに、装飾を多く使った記事も開きます。ライブプレビューで見る手順は、以下のとおりです。

1. 「外観」→「テーマ」で新しいテーマにカーソルを合わせて「ライブプレビュー」を押す
2. プレビューの中のリンクから、装飾やショートコードを多く使った記事を開く
3. 画面の下のボタンで、スマホとタブレットの幅に切り替えて見る
4. 崩れた所・消えた所を、手順1の控えに書き足す

ブロックテーマ(標準テーマのTwenty Twenty-Twoなど)では、ライブプレビューを押すとサイトエディターの中で表示を見る形になります。プレビューが真っ白で何も出ないときは、有効化すると表示が正しく出ない可能性があるため、有効化せずにテーマのファイルや動く条件を確かめます。

記事が多いブログはテスト用のサイトで先に試す

記事が多く装飾をたくさん使っているブログは、今のブログを写したテスト用のサイトに新しいテーマを当てて、直す所と手間を先に見積もります。変える前の相談5件のうち2件の回答は、ローカルの環境や検索エンジンに出さないテスト用のサイトで先に試すよう勧めていました。2件とも、記事の多いブログの相談です。

テスト用のサイトは、WordPressの「設定」→「表示設定」で「検索エンジンがサイトをインデックスしないようにする」にチェックを入れておきます。今のブログと同じ記事を写したテスト用のサイトを、検索結果に出さないためです。

変える前の相談5件のうち2件は、検索順位への影響も心配していました。回答はどちらも影響は一時的との見方でしたが、根拠のページは示されていません。変えた後はSearch Consoleで表示回数と掲載順位の動きを見ておくと、落ちたときに気づけます。回答には、記事が増える前に変えた方がよいとする経験談もありました。

手順3：新しいテーマを有効化して、すぐに表示を確かめる

ライブプレビューで直す所を書き出したら、新しいテーマを有効化します。「外観」→「テーマ」の「有効化」か、ライブプレビューの画面の「有効化して公開」を押すと、押した時点でサイトの表示が切り替わります。有効化した直後に見ておく所は、以下のとおりです。

• トップページとスマホの幅の表示
• 装飾やショートコードを多く使った記事
• サイドバー・メニュー・フッター
• 広告とSearch Consoleの確認用のタグ
• 管理画面にログインし直せるか

変えたのに表示や設定が変わらない・反映されない相談は3件で、うち2件はプラグインの設定や操作などテーマ以外が原因でした。表示が変わらないときは、ブラウザやキャッシュのプラグインに残った古い表示を消してから見直します。

相談と回答には、前のテーマの装飾を新しいテーマで表示させる乗り換え用のプラグインも出てきました。相談では、乗り換え用のプラグインを有効化した後に消してしまい、前のテーマのショートコードがまた効かなくなった例が1件あります。乗り換え用のプラグインは、記事の装飾を直し終えるまで止めずに残しておきましょう。

手順4：崩れた所は前のテーマとの違いかテーマ以外かで分けて直す

テーマを変えた後の困りごと15件のうち、前のテーマとの違いが原因だったのは7件で、プラグインやWordPress本体などテーマ以外が原因だったのは5件でした。原因が違えば直す場所も変わるので、崩れた所ごとに前のテーマの機能だったかを先に見分けます。崩れた所の直し方は、以下の5つです。

• ウィジェットとメニューを新しいテーマの場所に置き直す
• ショートコードと記事の装飾を新しいテーマの物に置き換える
• 計測と確認のタグを新しいテーマかプラグインに貼り直す
• 前のテーマにしか無かった機能は新しいテーマの設定かプラグインで補う
• テーマ以外が原因のときはプラグインとWordPressの設定から切り分ける

ウィジェットとメニューを新しいテーマの場所に置き直す

テーマを変えると、WordPressは前のテーマのサイドバーやメニューの位置を、名前が同じか似ている新しいテーマの場所に移します。名前の合う場所が無かったウィジェットは「使用停止中のウィジェット」に移り、設定ごと残っています。ウィジェットとメニューを置き直す手順は、以下のとおりです。

1. 「外観」→「ウィジェット」を開いて「使用停止中のウィジェット」にある物を新しいテーマの場所に移す
2. 「外観」→「メニュー」の「位置を管理」で、メニューを新しいテーマの位置に選び直す
3. サイトを開き、サイドバー・ヘッダー・フッターに出る物を確かめる

相談では、前のテーマで記事を並べる欄のために作ったメニューが、変えた後は新しいテーマの別の欄に出てきた例が1件ありました。回答は、新しいテーマのマニュアルで欄の名前を確かめてから「外観」→「メニュー」でつなぎ直す方法を案内しています。

ショートコードと記事の装飾を新しいテーマの物に置き換える

前のテーマのショートコードや装飾は新しいテーマでは働かないので、新しいテーマの装飾に置き換えるか、テーマに依らない書き方に直します。相談では、前のテーマのショートコードで貼った広告のリンクが、新しいテーマで出なくなった例が1件ありました。

回答は新しいテーマ用のショートコードに置き換える方法のほか、ショートコードのプラグインを使う方法と広告のタグを直に貼る方法を案内しています。

同じ書き方が多くの記事にあるときは、Search Regexのような検索と置き換えのプラグインで、記事の中の文字をまとめて置き換えられます。一括の置き換えは記事のデータを直接書き換えるため、手順1のバックアップを取ってから進めてください。まとめて置き換える手順は、以下のとおりです。

1. 手順1の控えから、前の書き方と新しいテーマでの書き方を1組ずつ決める
2. プラグインで前の書き方を検索し、見つかった記事の数と中身を見る
3. 1組ずつ置き換え、記事を開いて表示を確かめる
4. 機械で置き換えられない装飾は、よく読まれている記事から手で直す

回答で、記事の装飾やショートコードを直す・置き換えるよう指摘した相談は3件ありました。

計測と確認のタグを新しいテーマかプラグインに貼り直す

前のテーマの設定画面に貼った計測や確認のタグは新しいテーマに移らないので、手順1で控えたタグを新しいテーマの設定欄かプラグインに貼り直します。回答でタグを入れ直す・テーマに依らない場所に置くよう指摘した相談は2件でした。Search Consoleの確認用のタグを貼り直せなかった相談では、次の2つを含む方法が案内され、相談した人は解決したと書いています。

• 前のテーマに一時的に戻し、設定欄に貼ってあるタグを写して新しいテーマに貼る
• HTMLタグ以外の方法で所有権を確認し直す

Search Consoleの所有権は、HTMLタグのほかにHTMLファイルのアップロードやGoogleアナリティクスのトラッキングコードでも確認できます。Googleタグマネージャーとドメイン名プロバイダも、確認に使える方法です。

WordPress.orgで配るテーマの審査の決まりでも、アクセス解析やSEOの設定はプラグインの持ち場の例に挙がっています。計測のタグをテーマに依らない場所に置いておけば、次にテーマを変えたときに貼り直す手間がなくなります。

前のテーマにしか無かった機能は新しいテーマの設定かプラグインで補う

前のテーマが出していた表示や機能は、新しいテーマに無いことがあります。相談では、投稿の一覧に出ていた記事の文字数や、ボタン1つでサイト全体の色を変える機能が無くなった例が2件ありました。新しいテーマでのアイキャッチの設定のしかたが前と違い、画像がぼやけた例も1件ありました。

無くなった機能は、新しいテーマのマニュアルで同じ働きの設定を探します。同じ働きの設定が無ければ、プラグインで足すか使わずに済ませるかを決めます。変えた後の15件のうち5件では、回答がテーマやプラグインの提供元・マニュアル・公式フォーラムに聞くよう勧めていました。アイキャッチがぼやけた相談も、新しいテーマの公式フォーラムの答えで直っています。

テーマ以外が原因のときはプラグインとWordPressの設定から切り分ける

テーマを変えた後に起きた困りごとでも、原因がテーマ以外にあることがあります。テーマ以外が原因だった5件の中身は、以下のとおりです。

• 子テーマを使ったまま親テーマを消した
• 新しいテーマ用に買ったプラグインを有効にしていなかった
• 別のプラグインの設定に、前のテーマの名前が残っていた
• エディターのプラグインとWordPress本体の版の組み合わせで、編集画面が動かなかった
• WordPressをサブディレクトリに置いていたため、ドメインの直下でエラーが出ていた

表示が崩れたときは、プラグインを1つずつ止めて変わるかを見ると、テーマが原因かどうかを分けられます。回答でも、プラグインを止めて切り分けるよう勧めた相談が2件ありました。テーマを変えた後に管理画面へ入れなくなったときの切り分け方は、以下の記事にまとめています。

» ワードプレスにログインできない原因と直し方｜相談56件を画面ごとに分けた手順

手順5：直せないときは前のテーマに戻す

直す量が多すぎるときや、原因が分からないまま表示が崩れているときは、前のテーマに戻してから直す計画を立て直します。相談の20件に戻し方の相談はありませんでしたが、回答ではバックアップから戻す案と、前のテーマに一時的に戻して設定を写す案が1件ずつ出ていました。前のテーマに戻すときの手順は、以下の3つです。

• 「外観」→「テーマ」で前のテーマを有効化し直す
• 前のテーマと親テーマは落ち着くまで消さない
• 戻しても直らないときはバックアップから戻す

「外観」→「テーマ」で前のテーマを有効化し直す

前のテーマを消していなければ「外観」→「テーマ」で前のテーマの「有効化」を押すだけで、表示は前のテーマに戻ります。カスタマイズの画面で入れた値はテーマごとに残っているので、前のテーマに戻せば前のテーマの値がまた使われる仕組みです。

ウィジェットとメニューの置き場所は、前のテーマに戻したときにも移し直されます。前のテーマに戻した後も、サイドバーとメニューが元の場所に出ているかを確かめてください。

前のテーマと親テーマは落ち着くまで消さない

「外観」→「テーマ」でテーマを削除すると、テーマのファイルとフォルダはすべて消え、テーマのファイルに書き足したカスタマイズも一緒に消えます。新しいテーマで記事の直しが終わり、前のテーマに戻す見込みがなくなるまでは、前のテーマを消さずに置いておきましょう。

「ツール」→「サイトヘルス」では、セキュリティのために使っていないテーマの削除が勧められます。削除するときも、WordPressのデフォルトテーマと今使っているテーマは残し、子テーマを使っていれば親テーマも残します。デフォルトテーマは、選んだテーマに問題が起きたときにWordPressが自動で使うテーマです。

戻しても直らないときはバックアップから戻す

前のテーマを有効化し直しても前の表示に戻らないときは、手順1で取ったバックアップから、ファイルとデータベースを変える前の日の状態に戻します。バックアップから戻すと、変えた後に書いた記事や直した内容も戻した日の状態になるので、戻す前に今の状態のバックアップも取っておきます。

» ワードプレスのバックアップの取り方と戻し方｜5つの手順と相談84件

ワードプレスのテーマ変更はバックアップとライブプレビューの後に有効化しましょう

WordPressのテーマを変える5つの手順と要点は、以下のとおりです。

• 手順1：ファイルとデータベースのバックアップを取り、前のテーマの設定欄に貼ったタグと記事の装飾を控える
• 手順2：新しいテーマを入れ、有効化の前にライブプレビューで記事ページを開く
• 手順3：有効化した直後に、記事・サイドバー・タグ・ログインを確かめる
• 手順4：崩れた所は、前のテーマとの違いかテーマ以外かで分けて直す
• 手順5：直せないときは前のテーマを有効化し直し、戻らなければバックアップから戻す

相談20件では、バックアップを取ってから変えたと書いた相談は無く、変えた後に困った15件のうち7件が前のテーマとの違いによるものでした。前のテーマの設定とショートコードを先に控えておけば、崩れた所を新しいテーマの物に置き換える作業から始められます。

まずは、今のテーマの設定画面に貼っているタグと、記事で使っている装飾を書き出しましょう。