【WordPressテーマ変更】CocoonからSWELLへの乗り換え当日やることリスト

2022-05-27

当ブログには広告が含まれています

【WordPressテーマ変更】CocoonからSWELLへの乗り換え当日やることリスト

こんにちは、つむり @TsumuRi です。

WordPressテーマ「Cocoon」を4年使った当ブログ。2022年はデザインをすっきりリニューアルしたいと思い立ち、WordPressテーマ「SWELL」に乗り換えました。

事前準備

WordPressのバックアップ

テーマ変更はWordPressの機能に影響する可能性があるため、バックアップを取ります。

ちなみに当ブログではUpdraftPlusプラグインを利用、Dropboxに保存しています。やり方はこちらのサイトをご参考に。

Updraftplusの使い方：WordPressを丸ごとバックアップ

また、自分で追加したコードをテーマ完全移行後も使うならテキストエディタにコピぺしておくといいかも。

3ヶ所チェック

「外観」＞「テーマファイルエディタ」: スタイルシート（style.css）
テーマのための関数（function.php）
「外観」＞「カスタマイズ」: 追加CSS

つむり

アプリーチなど外部サービス用のCSSはあとで使いました

SWELLの動作環境の確認

SWELLを購入するその前に。レンタルサーバーの仕様がSWELLの動作環境を満たしているかを確認します。

SWELLの動作必須環境（2022年5月現在）

PHP7.3以上
WordPress 5.5以上（推奨：5.6～）

特に、何年も運営しているブログは、古いバージョンのPHPを使い続けていることがあるので。

つむり

なにを隠そう私のことです！

PHPのバージョンが古いときは、テーマ変更前にバージョンを切り替えます。

全体の流れはこちらをご参考に。

WordPressにおけるPHPバージョンアップの必要性とやり方

レンタルサーバーでの切り替え手順はお使いのレンタルサーバーのヘルプを見てください。

PHPのバージョンについて | レンタルサーバーならエックスサーバー

SWELLの購入・会員登録

STEP

SWELLのテーマファイルを購入する

SWELLのテーマサイトから、テーマファイルを購入します（※クレジットカード要）

購入後、ダウンロードリンクつきの購入確認メールが届きます。

ダウンロードリンクからSWELL本体をダウンロードしてもよいですが、子テーマや乗り換えサポート用プラグインが必要なので、ユーザ登録を先に済ませる方が効率的かと。

STEP

SWELL会員サイトに会員登録する

SWELL会員サイト SWELLERS’ に新規会員登録します（※購入時のメールアドレス要）

登録はこちらから

SWELLERS' 新規会員登録ページ

これにより、SWELLの全機能が解放されます。

会員登録するとできること

SWELLのアップデート（※要アクティベート）
子テーマ・乗り換えサポート用プラグインの入手
デモサイトデータ（デザイン着せ替えファイル）の入手
ユーザフォーラムへの参加（質問・不具合報告の受付）
SWELLのアフィリエイト

テーマ＆乗り換えサポート用プラグイン導入

STEP

必要なファイルをダウンロードする

会員サイト SWELLERS’ から下記のファイルをダウンロードします。

SWELL 本体最新版（swell-x-x-x-x.zip）
子テーマ（swell_child.zip）
乗り換えサポート用プラグイン（Cocoon用）

子テーマについては、テーマエディタで「スタイルシート（style.css）」や「テーマのための関数（function.php）」にコードを書くつもりなら必須です。親テーマ（SWELL本体）をアップデートすると、親テーマのテーマファイルに書いたコードは消えてしまうので。

よく分からなかったら、とりあえず入れておいて害はありません（雑かよｗ）

ダウンロードはこちらから

マイページ | SWELLERS' | SWELLユーザー専用サイト

STEP

SWELL本体＆子テーマをWordPressに導入する

SWELL本体と子テーマをインストール・有効化します。

