CocoonからSWELLへの移行手順を解説【テーマ切り替えの注意事項有り】

そんな悩みを解決します。

私は複数ブログを運営しています。Cocoon、アフィンガー5、ストーク、ハミングバードなど様々なテーマからSWELLに切り替えた経験があります。この記事ではCocoonからSWELLにWordPressテーマを切り替えた移行手順と注意事項を紹介します。テーマ切替時にトラブルが起こりやすいポイントと、その解決方法を知りたい人向けです。

【楽ちん】Cocoon用テーマ乗り換えサポートプラグイン

CocoonからSWELLへの移行は簡単です。理由はCocoon専用のテーマ乗り換えサポートプラグインがあるからです。テーマ切り替え手順の前にテーマ乗り換えサポートプラグインについて解説します。

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

テーマを別のテーマに切り替えると、次のようなトラブルが発生します。

テーマ乗り換えサポートプラグインを使うと、こういったトラブルなしでテーマ移行作業が行えます。

テーマ乗り換えサポートプラグインはSWELL開発者さんが無料提供しています。全テーマには対応していませんが、CocoonからSWELLに移行作業用に専用プラグインが用意されています。このプラグインを使うとCocoonからSWELLへのテーマ切り替えがスムーズに行えます。

移行作業中にレイアウト崩れや装飾が消える理由

WordPressのテーマごとに内部的な機能が違うのが理由です。

Cocoonは無料なのに高機能なテーマですよね？「高機能＝他のテーマにない機能が備わっている」という意味です。

仮にCocoonから別の無料のテーマに切り替えるとします。Cocoonで作った記事内にランキングなどCocoon独自の装飾を使った場合、切り替え後のテーマにはCocoonの独自機能は備わっていないのでうまく表示されなかったり、そもそも全く表示されなくなります。

Cocoonの問題ではなくどんなテーマでも同じようなトラブルが移行作業で発生します。

SWELLで提供しているテーマ乗り換えサポートプラグイン

Cocoon以外にも有料テーマからの移行に対応しています。

乗り換えサポートプラグインは「SWELLへの移行をサポート」する役割です。SWELL以外のテーマへの移行をサポートしているプラグインではありません。

ちなみに他のWordPress有料テーマではこういった移行をサポートしているプラグインは提供していません。

テーマ名	乗り換えサポートプラグインの提供状況
AFFIGNERシリーズ
JIN
SANGO
STORK(旧バージョン)
STORK19
TCDシリーズ
THE THOR
アルバトロス
スティンガーシリーズ
スワロー
ハミングバード
賢威

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

CocoonからSWELLのテーマ移行手順について解説します。まずは全体の流れです。

テーマ移行手順:①最新版のSWELLを用意する

SWELL公式サイトから最新版のテーマをダウンロードします。テーマ未購入の人は公式販売ページからSWELLを購入してください。

マイページ→製品ダウンロードページへ進むとzip形式の最新版テーマファイルがダウンロードできます。

Cocoon用乗り換えサポートプラグインもこのページにあります。忘れずダウンロードしておきましょう！

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

Cocoon用乗り換えサポートプラグインを有効化します。Cocoon用乗り換えサポートプラグインはマイページ→製品ダウンロードページからダウンロードします。Cocoon以外のテーマ乗り換えサポートプラグインも一覧表示されています。「Cocoon用」を間違えずにダウンロードしましょう。

プラグインファイルはzip化されています。ダッシュボード左手のプラグイン→新規追加からアップロードし有効化します。

テーマ移行手順:③CocoonからSWELLにテーマ切り替える

SWELLテーマをWordPressにアップロードし有効化します。Cocoonを有効化するのと同じ手順です。サイトにアップロードし、「有効化」をクリックするだけです。

外観→テーマ→新規追加→テーマのアップロードの順でクリックするとテーマをアップロードできます。アップロード完了後に「有効化」をクリックしSWELLにテーマを切り替えます。

Cocoonテーマをそのままに
SWELLにテーマ切り替え後もCocoonのテーマはそのまま残してください。完全にテーマ移行作業が完了するまでてテーマはそのままにしておきます。

テーマ移行手順:④デザイン崩れを調整

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

