こんにちは、つむり @TsumuRi です。
WordPressテーマ「Cocoon」を4年使った当ブログ。2022年はデザインをすっきりリニューアルしたいと思い立ち、WordPressテーマ「SWELL」に乗り換えました。
別のテーマからの乗り換えは、乗り換えサポート用プラグインがあるので簡単。
他テーマからSWELLに乗り換えるまでには2段階あって、
- WordPressテーマに「前のテーマ」と「SWELL」の2つある状態
- 乗り換えサポート用プラグインにより、「前のテーマ」の機能や表示を「SWELL」上に再現
- WordPressテーマが「SWELL」だけの状態
- 「前のテーマ」「乗り換えサポート用プラグイン」を削除する前に、全記事をSWELLに合わせてリライトする必要がある
- リライトが完了してから「前のテーマ」「乗り換えサポート用プラグイン」を削除する
乗り換え当日はSTEP 1を目指します。
STEP2までもっていこうと思うと、けっこうやることが多いんですよ。作業自体は簡単だけど、多い。だからここまではなかなか終わりません（私も、まだ終わってません）。乗り換え当日はここまでは考えなくて大丈夫です。
私がテーマ変更当日に実際にやった必要最低限の作業はズバリこれです！
優先順位は、
- 最優先はブログが表示されて記事が読めること。これは絶対。
- 次点はSEO対策、アクセス解析、広告の表示。
- デザインは崩れてなければいい
ということで、乗り換え当日は乗り換えサポート用プラグインがカバーしない作業のみ実施すればOKです。
とにかく読めるだけでいいなら①②③④＋⑦だけでも。⑤⑥はSEO・アクセス解析・広告を気にしないなら要りません。（気にする人は多いだろうから、ほぼ必須かなとはおもう）
ブログ全体のデザインは後日ゆっくりカスタマイズしたら大丈夫。SWELLはデフォルトデザインがイケてますし、デザインをいじりはじめると高確率で沼にハマるので、当日はどうしても許せないところだけ直しましょ！
事前準備
WordPressのバックアップ
テーマ変更はWordPressの機能に影響する可能性があるため、バックアップを取ります。
ちなみに当ブログではUpdraftPlusプラグインを利用、Dropboxに保存しています。やり方はこちらのサイトをご参考に。
また、自分で追加したコードをテーマ完全移行後も使うならテキストエディタにコピぺしておくといいかも。
3ヶ所チェック
- 「外観」＞「テーマファイルエディタ」
-
スタイルシート（style.css）
テーマのための関数（function.php） - 「外観」＞「カスタマイズ」
-
追加CSS
つむりアプリーチなど外部サービス用のCSSはあとで使いました
SWELLの動作環境の確認
SWELLを購入するその前に。レンタルサーバーの仕様がSWELLの動作環境を満たしているかを確認します。
- PHP7.3以上
- WordPress 5.5以上（推奨：5.6～）
特に、何年も運営しているブログは、古いバージョンのPHPを使い続けていることがあるので。
つむりなにを隠そう私のことです！
PHPのバージョンが古いときは、テーマ変更前にバージョンを切り替えます。
全体の流れはこちらをご参考に。
レンタルサーバーでの切り替え手順はお使いのレンタルサーバーのヘルプを見てください。
SWELLの購入・会員登録
SWELLのテーマサイトから、テーマファイルを購入します（※クレジットカード要）
購入後、ダウンロードリンクつきの購入確認メールが届きます。
ダウンロードリンクからSWELL本体をダウンロードしてもよいですが、子テーマや乗り換えサポート用プラグインが必要なので、ユーザ登録を先に済ませる方が効率的かと。
SWELL会員サイト SWELLERS’ に新規会員登録します（※購入時のメールアドレス要）
登録はこちらから
これにより、SWELLの全機能が解放されます。
- SWELLのアップデート（※要アクティベート）
- 子テーマ・乗り換えサポート用プラグインの入手
- デモサイトデータ（デザイン着せ替えファイル）の入手
- ユーザフォーラムへの参加（質問・不具合報告の受付）
- SWELLのアフィリエイト
テーマ＆乗り換えサポート用プラグイン導入
会員サイト SWELLERS’ から下記のファイルをダウンロードします。
- SWELL 本体最新版（swell-x-x-x-x.zip）
- 子テーマ（swell_child.zip）
- 乗り換えサポート用プラグイン（Cocoon用）
子テーマについては、テーマエディタで「スタイルシート（style.css）」や「テーマのための関数（function.php）」にコードを書くつもりなら必須です。親テーマ（SWELL本体）をアップデートすると、親テーマのテーマファイルに書いたコードは消えてしまうので。
よく分からなかったら、とりあえず入れておいて害はありません（雑かよｗ）
ダウンロードはこちらから
SWELL本体と子テーマをインストール・有効化します。
- WordPress管理画面で「外観」＞「テーマ」へ移動
- 「新規追加」をクリック
- 「テーマのアップロード」をクリック
- 「ファイルの選択」をクリック、SWELL本体を選ぶ（zipファイルのまま）
- 「今すぐインストール」をクリック
- 子テーマを同様にインストール
- 子テーマを有効化（子テーマを使わない場合、SWELL本体を有効化）
画像付きの解説はこちら
乗り換えサポート用プラグインをインストール・有効化します。
- WordPress管理画面で「プラグイン」＞「新規追加」へ移動
- 「プラグインのアップロード」をクリック
- 「ファイルの選択」をクリック、乗り換えサポート用プラグイン（zipファイル）を選ぶ
- 「今すぐインストール」をクリック
- 乗り換えサポート用プラグインを有効化
これだけでCocoon時代の記事が再現性よく表示されるはず。
ただし、Cocoonで使っている書式によっては乗り換えサポート用プラグインで対応していないことがあります。SWELLのテーマサイトで確認してください。
SWELLのアクティベート（認証）
SWELLをアクティベート（認証）します。
- WordPress管理画面で「SWELL設定」＞「アクティベート」に移動
- 「ユーザー認証」のメールアドレス欄に、会員登録したメールアドレスを入力・送信
- メールで送られてくる「認証用URL」をクリック（3分以内）
- 認証用URLの飛び先（会員サイトのマイページ）で認証が完了したことを確認
- 「自分のサイトに戻る」ボタンをクリック、完了を確認
画像付きの解説
認証が完了すると、SWELLのアップデートが利用できるようになります。
SWELLはかなり頻繁にアップデートを繰り返しているので、最速で認証することをおすすめします。
つむり私が乗り換えたときは2日後にはアップデートされていた記憶が……
ここまでの作業で、乗り換え前のテーマの書式を引き継いだ記事が表示されるようになっているはず。記事ページの表示を確認してみてください。
プラグイン「SEO SIMPLE PACK」の導入
プラグイン「SEO SIMPLE PACK」をインストール・有効化します。
- WordPress管理画面で「プラグイン」＞「新規追加」へ移動
- 検索窓に「SEO SIMPLE PACK」と入力、ENTERキーを押下
- プラグインの作者が「LOOS,Inc.」であることを確認
- 「今すぐインストール」をクリック
- SEO SIMPLE PACKを有効化
SEO SIMPLE PACKの設定項目は、こだわりがなければデフォルトで大丈夫です。
こちらもチェック
SEO SIMPLE PACKが必要な理由
SWELLのテーマ本体には、検索エンジンに認識させるメタタグ、Googleアナリティクスのタグ、ウェブマスターツールのタグを設定する機能がありません。
つむりCocoonはテーマ本体のみでGoogleアナリティクスやウェブマスターツールのタグを設定できます。テーマ本体で設定してませんでした？
また、乗り換えサポート用プラグインにはCocoonのSEO設定を引き継ぐ機能がありません。
したがって、他のSEOプラグインで対応済みの場合を除いては、「SEO SIMPLE PACK」を導入してSEO機能を追加、新たにタグを設定する必要があるのです。
Google関連の設定
Google関連の設定、具体的には「Googleアナリティクス」「Googleサーチコンソール」「Googleアドセンス」のコードを入力します。
GoogleアナリティクスやGoogleサーチコンソールのコードは、プラグイン「SEO SIMPLE PACK」で設定します。
- WordPress管理画面で「SEO PACK」をクリック
- 「Googleアナリティクス」タブをクリック
- 「トラッキングID」または「測定ID」を入力
- 「設定を保存する」をクリック
- 「ウェブマスターツール」タブをクリック
- 「Googleサーチコンソールの認証コード」を入力
- 「設定を保存する」をクリック
他のウェブマスターツール（Bing、Baidu、Yandex）も同じ画面で設定できるので、使っていたらまとめて作業しておくとよいですね。
Gooogleアドセンスの広告コードは、SWELL設定に入れていきます。
- WordPress管理画面で「SWELL設定」に移動
- 「広告コード」タブをクリック
- 「記事内広告［ad］」「目次広告」「自動広告」「インフィード広告」に該当するコードをコピペ
- 「変更を保存」をクリック
つむりアンチ自動広告な私は自動広告欄は空白、Googleアドセンス側でオフにしています
Multiplex 広告（旧関連コンテンツ）を各記事の最後に入れる場合はウィジェットを利用します。
- WordPress管理画面で「外観」＞「ウィジェット」に移動
- 「[SWELL] 広告コード」をクリック
- メニューの中から「関連記事下」をクリック
- 「広告タグ」欄に該当するコードをコピペ
- 自動保存されたら完了
つむりMultiplexより関連コンテンツのほうが好きでした
こちらもチェック
Google以外の広告は別途対応が必要です。
- ブログのサイドバーやフッターなどの広告は「カスタマイズ」メニューで設定します。
- 記事内の広告は、記事ページの表示を個別に確認してみてください。乗り換えサポート用プラグインでサポートできる分は出力されているはずです。一部対応できないものもあるようです。
ここまで作業すれば、移行前のテーマの書式を引き継いだ記事が表示され、Googleのツールやアドセンスはこれまでどおり使えるはずです。
つむり1〜2時間で終わるのでは
表示の崩れがないことを確認・修正
最後に、記事ページの表示が崩れてないことを確認します。
つむりといっても、200記事を超えてんですが（白目）
優先順位をつけて効率的にチェック
記事数が多すぎる場合は、優先順位をつけましょう。
- よく読まれている記事
- 好きな記事
- ビジュアルに凝った記事
- 収益が多い記事
切り口は様々ですが、自分なりに優先順位をつけて「優先順位の高い方から何記事まで見る」と決めたら終わります。私は単純にPV数で上から順に50記事チェックして、残りはあきらめました。
つむり1日平均1PV未満の記事が崩れても誰も気にしないと思う……
チェック中には下記のような現象に遭遇しました。
- 枠を設定した箇所に枠がない
- Cocoon時代に設定した色がSWELL移行後は浮いている
- 吹き出しの横幅が妙に狭い
- エディタでSWELLサポート外の要素に警告が出ている
ただ、読めるか読めないかで言えば読めるので、当日はスルーして後日リライトすることにしました。最初に書いたとおり、ブログが表示されて記事が読めたらいいので。読めるか読めないかの観点では読めないところはなかったです。SWELLの移行サポートプラグインの優秀さを実感しました。
もし、あまりにたくさん崩れていたら、当日はいったんCocoonに戻して後日修正したらいいかと。ブログ自体のデザインや記事本文をいじる前なら、テーマを戻したときに崩れるリスクは小さいので。
プラグインの干渉がないかもチェック
SWELLのテーマサイトでも注意喚起されているように、プラグインとの相性が悪い場合もあるので、なんかおかしいな？と思ったらプラグインも疑ってみてください。
つむり私の場合は致命的なものはなかったです
まとめ：SWELLの乗り換えサポート用プラグインは優秀すぎる
以上でテーマ変更の当日にやっておきたい作業は完了です。お疲れさまでした！
大急ぎで全部直さなくてもいいという点で、SWELLの乗り換えサポート用プラグインは本当に優秀だと実感（笑）
これを書いている現在（乗り換えから3ヶ月経過）も全記事のリライトは終わってないので、「Cocoon」「乗り換えサポート用プラグイン」の削除には至ってません。
2つのテーマ機能を共存させる形になるため、サイトが重くなる可能性があります。
全記事をリライトした後にプラグインを無効化することをオススメします。
SWELL｜CocoonからSWELLへ乗り換えるためのサポート用プラグイン
テーマサイトでは2つのテーマ共存はサイトが重くなる可能性があると注意喚起されているので、ゆくゆくは完全移行したいものですが……
つむり記事が増えてからのテーマ完全移行は作業量が多すぎる！そして作業に飽きる！！！なにより昔の記事がグチャグチャで終わらない！！！！！
ということで、乗り換えサポート用プラグインを使った状態でもブログの表示がそこまで重くない（体感）ことをいいことに、新しい記事を書いたり、サイトデザインをいじったりしながら、のんびりだらだら作業しています。
現場からは以上です。
乗り換え後のデザイン設定は簡単ですし、すっきりとリニューアルできたので、乗り換えて大満足です♡
つむりリライト終わってないけどね！！！（←しつこいわ）