WordPress管理画面で「外観」＞「テーマ」へ移動
「新規追加」をクリック
「テーマのアップロード」をクリック
「ファイルの選択」をクリック、SWELL本体を選ぶ（zipファイルのまま）
「今すぐインストール」をクリック
子テーマを同様にインストール
子テーマを有効化（子テーマを使わない場合、SWELL本体を有効化）

画像付きの解説はこちら

SWELL｜WordPressテーマ「SWELL」をインストールする方法

STEP

乗り換えサポート用プラグインを導入する

乗り換えサポート用プラグインをインストール・有効化します。

WordPress管理画面で「プラグイン」＞「新規追加」へ移動
「プラグインのアップロード」をクリック
「ファイルの選択」をクリック、乗り換えサポート用プラグイン（zipファイル）を選ぶ
「今すぐインストール」をクリック
乗り換えサポート用プラグインを有効化

これだけでCocoon時代の記事が再現性よく表示されるはず。

ただし、Cocoonで使っている書式によっては乗り換えサポート用プラグインで対応していないことがあります。SWELLのテーマサイトで確認してください。

SWELL｜CocoonからSWELLへ乗り換えるためのサポート用プラグイン

SWELLのアクティベート（認証）

SWELLをアクティベート（認証）します。

WordPress管理画面で「SWELL設定」＞「アクティベート」に移動
「ユーザー認証」のメールアドレス欄に、会員登録したメールアドレスを入力・送信
メールで送られてくる「認証用URL」をクリック（3分以内）
認証用URLの飛び先（会員サイトのマイページ）で認証が完了したことを確認
「自分のサイトに戻る」ボタンをクリック、完了を確認

画像付きの解説

SWELL｜SWELLのユーザー認証を行う手順

認証が完了すると、SWELLのアップデートが利用できるようになります。

SWELLはかなり頻繁にアップデートを繰り返しているので、最速で認証することをおすすめします。

つむり

私が乗り換えたときは2日後にはアップデートされていた記憶が……

ここまでの作業で、乗り換え前のテーマの書式を引き継いだ記事が表示されるようになっているはず。記事ページの表示を確認してみてください。

SEO・アクセス解析・広告などの設定が必要なら、以降の作業もやってしまいましょう。

プラグイン「SEO SIMPLE PACK」の導入

プラグイン「SEO SIMPLE PACK」をインストール・有効化します。

他のSEOプラグインで対応済みなら不要です

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アドセンス」のコードを入力します。

STEP

Googleアナリティクス・Googleサーチコンソールの設定

GoogleアナリティクスやGoogleサーチコンソールのコードは、プラグイン「SEO SIMPLE PACK」で設定します。

WordPress管理画面で「SEO PACK」をクリック
「Googleアナリティクス」タブをクリック
「トラッキングID」または「測定ID」を入力
「設定を保存する」をクリック
「ウェブマスターツール」タブをクリック
「Googleサーチコンソールの認証コード」を入力
「設定を保存する」をクリック

他のウェブマスターツール（Bing、Baidu、Yandex）も同じ画面で設定できるので、使っていたらまとめて作業しておくとよいですね。

STEP

Googleアドセンスの設定

Gooogleアドセンスの広告コードは、SWELL設定に入れていきます。

WordPress管理画面で「SWELL設定」に移動
「広告コード」タブをクリック
「記事内広告［ad］」「目次広告」「自動広告」「インフィード広告」に該当するコードをコピペ
「変更を保存」をクリック

つむり

アンチ自動広告な私は自動広告欄は空白、Googleアドセンス側でオフにしています

Multiplex 広告（旧関連コンテンツ）を各記事の最後に入れる場合はウィジェットを利用します。

WordPress管理画面で「外観」＞「ウィジェット」に移動
「[SWELL] 広告コード」をクリック
メニューの中から「関連記事下」をクリック
「広告タグ」欄に該当するコードをコピペ
自動保存されたら完了

つむり

Multiplexより関連コンテンツのほうが好きでした