記事をチェックしてデザインや表示が変になっている箇所を修正していきます。Cocoon用乗り換えサポートプラグインを有効化していても、うまくSWELLで表示されないショートコードがあります。

Classic EditorプラグインをCocoonで有効化していた人はプラグインを無効化することをお勧めします。SWELLはブロックエディター対応テーマです。最新のブロックエディターに慣れていきましょう。

まずはショートコードがそのまま表示されている箇所から優先的に作業を勧めます。記事の編集機能でCocoonのショートコードをガリガリ削っていきます。

全記事でレイアウト崩れがなくなったら移行作業は一区切りです。

ここからは２つの選択肢があります。

1. これで移行を完了とする
2. 完全に移行する

デザインの崩れもなく不具合もないので、このまま運用するパターンです。このパターンはデメリットがあります。

テーマ移行手順:⑤独自ショートコードを削除する

全記事からCocoonの装飾を一掃するステップです。全て削除しSWELLの装飾に切り替えていきます。メチャクチャ地道です。かかる時間の目安ですが１記事30分程度を見積もっておきましょう。

テーマ移行手順:⑥乗り換えサポートプラグインを停止

完全にCocoonの独自装飾を置き換えたらテーマ乗り換えサポートプラグインを停止します。プラグイン停止後はいったんページを確認し、不具合が発生しないことを確認しプラグインを停止・削除しましょう。

WordPressのセキュリティーヘルス機能は使っていないプラグインを削除するよう推奨してきます。テーマ乗り換えサポートプラグインは不要なので、削除して構いません。

テーマ移行手順:⑦Cocoonを削除する

Cocoonはもう使いません。削除しても影響は出ません。

CocoonからSWELLに移行する際の注意事項

テーマ乗り換えサポートプラグインを使って移行作業をするさいの注意事項です。

レイアウトずれが起こる可能性がある

乗り換えサポートプラグインを使って移行作業をしても、レイアウトずれが発生する可能性があります。ちょっとのダウンタイムも許容できない場合は、バックアップサイトで十分な検証をすることをお勧めします。

CocoonからSWELLへ移行作業中、次の装飾がうまく表示されませんでした。

該当する装飾を使っている人はCocoonからのテーマ切り替え後の確認作業でチェックしてみてください。

乗り換えサポートプラグインを無効化しよう

Cocoonからの移行作業が完了したら、乗り換えサポートプラグインは停止して削除しましょう。

実はプラグインの有効化しっぱなしはサイトのパフォーマンスが落ちます。

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

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

PHPバージョンを推奨バージョンに変更

「切り替えはちゃんとやったはずなのでに、なぜかエラーが出る！」。そんな場合の原因の1つが「PHPバージョンが低いこと」です。PHPがSWELLの推奨バージョン未満だと正常に動作しないことがあります。

	動作環境
WordPress	5.5以上（推奨：5.6～）
PHP	7.0以上

PHPのバージョンはレンタルサーバー側で設定する作業です。WordPressのダッシュボードから変更することはできません。コントロールパネルにログインし管理メニューからPHPのバージョンを変更しましょう。

【備考】CocoonからSWELLへ移行後の作業

移行作業が完了したら、次の作業も合わせて行うことをお勧めします。

SWELL推奨プラグインのインストール

テーマ開発者が推奨するプラグインのリストです。SWELLテーマににない機能を補完してくれるプラグインなどです。

プラグイン	機能
SEO SIMPLE PACK	SEO設定プラグイン。記事、アーカイブペーでmeta description、noindexといった設定ができるプラグイン。All in One SEO Packと機能的に被ります。ここプラグインはSWELLテーマ開発者提供です。
Useful Blocks	ブログ記事内にオシャレな評価ボックス、グラフなどを簡単に表示できるプラグイン。Useful BlocksもSWELL開発者さんが作成に携わっているプラグインです。ちなみに綿もこのブログで利用させてもらっていますが、かなり便利で気に入っています。
WP Multibyte Patch	定番ですね。文字化け防止プラグイン。日本語でブログを運営している人は入れておきましょう。
WP Revisions Control	ブログ記事のリビジョンを管理するプラグインです。記事って、更新するたびに記事の情報を世代ごとに自動保存しますよね？管理しないとメチャクチャ増えてデータベースを圧迫します。このプラグインで管理しましょう。

