THE THORからSWELLへの移行手順を解説【テーマ切り替え時の注意点あり】

THE THOR(ザ・トール)からSWELLへの移行手順を解説【テーマ切り替え時の注意点あり】
初心者

THE THORからSWELLにテーマを切り替えるたい…
移行作業した人のブログを読みたい…
レイアウトって崩れるか心配….

そんな悩みに答えます。

僕はTHE THORやAFFINGER5、Cocoonでブログを運営していて、それぞれのブログをSWELLに切り替えました。

本記事ではTHE THORからSWELLにテーマを移行する手順と注意事項を経験者の目線で解説します。特に、これを知っていれば作業時間が大幅に短縮できるテクニックを紹介します。

この記事を書いた人
  • IT業界22年のベテラン エンジニア
  • WordPressで企業サイトの構築しています
  • 取り扱いWordPressテーマは300個オーバー
SWELLマニアの かんた です
目次

【基礎知識】THE THOR専用テーマ乗り換えサポートプラグイン

【基礎知識】THE THOR専用の乗り換えサポートプラグイン

THE THORからSWELLにテーマを切りかる作業は、それほど難しくありません

テーマ切り替え作業で一番の問題はレイアウト崩れを解消するリライト作業です。TEH THORからSWELLに乗り換えるさい専用のプラグインがあるので、あまりレイアウト崩れを気にすることなく移行作業が行なえます。

THE THOR乗り換えサポートプラグインについて

WordPressテーマの切り替え作業をすると、次のような問題が発生します。

発生するトラブルの一例

  1. 記事のレイアウトが変になる
  2. プログラムコードが表示される
  3. 元テーマの装飾が消える
かんた

THE THORのテーマ乗り換えサポートプラグインを活用すると移行時のレイアウト崩れを最小に限定できます。

THE THORからSWELLへテーマを切り替える移行手順

CocoonからSWELLへテーマを切り替える移行手順

THE THORからSWELLにテーマを切り替え作業の手順についてです。

まずは全体の流れです↓

全体の流れ

  1. 最新版のSWELLを公式サイトからダウンロードする
  2. THE THOR乗り換えサポートプラグインを有効化
  3. アナリティクス&アドセンス広告コードのコピー
  4. テーマをSWELLに切り替える
  5. デザイン崩れを修正
  6. プラグインの整理
  7. Meta titleとdescriptionの移設
  8. アナリティクスの設定
  9. 記事のリライト
  10. THE THOR乗り換えサポートプラグインを停止・削除する
  11. THE THORのテーマを削除する
かんた

作業のステップをそれぞれ解説していきます!

テーマ移行手順①:最新版のSWELLを公式サイトからダウンロードする

まずは最新版のSWELLを更新サイトからダウンロードしましょう。

SWELLを購入してない場合は次の記事で購入方法を解説しています。

かんた

この段階ではまだSWELLを有効化しません。

テーマ移行手順②:THE THOR乗り換えサポートプラグインを有効化

The Thor乗り換えサポートプラグインを有効化するステップです。

TEH THORテーマ切り替えサポートプラグイン

乗り換えサポートプラグインは有効化するだけです。プラグインでの設定はありません。

テーマ移行手順③:アナリティクス&アドセンス広告コードのコピー

SWELLにテーマ切り替え後、アクセスが0になった!」。

たまにこういったツイートを見かけます。Googleアナリティクスコードの移設を忘れていることが原因です。アクセス解析にGooglアナリティクスを利用している人は、忘れず作業しましょう

かんた

アドセンス広告のコードも一緒にコピーしておきましょう!

アナリティクスのコードをコピー

「外観」→「カスタマイズ」→「基本設定」→「アクセス解析設定」と進み、「Google AnalyticsのトラッキングID」をコピーして、メモ帳などのアプリに貼り付けておきます。

アドセンス広告のコードをコピー

カスタマイズ画面から「基本設定→」「 高度な設定」と進み、アドセンス広告のコードをメモ帳などにコピーしておきましょう。

かんた

この場所以外にコードを設定している場合は、個別にコピーしておきましょう。

テーマ移行手順④:テーマをSWELLに切り替える

WordPressサイト上でテーマをTHE THORからSWELLに切り替えるステップです。

テーマからSWELLを有効化をクリック。

この段階ではTHE THORのテーマは削除せず、そのままにしておきます。

テーマ移行手順⑤:デザイン崩れを修正

テーマを切り替えるとあれこれ試したくなると思いますがいったん保留。

まずは各記事をチェックしてデザインや表示が変になっている箇所を修正していきます。

この作業は必須ではありません。デザイン崩れがない人は次のステップに進みましょう。

THE THOR乗り換えサポートプラグインを有効化していても、独自のカスタマイズをしていた場所などは変な表示になる可能性があります。

