THE THORからSWELLへの移行作業記録①～どこが表示崩れした？～

コーヒーブログ「道産子MAYAのコーヒー歩き」はただいま絶賛改装中です。

この期間にアクセスしてくださった読者さんには、スマホで表が横スクロールできないとか、吹き出しの表示がデフォルトの犬猫になっているだとか、なんか謎のタグが露出しているだとか、お見苦しいものをお見せしてしまっています……。

今月中には改装作業を終えることを目標にしています。

さて、改装作業の内容ですが、

ワードプレスのテーマを「THE THOR」から「SWELL」に変更する

という作業を行っております。

ブログをやっていない方には何のことやら？　ですよね。

ブログの見た目だけじゃなくて、内部の動き方も根本から変わる大工事をしている感じです。

今回の記事は、私と同じようにTHE THORからSWELLに移行したいなと思っている方が、移行後の作業内容やかかる時間を想定しやすくなるように、先人の知見として残しておこうと思ったものです。

①としていますが、シリーズが最後まで続くかはわかりません。

応援いただければ頑張ります！（時間差コメントも大歓迎です）

そもそもTHE THORからSWELLに変えた理由

私がブログを始めたときは、SWELLというテーマは名前を聞いたことがないレベルでした。発売前だったのか、有名になる前だったのか……。

なので、当時高評価だったTHE THORを選んでみました。

（※高評価だったのは、THE THORのアフィリエイト案件があったからかもしれません）

2年近くTHE THORを使って、いくつか不満点も出てきました。

大きな不満は2点。

・THE THORは「高速」を売りにしていたが実際はサイトがやや重く、どうしても改善できなかった
・いつまでもブロックエディタに対応してくれず、対応予定もないと聞いた

サイトの重さは、Googleの評価にも関わります。

また、クラシックエディタがWordPress5.8と相性が悪いらしく、クラシックエディタを使い続ける限り、ワードプレスを更新できなくなってしまったことが大きな衝撃でした。

新しく世に出る素敵なプラグインも「ブロックエディタのみ対応」のものも多いので、クラシックエディタしか使えないTHE THORは、時代遅れになっていく予感がひしひしとしていました。

そんな中で、私の中で更に大きなできごとが。

かの有名なブロガーヒトデさんのサイト高速化の外注を担当されたことがある（らしい）スキルシェアさんという方を信頼してフォローしているのですが、このサイト高速化のプロの方が、SWELLへ協力をするようになり、SWELLが更に高速なワードプレステーマへと進化したのです。

これはもう、サイト高速化を目指すならSWELLにするしかない！

THE THORからSWELLに移行した時に私が用意したもの

THE THORからSWELLに移行するにあたって必要なものはあまり多くはありません。

・SWELL本体の購入（当たり前）
・THE THORからSWELLに移行するためのプラグイン（SWELL購入後に見れる購入者限定会員サイトからダウンロードができます）
・SIMPLE BLOG DESIGN（いい感じの表を作りたくて、ずっと入れたかった有料プラグイン。おすすめなので、お好みでどうぞ）
・作業時間（どれくらいかかるかな～）

でした。

THE THORからSWELLに移行するだけなら、親テーマ・子テーマと移行プラグインの購入だけで当然OKです。

THE THORの方がけっこうブログをゴテゴテに装飾できたので、SWELLだと寂しくなってしまうかな？　と思ってSIMPLE BLOG DESIGNを購入しましたが、あってもいいしなくてもいいレベルだと思います。

作業時間は、当初は「3～4日もあれば余裕っしょ」と思っていましたが、完璧に仕上げるにはもっともっと時間がかかりそうです。

一部致命的？　THE THORからSWELLに移行して、表示が変わったり崩れたりしたもの

移行プラグインのお陰で、テーマを入れ替えても表面上はサイトの体裁を保っていました。

が、THE THORの方で設定していたテーマカラーやメインビジュアルが全部SWELLの初期設定のものに変わってしまったので、大慌てでまたTHE THORに戻したり。（SWELLとTHE THORを行き来しながら設定を確認しました）

移行プラグインを使っても、ブログ内の見出しや背景色に使っていた色は移行されないので、カラーコードをメモしておくことが必要です。

