初心者THE THORからSWELLにテーマを切り替えたい…
移行作業した人のブログを読みたい…
レイアウトって崩れるか心配….
そんな悩みに答えます。
僕はTHE THORやAFFINGER5、Cocoonでブログを運営していて、それぞれのブログをSWELLに切り替えました。
本記事ではTHE THORからSWELLにテーマを移行する手順を経験者の目線で解説します。特に、これを知っていれば作業時間が大幅に短縮できるテクニックを紹介します。
【基礎知識】THE THOR専用テーマ乗り換えサポートプラグイン
THE THORからSWELLにテーマを切りかる作業は、それほど難しくありません。
SWELL開発会社がTHE THOR専用のテーマ乗り換えサポートプラグインを提供しているので、テーマを切り替えても記事の装飾はある程度そのままです。
一般的にWordPressテーマの切り替え作業で一番の問題はレイアウト崩れです。切り替え前に利用していたテーマの装飾機能は、切り替え後のテーマでは正常に表示されません。
記事数が多いほど修正に時間がかかる。
THE THORからSWELLへの切り替えはプラグインを使えばあまりレイアウト崩れを気にすることなく移行できます。
THE THOR乗り換えサポートプラグインについて
WordPressテーマの切り替え作業をすると、次のような問題が発生します。
発生するトラブルの一例
- 記事のレイアウトが変になる
- プログラムコードが表示される
- 元テーマの装飾が消える
かんたTHE THORのテーマ乗り換えサポートプラグインを活用すると移行時のレイアウト崩れを最小に限定できます。
THE THORからSWELLへテーマを切り替える移行手順
THE THORからSWELLにテーマを切り替え作業の手順についてです。
まずは全体の流れです↓
全体の流れ
- 最新版のSWELLを公式サイトからダウンロードする
- THE THOR乗り換えサポートプラグインを有効化
- アナリティクス＆アドセンス広告コードのコピー
- テーマをSWELLに切り替える
- デザイン崩れを修正
- プラグインの整理
- Meta titleとdescriptionの移設
- アナリティクスの設定
- 記事のリライト
- THE THOR乗り換えサポートプラグインを停止・削除する
- THE THORのテーマを削除する
かんた作業のステップをそれぞれ解説していきます！
テーマ移行手順①：最新版のSWELLを公式サイトからダウンロードする
まずは最新版のSWELLを公式サイトからダウンロードしましょう。
SWELLを購入してない場合は次の記事で購入方法を解説しています。
かんたこの段階ではまだSWELLを有効化しません。
テーマ移行手順②：THE THOR乗り換えサポートプラグインを有効化
THE THOR乗り換えサポートプラグインを有効化するステップです。
テーマ乗り換えサポートプラグインはSWELL購入者限定で、マイページからダウンロードできます。
テーマ移行手順③：アナリティクス＆アドセンス広告コードのコピー
「SWELLにテーマ切り替え後、アクセスが0になった！」。
たまにこういったツイートを見かけます。Googleアナリティクスコードの移設を忘れていることが原因です。アクセス解析にGooglアナリティクスを利用している人は、忘れず作業しましょう。
かんたアドセンス広告のコードも一緒にコピーしておきましょう！
アナリティクスのコードをコピー
「外観」→「カスタマイズ」→「基本設定」→「アクセス解析設定」と進み、「Google AnalyticsのトラッキングID」をコピーして、メモ帳などのアプリに貼り付けておきます。
アドセンス広告のコードをコピー
カスタマイズ画面から「基本設定→」「 高度な設定」と進み、アドセンス広告のコードをメモ帳などにコピーしておきましょう。
かんたこの場所以外にコードを設定している場合は、個別にコピーしておきましょう。
テーマ移行手順④：テーマをSWELLに切り替える
WordPressサイト上でテーマをTHE THORからSWELLに切り替えるステップです。
テーマからSWELLを有効化をクリック。
この段階ではTHE THORのテーマは削除せず、そのままにしておきます。
テーマ移行手順⑤：デザイン崩れを修正
テーマを切り替えるとあれこれ試したくなると思いますがいったん保留。
まずは各記事をチェックしてデザインや表示が変になっている箇所を修正していきます。
THE THOR乗り換えサポートプラグインを有効化していても、独自のカスタマイズをしていた場所などは変な表示になる可能性があります。
チェックポイント
- ショートコードなどのプログラムコードがそのまま表示されていないか？
- 装飾が乱れていないか？
- 装飾が消えていないか？
かんた後ほど全記事をリライトすることになりますが、まずは目に付く点のみを優先的に修正しましょう。
テーマ移行手順⑥：プラグインの整理
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よりおすすめです。
非推奨プラグイン
- Classic Editor
- Gutenberg
- Flying Scripts
- Autoptimize
- Async JavasScript
非推奨プラグインは、設定次第でSWELLと相性が悪く不具合を発生する可能性を含んでいます。
「ネットで紹介されているから….」といった理由で、どんな効果があるか分からずインストールするのはやめましょう。
THE THORはクラシックエディター推奨テーマです。オリジナルの装飾を利用するにはClassic Editorプラグインが必須でしたが、SWELLでは必要ありません。
「THE THORからSWELLにテーマを切り替えてもブロックエディターに切り替わらない」といったトピックがSWELLのサポートフォーラムに投稿されているのを見かけたことがあります。ブロックエディター環境で記事の編集をしたい場合はClassic Editorプラグインを有効化していないか確認しましょう。
テーマ移行手順⑦：Meta titleとdescriptionの移設
Meta titleとdescriptionは検索結果に表示される情報です。
THE THORのMeta titleとdescriptionは独自カスタムフィールドに保存されているので、SWELLに切り替えただけでは反映されません。
SEO SIMPLE PACKを使って管理する場合には移設作業が必要です。
保存先のカスタムフィールド
| THE THOR | SWELL | |
|---|---|---|
| meta title | title | ssp_meta_title |
| meta description | description | ssp_meta_description |
記事数が少ない場合は手動でコツコツ変更しても構いませんが、記事数が多い場合は一括変換したほうが楽です。
カスタムフィールドはデータベースに保存されています。データベースを直接操作するか、プラグインでデータベースにアクセスしまとめて変更することが可能です。
本記事では無料のDatabase My Adminプラグインを使う方法を紹介します。
Database My AdminプラグインはWordPresssプラグインディレクトリーに登録されています。WordPressサイト上で「プラグイン」→「新規追加」と進み、Database My Adminと検索するとヒットします。
Database My Adminプラグインを有効化した後、次のステップに進んでください。
Meta titleを移設する方法
ダッシュボード左手の「Database Admin」をクリック↓
Select Databaseから対象のデータベースを選択↓
2つデータベースが表示されている場合はどちらかいずれかのデータベースをクリックし、次のページで表示される「tables:」の中身を確認します。
「wp」などのプレフィックスが付いている方です。
「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への移行後の各種設定について
テーマの以降後、または並行して行う設定作業です。
ふきだしの登録
ブログ記事の装飾機能、「ふきだし」を使う人向けの設定です。
かんたこれがふきだしです！
SWELLのふきだしは事前登録し、投稿内で呼び出すことができる仕組みになっています。
ふきだしの登録は、メニューの「ふきだし」 →「新規ふきだし追加」と進みます。
各種設定を行います。
設定項目
- ふきだしのタイトル
- 画像
- アイコン名（アイコンの下に表示される名前）
- アイコンの枠
- ふきだしの形
- ふきだしの向き
- ふきだしの線
- ふきだしの色
必要事項を入力後は、「登録」をクリックし設定を保存すれば作業完了です。
かんたふきだしに登録できる数量に制限はありませんので好きなだけ登録しましょう！
Font Awesomeを使えるようにする
SWELLでFont Awesomeは初期設定で読み込まれません。
外部からの不必要なファイルの読み込みをしないことでページ読み込み速度をあげることが可能なので、Font Awesomeを使わない人はこのステップは不要です。
Font Awesomeを有効化するの手順についてです。
SWELL設定→「Font Awesome」と進み、以下いずれかを選択します。
- CSSで読み込む
- JSで読み込む
バージョンはお好みで「V6」または「V5」を選択しましょう。
「変更を保存」をクリックし設定を保存します。
jQueryの設定
jQueryを使った独自カスタマイズを予定している向けの設定です。
「SWELL設定」→「jQuery」タブと進み、jQueryの読み込みにチェックを入れましょう。
WordPressプラグインの中には「jQueryを強制的に読み込む」にチェックを入れておかないと、正常に動作しないものがあります。
独自CSSの管理方法
独自のCSSを追加する場合についてです。
THE THORを利用した時、カスタマイザーの「追加CSS」に独自のコードを入力していますよね？SWELLでも、カスタマイザーの追加CSSに入力しても反映されますが別のオプションが用意されています。
「SWELL設定」→「エディター設定」→「カスタム書式」にある「カスタム書式用CSS」です。このカスタム書式用CSSに入力したコードは、フロントだけでなくエディター側にも表示される仕様です↓
| オプション | 反映される場所 |
|---|---|
| 追加CSS | フロントのみ |
| カスタム書式用CSS | フロントと、エディター |
追加した独自CSSがエディター側にも表示されるので、わざわざページを確認する手間が不要になります。
SWELLの子テーマ
SWELLの子テーマは、SWELL公式サイト上にあります。
会員サイトにログイン後、「マイページ」のSWELL製品ダウンロード内にある「子テーマ」からzip形式の子テーマをダウンロードできます。
WordPressの子テーマは、SWELLに限らず必須ではありません。子テーマは、テーマフォルダ内にあるPHPテンプレートファイルをカスタマイズする人向けです。
カスタマイザーなどの管理画面から設定するだけといったカスタマイズであれば、利用する必要はありません。
以下のカスタマイズだけなら子テーマは要りません
- プラグインをいくつか入れたい
- カスタマイザーからオプションを選択してデザインを作りたい
- CSSをいくつか修正したい
問い合わせフォームの設置
THE THORで問い合わせフォームを作る場合にはプラグインやコードを使う必要はありません。固定ページを作成しパーマリンクを「contact」にするだけでした。
問い合わせフォームが自動的に表示されるのはTHE THORの仕様です。
SWELLで問い合わせフォームを作る場合には、「プラグインを使う」「自分でコードを書く」といった方法があります。
特に強いこだわりがなければ、WPForms Liteなどの無料の問い合わせフォームプラグインを使うのがおすすめです。
プラグインで問い合わせフォーム作るメリットは自分でコードを書くより導入が簡単な点です。「フォームを目的別に複数作ることができる」「入力オプションを自由に拡張できる」といった自由度も魅力です。
OGPの設定
OGPはTwitterなどのSNSに記事のURLが投稿された時に表示される情報のことです。
OGPに関しては何も設定しなくても記事で設定したアイキャッチ画像が表示されますが、設定し忘れたさいに表示させるデフォルト画像と、SNSのタイムラインに表示されるが画像サイズの変更方法を紹介します。
デフォルト画像の設定方法
デフォルト画像は、固定ページや投稿記事にアイキャッチ画像が未設定の時に表示される画像です。
「SEO PACK」→「OGP設定」と進み「基本設定」で画像を設定します。
設定後、「設定を保存する」をクリックし保存します。
OGP画像の表示サイズ変更方法
「SEO PACK」→「OGP設定」と進み「Twitter」タブを選択します。
カードタイプから任意の設定を選択します。
| 設定オプション | 内容 |
|---|---|
| summary | デフォルト（129×129）設定 |
| summary_large_image | 表示サイズを最大化（504×264）する設定 |
かんた「大きい方が目立つ！」僕は「summary_large_image」をおすすめします！
テーマ切り替えに関するFAQ
THE THORからSWELLへの移行に関するFAQです。
記事のラライト作業ってどれくらい時間がかかるの？
記事に利用している装飾次第です。
装飾の数が多ければ修正にかかる時間が増えます。1記事あたり5分~15分程度は目安として見積もっておきましょう。
THE THORテーマ切り替えサポートプラグインって無料？ダウンロード方法は？
THE THORテーマ切り替えサポートプラグインは無料です。
SWELL公式サイトからダウンロードできます。
SWELLのアフィリエイトはどこから参加できますか？
SWELLの公式サイト上にアフィリエイトプログラムへの参加リンクがあります。ASPは、もしもアフィリエイトです。
SWELLってちょっと高いですよね？どこかで安く販売していないの？
SWELLのセール、セルフバックに関する情報は次の記事で詳しく解説しています。
まとめ
WordPressテーマをTHE THORからSWELLに移行する方法を解説しました。
一般的にテーマの切り替え作業はものすごく手間がかかります。
切り替え元のテーマの装飾機能の手直しが必要なため、次のようなケースではとにかく時間がかかります。
移行に時間がかかるケース
- 記事数が多い
- テーマ固有の装飾機能を多様している記事数が多い
乗り換えサポートプラグインがあるので、THE THORからSWELLへテーマ切り替えに関してはTHE THORからSWELL以外のテーマに移行するよりも楽です。
それでも、THE THORの装飾が完璧に切り替わるわけではないのでリライトが必要になってくる点に注意しならがら移行作業を計画しましょう。