チェックポイント

  1. ショートコードなどのプログラムコードがそのまま表示されていないか?
  2. 装飾が乱れていないか?
  3. 装飾が消えていないか?
かんた

後ほど全記事をリライトすることになりますが、まずは目に付く点のみを優先的に修正しましょう。

テーマ移行手順⑥:プラグインの整理

The Thorで使っていたプラグインでSWELL移行後に不要になるものを無効化して削除しましょう。

THE THORで必須だったClassic Editorプラグインですが、SWELLでは必要ありません。SWELLはブロックエディター環境でSWELLオリジナルの装飾機能が使えます。

かんた

Classic Editorプラグインや、クラシックエディターを拡張する系のプラグインは削除しましょう!

不要なプラグインを停止後は、SWELL環境で利用するプラグインをインストールしましょう。

SWELLには「これは絶対いれないとダメ」というプラグインはありません。

個人的には以下のプラグインについては公式サイトでも推奨しているので入れておくべきだと思います。

推奨プラグイン

SEO SIMPLE PACKはmeta周りの設定をするためのプラグインです。

同じような機能を持つプラグインとしてはAll in One SEOのほうが有名です。SEO SIMPLE PACKはSWELL開発者さんが公開している無料のプラグインで、SWELLとの相性も抜群です。

All in One SEOは機能が豊富ですが、正直いってブログ運営で使わない機能を含んでいます。もともとの開発言語が英語。日本語化されていますが、ちょっと微妙な表現で初心者には分かりにくい点があります。

SEO SIMPLE PACKはSWELL開発者さんが作ったものなので、プラグインページの用語や説明も読みやすく理解しやすいのがメリット。

かんた

ブログ運営に適した機能があることからAll in One SEOよりおすすめです。

非推奨プラグイン

  1. Classic Editor
  2. Gutenberg
  3. Flying Scripts
  4. Autoptimize
  5. Async JavasScript

非推奨プラグインは、設定次第でSWELLと相性が悪く不具合を発生する可能性を含んでいます。

ネットで紹介されているから….」といった理由で、どんな効果があるか分からずインストールするのはやめましょう。

THE THORはクラシックエディター推奨テーマです。オリジナルの装飾を利用するにはClassic Editorプラグインが必須でしたが、SWELLでは必要ありません。

THE THORからSWELLにテーマを切り替えてもブロックエディターに切り替わらない」といったトピックがSWELLのサポートフォーラムに投稿されているのを見かけたことがあります。ブロックエディター環境で記事の編集をしたい場合はClassic Editorプラグインを有効化していないか確認しましょう。

テーマ移行手順⑦:Meta titleとdescriptionの移設

推奨プラグイン「SEO SIMPLE PACK」有効時の解説です。

Meta titleとdescriptionは検索結果に表示される情報です。

THE THORのMeta titleとdescriptionは独自カスタムフィールドに保存されているので、SWELLに切り替えただけでは反映されません。

SEO SIMPLE PACKを使って管理する場合には移設作業が必要です。

保存先のカスタムフィールド

THE THORSWELL
meta titletitlessp_meta_title
meta descriptiondescriptionssp_meta_description

記事数が少ない場合は手動でコツコツ変更しても構いませんが、記事数が多い場合は一括変換したほうが楽です。

カスタムフィールドはデータベースに保存されています。データベースを直接操作するか、プラグインでデータベースにアクセスしまとめて変更することが可能です。

本記事では無料のDatabase My Adminプラグインを使う方法を紹介します。

Database My AdminプラグインはWordPresssプラグインディレクトリーに登録されています。WordPressサイト上で「プラグイン」→「新規追加」と進み、Database My Adminと検索するとヒットします。

Database My Adminプラグインでカスタムフィールドを一括置換する方法

Database My Adminプラグインを有効化した後、次のステップに進んでください。

Meta titleを移設する方法

事前にバックアップを取得し、復元できる状態であることを確認した後、作業を行ってください。

STEP
データベースを選択

ダッシュボード左手の「Database Admin」をクリック↓

Database Admin

Select Databaseから対象のデータベースを選択↓

データベースを選択

2つデータベースが表示されている場合はどちらかいずれかのデータベースをクリックし、次のページで表示される「tables:」の中身を確認します。

wp」などのプレフィックスが付いている方です。

このプレフィックスはWordPressインストール時に指定した任意の文字列なので環境ごとに異なります。

STEP
コマンド

SELECT * FROM」と表示されている入力フォーム部分を選択し、表示されている「SELECT * FROM」を消してカラにします↓

フォームを選択

次のコマンドを入力し、フォーム下部の「Excute」をクリックします。

update wp_postmeta set meta_key = 'ssp_meta_title' where meta_key = 'title'