こちらもチェック

Google以外の広告は別途対応が必要です。

Google以外の広告について

ブログのサイドバーやフッターなどの広告は「カスタマイズ」メニューで設定します。
記事内の広告は、記事ページの表示を個別に確認してみてください。乗り換えサポート用プラグインでサポートできる分は出力されているはずです。一部対応できないものもあるようです。

ここまで作業すれば、移行前のテーマの書式を引き継いだ記事が表示され、Googleのツールやアドセンスはこれまでどおり使えるはずです。

つむり

1〜2時間で終わるのでは

表示の崩れがないことを確認・修正

最後に、記事ページの表示が崩れてないことを確認します。

つむり

といっても、200記事を超えてんですが（白目）

優先順位をつけて効率的にチェック

記事数が多すぎる場合は、優先順位をつけましょう。

よく読まれている記事
好きな記事
ビジュアルに凝った記事
収益が多い記事

切り口は様々ですが、自分なりに優先順位をつけて「優先順位の高い方から何記事まで見る」と決めたら終わります。私は単純にPV数で上から順に50記事チェックして、残りはあきらめました。

つむり

1日平均1PV未満の記事が崩れても誰も気にしないと思う……

チェック中には下記のような現象に遭遇しました。

枠を設定した箇所に枠がない
Cocoon時代に設定した色がSWELL移行後は浮いている
吹き出しの横幅が妙に狭い
エディタでSWELLサポート外の要素に警告が出ている

ただ、読めるか読めないかで言えば読めるので、当日はスルーして後日リライトすることにしました。最初に書いたとおり、ブログが表示されて記事が読めたらいいので。読めるか読めないかの観点では読めないところはなかったです。SWELLの移行サポートプラグインの優秀さを実感しました。

もし、あまりにたくさん崩れていたら、当日はいったんCocoonに戻して後日修正したらいいかと。ブログ自体のデザインや記事本文をいじる前なら、テーマを戻したときに崩れるリスクは小さいので。

プラグインの干渉がないかもチェック

SWELLのテーマサイトでも注意喚起されているように、プラグインとの相性が悪い場合もあるので、なんかおかしいな？と思ったらプラグインも疑ってみてください。

公式｜SWELLで非推奨・不必要なプラグインと、推奨プラグインについて

つむり

私の場合は致命的なものはなかったです

まとめ：SWELLの乗り換えサポート用プラグインは優秀すぎる

以上でテーマ変更の当日にやっておきたい作業は完了です。お疲れさまでした！

大急ぎで全部直さなくてもいいという点で、SWELLの乗り換えサポート用プラグインは本当に優秀だと実感（笑）

これを書いている現在（乗り換えから3ヶ月経過）も全記事のリライトは終わってないので、「Cocoon」「乗り換えサポート用プラグイン」の削除には至ってません。

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

テーマサイトでは2つのテーマ共存はサイトが重くなる可能性があると注意喚起されているので、ゆくゆくは完全移行したいものですが……

つむり

記事が増えてからのテーマ完全移行は作業量が多すぎる！そして作業に飽きる！！！なにより昔の記事がグチャグチャで終わらない！！！！！

ということで、乗り換えサポート用プラグインを使った状態でもブログの表示がそこまで重くない（体感）ことをいいことに、新しい記事を書いたり、サイトデザインをいじったりしながら、のんびりだらだら作業しています。

現場からは以上です。

乗り換え後のデザイン設定は簡単ですし、すっきりとリニューアルできたので、乗り換えて大満足です♡

つむり

リライト終わってないけどね！！！（←しつこいわ）

SWELL - シンプル美と機能性両立を両立させた、圧巻のWordPressテーマ

マウス操作で簡単カスタマイズ
軽快に動作するブロックエディタ
スマホでもサクサク動作
他テーマからの移行もラクラク

公式WordPressテーマ SWELL

最新情報は公式サイトをチェック

よかったらシェアしてね！