SWELL非推奨プラグインのアンインストール

SWELLと相性の悪いプラグインを使っている場合はアンインストールしましょう。

プラグイン	機能
Table of Contents Plus	ブログ記事の目次を自動で出力する定番プラグイン。SWELLには標準機能として目次を表示する機能があるため、Table of Contents Plusをはじめてとする目次プラグインは不要。SWELLの目次機能はかなり使い勝手が良いので別のプラグインに置き換える必要性はあまりない。
Speech bubble	「吹き出し」装飾系プラグイン。SWELLは標準機能で吹き出しを管理する機能があるので、Speech bubbleが必要になることはない。個人的にSWELLの吹き出し機能はWordPress有料テーマの中で最も使いやすい。Speech bubbleに限らず吹き出しを入れるためだけのプラグインはお勧めしません。
WordPress Popular Posts	アクセスの多い人気記事をランキング形式でウィジェットに表示するプラグイン。 SWELLはオリジナルウィジェットで人気記事をサムネイル付きで表示させることができます。ただし、SWELLオリジナルウィジェットはカテゴリーごとの人気記事を表示したり、週間ランキングなどがない。
Classic Editor	旧式のクラッシクエディター環境にエディターを切り替えるプラグイン。SWELLはブロックエディター対応テーマのため、あえて使う必要がない。プラグインの公式サポートが2021年12月31日までと公式発表があり、今後はブロックエディターでの利用に慣れるしかない。
WP Super Cache	キャッシュ系プラグイン。ページの読み込み速度を改善するためのプラグインとして定番ですね。SWELLはテーマの機能としてキャッシュを使ったサイトの高速化機能があります。WP Super Cache、W3 Total Cacheなど全てキャッシュ系プラグインはSWELLと相性の悪い非推奨プラグインです。
SiteGuard WP Plugin	ログインURLの変更機能をはじめてとる高機能なセキュリティープラグイン。セキュリティー系プラグインとしては珍しく日本語対応しているため日本語のマニュアルも充実。このプラグインはPHP7.4で不具合が発生することを確認されている。
EWWW Image Optimizer	ダッシュボードにアップロードした画像を圧縮しファイルを軽くする役割のプラグイン。SWELLで利用するとメディアアップロード機能が正常に動作しないといった不具合が発生することがある。

非推奨プラグインはSWELLのバージョンが上がり仕様が変更される度に更新されています。自分の使っているプラグインの中にSWELLの非推奨プラグインがないかを確認しましょう。

Font Awesomeのアイコン読み込み設定

Font Awesomeはサイトにアイコンを表示するサービスのことです。グロナビなんかにアイコンを表示してオシャレにしたいならFont Awesomeを使いましょう！

Font Awesomeを使うにはSWELL設定→Font Awesomeタブを選択。読み込み方でCSSで読み込む、JSで読み込むのいずれかをチェックしましょう。

多々プラグインを入れる可能性がある人は「CSSで読み込む」をお勧めします。JSがプラグインと競合し不具合が発生する可能性があるからです。

高速化オプションの設定

SWELL独自機能でサイトの表示スピードを上げる「高速化設定」があります。設定しなくてもかなり早いテーマですが、さらに高速化させたい人あhぜひこのオプションを活用しましょう。

高速化の設定はSWELL設定→高速化タブ→任意のオプションにチェックを入れて設定を保存。

高速化オプションのブログカードについて
ブログカードは内部・外部必ずキャッシュ機能を使いましょう。特に外部ブログカードは相手方のサーバーにアクセスし、アイキャッチ画像を読み込みます。
キャッシュがない場合、いちいちデータを取りに通信するのでページの読み込み速度に影響がでます。
数値レベルではなく、体感でハッキリ「遅い」と感じます。

SWELL子テーマの設定

ガツガツ独自カスタマイズをしたい人向けです。SWELLの子テーマをアップロードしサイトで有効化すればOK。子テーマはSWELL公式サイトからダウンロードできます。