画面右上に「Success」と表示されれば作業完了です。

Meta descriptionを移設する方法

事前にバックアップを取得し、復元できる状態であることを確認した後、作業を行ってください。

やり方はMeta descriptionの移行方法は、Meta titleとほぼ同じです。コマンドのみ違います。

Database Adminからアクセスし、次のコマンドを実行しましょう↓

update wp_postmeta set meta_key = 'ssp_meta_description' where meta_key = 'description'

テーマ移行手順⑧:アナリティクスの設定

Googleアクセス解析コードの設置作業です。

ダッシュボード左手のメニュー「SEO PACK」→「Googleアナリティクス」と進み、「トラッキングID」にコードを入力します。

アナリティクスの設定

設定を保存する」をクリックし、設定を保存します。

テーマ移行手順⑨:記事のリライト

リライト、つまり修正作業です。THE THORからSWELLに切り替えた後、テーマ乗り換えサポートプラグインの効果で装飾が普通に表示されている場合でもこの作業が必要です。

記事内にあるTHE THORの装飾を削除するか、SWELLの装飾機能に置き換えましょう。記事数が多い場合やTHE THORで装飾を多用していると時間がかかります。

かんた

地道にコツコツ作業しましょう。

テーマ移行手順⑩:THE THOR乗り換えサポートプラグインを停止・削除する

記事のリライトが完了したらTHE THOR乗り換えサポートプラグインを停止します。

THE THOR乗り換えサポートプラグインは、THE THORの装飾コードを残しつつSWELL用に表示を変換する役割です。

THE THORの装飾がSWELLの装飾に完全に変換されるわけではありません。

プラグインを有効化したままだとページの読み込みスピードが低下します、SWELLへの移行完了後は無効化するのがおすすめです。

かんた

SWELL公式サイトの引用です↓

2つのテーマ機能を共存させる形になるため、サイトが重くなる可能性があります。全記事をリライトした後にプラグインを無効化することをオススメします。

引用元:SWELL公式サイト

THE THOR乗り換えサポートプラグインを停止した後に記事の表示を確認し、表示ズレなどの問題がなければプラグインを削除しましょう。

テーマ移行手順⑪:THE THORを削除する

SWELLへの移行が完全に終了した段階でTHE THORのテーマは削除して構いません。

WordPressは有効化しているテーマ以外を残しておくと、サイトヘルスで「停止中のテーマを削除してください」と表示されます。

もしかしてもまた使うかも?」という場合は、ローカル環境にダウンロードして保存しておきましょう。

【備考】THE THORからSWELLへの移行後の各種設定について

【備考】THE THORからSWELLへの移行後の各種設定について

テーマの以降後、または並行して行う設定作業です。

ふきだしの登録

ブログ記事の装飾機能、「ふきだし」を使う人向けの設定です。

かんた

これがふきだしです!

SWELLのふきだしは事前登録し、投稿内で呼び出すことができる仕組みになっています。

ふきだしの登録は、メニューの「ふきだし」 →「新規ふきだし追加」と進みます。

各種設定を行います。

ふきだしの設定

設定項目

  • ふきだしのタイトル
  • 画像
  • アイコン名(アイコンの下に表示される名前)
  • アイコンの枠
  • ふきだしの形
  • ふきだしの向き
  • ふきだしの線
  • ふきだしの色

必要事項を入力後は、「登録」をクリックし設定を保存すれば作業完了です。

かんた

ふきだしに登録できる数量に制限はありませんので好きなだけ登録しましょう!

Font Awesomeを使えるようにする

この設定は任意です。

SWELLでFont Awesomeは初期設定で読み込まれません。

外部からの不必要なファイルの読み込みをしないことでページ読み込み速度をあげることが可能なので、Font Awesomeを使わない人はこのステップは不要です。

Font Awesomeを有効化するの手順についてです。

Font Awesomeの読み込み設定

SWELL設定→「Font Awesome」と進み、以下いずれかを選択します。

  • CSSで読み込む
  • JSで読み込む

バージョンはお好みで「V6」または「V5」を選択しましょう。

変更を保存」をクリックし設定を保存します。

jQueryの設定

jQueryを使う予定がなければこのステップは不要です。

jQueryを使った独自カスタマイズを予定している向けの設定です。

「SWELL設定」→「jQuery」タブと進み、jQueryの読み込みにチェックを入れましょう。

jQueryの設定

WordPressプラグインの中には「jQueryを強制的に読み込む」にチェックを入れておかないと、正常に動作しないものがあります。

独自CSSの管理方法

独自のCSSを追加する場合についてです。

THE THORを利用した時、カスタマイザーの「追加CSS」に独自のコードを入力していますよね?SWELLでも、カスタマイザーの追加CSSに入力しても反映されますが別のオプションが用意されています