また、SWELLとTHE THORでは推奨（相性の良い）プラグインの種類が異なりますので、SWELL公式サイトを見ながら、プラグインを入れ替えるのも早い内に行っておきましょう。

そんなこんなで、THE THORからSWELLに移行して、移行プラグインを使っても致命的に表示が変わってしまったり崩れてしまったりしたものはこちら。

・サイト内の色設定全般
・メインビジュアル
・お問い合わせページからフォームが消えてしまった
・[outoline]タグ（SWELLでは目次が自動表示なので、[outline]が記事内にテキストとして表示されてしまいました）
・スマホ用横スクロールテーブルがスクロールできない

THE THORをインストールしたまま、移行プラグインを有効化したままではサイトが重たくなってしまうので、最終的には移行プラグインもTHE THORも消したいのですが、そうするともっとデザインが変わってしまうので、まずは上記の表示崩れから優先的に直していきます。

私の作業手順（たぶんこの順番がスムーズです）

①サイト内の設定を確認して見た目を整える（メインビジュアル以外）

メインビジュアルはTHE THORと推奨サイズが異なるので、こちらは後回し。「改装中です」の表示を入れて誤魔化しました。

SWELLの設定をひとつひとつ見ながら全部気に入るものに変えていって、第一弾の設定が完了。

ちなみに私はオススメされていたSEO SIMPLE PACKを入れたので、こちらの設定も行いました。

とりあえず設定系はこれで一段落かな。（ここまでに丸一日）

②お問い合わせページが消えていることに気付いたので、大慌てでどうにかしようとめちゃくちゃ悪戦苦闘した

THE THORでは、実はテーマ側でお問い合わせフォームがついてきていたので、大した設定も必要なく、お問い合わせフォームを設置することができていたのです。

これがSWELLにしたら消えていたことに気が付いて大慌て！

仮で自分のメールアドレスをお問い合わせページに掲載して、「ご用のある方はお手数ですがこちらからご連絡ください」としました。

新しくお問い合わせフォームに使うプラグインを入れて（SWELLの制作者さんがおすすめしていたContact Form by WPFormsを入れることにしましたが、Contact Form 7もメジャーですし、使っている方はとても多いです）これで終わり……かと思いきや、自動送信メールがうまく送信されない事態に遭遇。

この作業だけで丸一日かかったのですが、THE THORからSWELLに移行する場合独自の問題ではなくて、たぶん他の方にも役に立ちそうな知見が得られたので、これは別記事でまとめられたらまとめたいなぁと思います。

⇒別記事にまとめました「Xサーバーでのメールアドレスの取得から、SMTP設定のエラー解消、DMARCとSPFの設定まで～THE THORからSWELLへの移行作業その1.5」

ここまでが現在の作業状況。

これからやろうと思っていることが

③[outline]などの余計な独自タグの削除（約70記事分）
④ブロックエディタの使い方の勉強
⑤全記事ブロックエディタ化（アクセスの多い記事優先）
⑥スマホ用横スクロールテーブルが入っている記事は、SIMPLE BLOG DESIGN（以下SBD）を使いテーブルを作り直す
⑦吹き出し画像がワードプレスデフォルトの犬猫になってしまったため、吹き出しブロックを入れ直す
⑧THE THOR独自のコードで作成していたボックスやラベルをSWELLやSBDで作成する
⑨メインビジュアルを作成し、トップページをいい感じにする
⑩移行プラグインを無効化してデザイン崩れが無いか全記事確認、おかしな箇所があれば直す
⑪問題がなければ、クラシックエディタとTHE THORのテーマ、移行プラグインを削除

ざっとこんな予定です。

こうして見るとやらなきゃいけないことがたくさんあるなぁ……。

まずは、クラシックエディタで書いた記事をブロックエディタで編集できるようにする方法を調べて、ブロックエディタの使い方を学ばなければなと思います。

これだけで一日かかりそうだし、むしろ一日で済めば良いのだけれど……っていうレベル。

今月中に終わりますように！

また進捗と知見を共有できればなと思います。

以上、THE THORからSWELLへの移行作業記録、その１でした。