SWELLの子テーマは会員ログインした後、マイページ（https://u.swell-theme.com/mypage/）→製品ダウンロードページへ移動。ダウンロードできる最新テーマ、乗り換えサポートプラグインが表示されます。一覧の中から「SWELL子テーマ」をクリックしダウンロード。

独自カスタマイズの予定がない人は子テーマは不要です！

独自カスタマイズ＝PHP、JS、CSSのファイルを編集する上級者向けテクニック

吹き出しの設定

ブログ記事内に登場するキャラクターと吹き出しの設定方法についてです

SWELLの「吹き出し」は「ふきだし」というカスタム投稿で一括管理するシステムです。残念ながらCocoonで作った吹き出し設定はそのままSWELLのふきだしに反映されません。手動でふきだしを設定する他ありません。

ダッシュボード上左の「ふきだし」→「新規追加」から吹き出しを設定します。SWELLは登録できる吹き出しの数に制限はありません。

ここで設定した吹き出し設定を、ブログ内の好きな場所で呼び出すことができます。ちなみに投稿内で呼び出した吹き出しを部分的に修正することもできます。

アナリティクスの設定

ザ定番。グーグルアナリティクスの設定をしましょう。SWELL推奨プラグインのSIMPLE SEO PACKを有効化している場合は、プラグインの専用メニューからアナリティクスコードを設定できます。

ダッシュボード左手のメニューSEO PACK→GoogleアナリティクスからトラッキングIDを入力。

アナリティクスのコードがちゃんと貼れたか確認するために、コード設置後はアナリティクスで確認を。アナリティクスの画面でリアルタイムユーザーを表示しつつ、適当に自分のブログ内のページを移動すると確認できます。

グーグルアドセンスコードの設定

アドセンス合格者限定の作業です。

自動広告を表示させたい人の作業

「面倒なことはしたくない！アドセンス広告の位置はグーグルにおまかせ！」。そんな人向けのアドセンス設定方法です。手順はSWELL設定→広告コードタブを選択。「自動広告」にアドセンスコードを設置すればOKです。

インフィード広告を設置したい人

投稿の一覧のデザインにあわせてアドセンス広告を表示するインフィード広告を設置する手順です。

SWELL設定→広告コードタブを選択。「インフィード広告の設定」にアドセンスのコードを設置してください。インフィード広告の間隔は管理画面から調整できます。さすがに1個おきはユーザー的にウンザリしそうなので、設定する値はほどほどにしましょう。

その他の場所にアドセンス広告を表示する設定

他には3つの方法があります。

事前検証をするならバックアップサイト

「CocoonからSWELLへの切り替えで絶対に失敗したくない！」そんな人はバックアップサイトで切り替えの事前テストをすることをオススメします。

バックアップサイトって何？初心者でも作れるの？

テスト目的やデータ復元用に用意しておくサイトのことを「バックアップサイト」と言います。

いざという時にデータを復旧したり、作業前のテストをするといった際に便利です。バックアップサイトはブログ運営するなら作っておくと役に立ちます。CocoonからSWELLへの切り替え前に本番環境ではなく、このバックアップサイトでテストを行うと移行失敗のリスクを軽減できます。

専用のプラグインがあるので、知識のない人でもポチポチとボタンをクリックするだけでバックアップサイトは作れます。

最近のレンタルサーバーは何個でもWordPressを設置できます。レンタルサーバーの空いているスペースにWordPressをインストールし検証用のサイトを作ってみましょう。

WordPressのインストールにはMySQLというデータベースが必要です。レンタルサーバー会社ごとにMySQLの数が決まっています。主要なレンタルサーバー会社のMySQL上限をまとめました。

MySQLの上限

レンタルサーバー	プラン	MySQLの上限
エックスサーバー	X10プラン	制限なし
ConoHa WING	ベーシック	制限なし
さくらインターネット	スタンダード	50個
ロリポップ！	スタンダード	50個

WordPressでバックアップサイトを作る手順

バックサイトを作成するざっくりした流れを説明します。

まとめ

CocoonからSWELLへテーマを切り替える手順と注意事項を紹介しました。CocoonからSWELLへ移行するさいに参考にしてください。