「SWELL設定」→「エディター設定」→「カスタム書式」にある「カスタム書式用CSS」です。このカスタム書式用CSSに入力したコードは、フロントだけでなくエディター側にも表示される仕様です↓

カスタムCSS
オプション反映される場所
追加CSSフロントのみ
カスタム書式用CSSフロントと、エディター
CSSの管理方法

追加した独自CSSがエディター側にも表示されるので、わざわざページを確認する手間が不要になります。

SWELLの子テーマ

SWELLの子テーマは、SWELL公式サイト上にあります。

子テーマのダウンロードは会員限定です。

会員サイトにログイン後、「マイページ」のWELL製品ダウンロード内にある「子テーマ」からzip形式の子テーマをダウンロードできます。

子テーマをダウンロード

WordPressの子テーマは、SWELLに限らず必須ではありません。子テーマは、テーマフォルダ内にあるPHPテンプレートファイルをカスタマイズする人向けです。

カスタマイザーなどの管理画面から設定するだけといったカスタマイズであれば、利用する必要はありません。

以下のカスタマイズだけなら子テーマは要りません

  1. プラグインをいくつか入れたい
  2. カスタマイザーからオプションを選択してデザインを作りたい
  3. CSSをいくつか修正したい

問い合わせフォームの設置

THE THORで問い合わせフォームを作る場合にはプラグインやコードを使う必要はありません。固定ページを作成しパーマリンクを「contact」にするだけでした。

問い合わせフォームが自動的に表示されるのはTHE THORの仕様です。

SWELLで問い合わせフォームを作る場合には、「プラグインを使う」「自分でコードを書く」といった方法があります。

特に強いこだわりがなければ、WPForms Liteなどの無料の問い合わせフォームプラグインを使うのがおすすめです。

プラグインで問い合わせフォーム作るメリットは自分でコードを書くより導入が簡単な点です。「フォームを目的別に複数作ることができる」「入力オプションを自由に拡張できる」といった自由度も魅力です。

OGPの設定

SEO SIMPLE PACKプラグインを有効化していることが前提での解説です。

OGPはTwitterなどのSNSに記事のURLが投稿された時に表示される情報のことです。

OGPに関しては何も設定しなくても記事で設定したアイキャッチ画像が表示されますが、設定し忘れたさいに表示させるデフォルト画像と、SNSのタイムラインに表示されるが画像サイズの変更方法を紹介します。

デフォルト画像の設定方法

デフォルト画像は、固定ページや投稿記事にアイキャッチ画像が未設定の時に表示される画像です。

「SEO PACK」→「OGP設定」と進み「基本設定」で画像を設定します。

設定後、「設定を保存する」をクリックし保存します。

OGP画像の表示サイズ変更方法

「SEO PACK」→「OGP設定」と進み「Twitter」タブを選択します。

カードタイプから任意の設定を選択します。

設定オプション内容
summaryデフォルト(129×129)設定
summary_large_image表示サイズを最大化(504×264)する設定
OGPの画像サイズ設定オプション
かんた

「大きい方が目立つ!」僕は「summary_large_image」をおすすめします!

テーマ切り替えに関するFAQ

テーマ切り替えに関するFAQ

THE THORからSWELLへの移行に関するFAQです。

記事の修正ってどれくらい時間がかかるの?

記事に利用している装飾次第です。

装飾の数が多ければ修正にかかる時間が増えます。

1記事あたり5分~15分程度は目安として見積もっておきましょう。

THE THORテーマ切り替えサポートプラグインって無料?ダウンロード方法は?

THE THORテーマ切り替えサポートプラグインは無料です。
SWELL公式サイトからダウンロードできます。

SWELL購入者限定です。

SWELLのアフィリエイトはどこから参加できますか?

SWELLの公式サイト上にアフィリエイトプログラムへの参加リンクがあります。ASPはもしもアフィリエイトです。

まとめ

WordPressテーマをTHE THORからSWELLに移行する方法を解説しました。

一般的にテーマの切り替え作業はものすごく手間がかかります。
切り替え元のテーマの装飾機能の手直しが必要なため、次のようなケースではとにかく時間がかかります。

移行に時間がかかるケース

  1. 記事数が多い
  2. テーマ固有の装飾機能を多様している記事数が多い

乗り換えサポートプラグインがあるので、THE THORからSWELLへテーマ切り替えに関してはTHE THORからSWELL以外のテーマに移行するよりも楽です。

それでも、THE THORの装飾が完璧に切り替わるわけではないのでリライトが必要になってくる点に注意しならがら移行作業を計画しましょう。

よかったらシェアしてね!
  • URLをコピーしました!
目次