
CocoonからSWELLにテーマを切り替える方法を知りたい
簡単な移行方法ってあるの?
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 | |
アルバトロス | |
スティンガーシリーズ | |
スワロー | |
ハミングバード | |
賢威 |

SWELLだけでした!
CocoonからSWELLへテーマを切り替える移行手順

CocoonからSWELLのテーマ移行手順について解説します。まずは全体の流れです。
テーマ移行の流れ
- 最新版のSWELLを用意する
- Cocoon乗り換えサポートプラグインを有効化
- CocoonからSWELLにテーマ切り替える
- デザイン崩れを調整
- 独自ショートコードを削除する
- 乗り換えサポートプラグインを停止
- Cocoonを削除する

テーマ移行の各手順を解説します。
テーマ移行手順:①最新版のSWELLを用意する
SWELL公式サイトから最新版のテーマをダウンロードします。テーマ未購入の人は公式販売ページからSWELLを購入してください。
マイページ→製品ダウンロードページへ進むとzip形式の最新版テーマファイルがダウンロードできます。

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

Cocoon用乗り換えサポートプラグインを有効化します。Cocoon用乗り換えサポートプラグインはマイページ→製品ダウンロードページからダウンロードします。Cocoon以外のテーマ乗り換えサポートプラグインも一覧表示されています。「Cocoon用」を間違えずにダウンロードしましょう。
プラグインファイルはzip化されています。ダッシュボード左手のプラグイン→新規追加からアップロードし有効化します。

乗り換えサポートプラグインは有効化するだけで動作します。プラグインの設定はありません。
テーマ移行手順:③CocoonからSWELLにテーマ切り替える

SWELLテーマをWordPressにアップロードし有効化します。Cocoonを有効化するのと同じ手順です。サイトにアップロードし、「有効化」をクリックするだけです。
外観→テーマ→新規追加→テーマのアップロードの順でクリックするとテーマをアップロードできます。アップロード完了後に「有効化」をクリックしSWELLにテーマを切り替えます。
Cocoonテーマをそのままに
SWELLにテーマ切り替え後もCocoonのテーマはそのまま残してください。完全にテーマ移行作業が完了するまでてテーマはそのままにしておきます。
テーマ移行手順:④デザイン崩れを調整
記事をチェックしてデザインや表示が変になっている箇所を修正していきます。Cocoon用乗り換えサポートプラグインを有効化していても、うまくSWELLで表示されないショートコードがあります。

ちなみにこの作業はマニュアル、つまり手作業になります。
Classic EditorプラグインをCocoonで有効化していた人はプラグインを無効化することをお勧めします。SWELLはブロックエディター対応テーマです。最新のブロックエディターに慣れていきましょう。
まずはショートコードがそのまま表示されている箇所から優先的に作業を勧めます。記事の編集機能でCocoonのショートコードをガリガリ削っていきます。
ここからは2つの選択肢があります。
- これで移行を完了とする
- 完全に移行する
デザインの崩れもなく不具合もないので、このまま運用するパターンです。このパターンはデメリットがあります。
テーマ移行手順:⑤独自ショートコードを削除する
全記事からCocoonの装飾を一掃するステップです。全て削除しSWELLの装飾に切り替えていきます。メチャクチャ地道です。かかる時間の目安ですが1記事30分程度を見積もっておきましょう。
テーマ移行手順:⑥乗り換えサポートプラグインを停止

完全にCocoonの独自装飾を置き換えたらテーマ乗り換えサポートプラグインを停止します。プラグイン停止後はいったんページを確認し、不具合が発生しないことを確認しプラグインを停止・削除しましょう。
WordPressのセキュリティーヘルス機能は使っていないプラグインを削除するよう推奨してきます。テーマ乗り換えサポートプラグインは不要なので、削除して構いません。
テーマ移行手順:⑦Cocoonを削除する
Cocoonはもう使いません。削除しても影響は出ません。
CocoonからSWELLに移行する際の注意事項

テーマ乗り換えサポートプラグインを使って移行作業をするさいの注意事項です。
レイアウトずれが起こる可能性がある
乗り換えサポートプラグインを使って移行作業をしても、レイアウトずれが発生する可能性があります。ちょっとのダウンタイムも許容できない場合は、バックアップサイトで十分な検証をすることをお勧めします。
CocoonからSWELLへ移行作業中、次の装飾がうまく表示されませんでした。
デザインが崩れが発生した装飾
- ランキング
- ふきだし
- ボックス
乗り換えサポートプラグインを無効化しよう
Cocoonからの移行作業が完了したら、乗り換えサポートプラグインは停止して削除しましょう。
実はプラグインの有効化しっぱなしはサイトのパフォーマンスが落ちます。
2つのテーマ機能を共存させる形になるため、サイトが重くなる可能性があります。全記事をリライトした後にプラグインを無効化することをオススメします。
CocoonからSWELLへ乗り換えるためのサポート用プラグイン
PHPバージョンを推奨バージョンに変更
「切り替えはちゃんとやったはずなのでに、なぜかエラーが出る!」。そんな場合の原因の1つが「PHPバージョンが低いこと」です。PHPがSWELLの推奨バージョン未満だと正常に動作しないことがあります。
動作環境 | |
---|---|
WordPress | 5.5以上(推奨:5.6~) |
PHP | 7.0以上 |
PHPのバージョンはレンタルサーバー側で設定する作業です。WordPressのダッシュボードから変更することはできません。コントロールパネルにログインし管理メニューからPHPのバージョンを変更しましょう。

レンタルサーバー会社ごとの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で読み込むのいずれかをチェックしましょう。
高速化オプションの設定

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

私の場合、キャッシュ系は全てチェック入れています。
SWELL子テーマの設定
ガツガツ独自カスタマイズをしたい人向けです。SWELLの子テーマをアップロードしサイトで有効化すればOK。子テーマはSWELL公式サイトからダウンロードできます。
SWELLの子テーマは会員ログインした後、マイページ(https://u.swell-theme.com/mypage/)→製品ダウンロードページへ移動。ダウンロードできる最新テーマ、乗り換えサポートプラグインが表示されます。一覧の中から「SWELL子テーマ」をクリックしダウンロード。

独自カスタマイズって何?

カスタマイザーからオプションを選択する方法ではなく、テーマ内にあるテンプレートファイルのコードを編集することだよ。
独自カスタマイズ=PHP、JS、CSSのファイルを編集する上級者向けテクニック
吹き出しの設定
ブログ記事内に登場するキャラクターと吹き出しの設定方法についてです
SWELLの「吹き出し」は「ふきだし」というカスタム投稿で一括管理するシステムです。残念ながらCocoonで作った吹き出し設定はそのままSWELLのふきだしに反映されません。手動でふきだしを設定する他ありません。
ダッシュボード上左の「ふきだし」→「新規追加」から吹き出しを設定します。SWELLは登録できる吹き出しの数に制限はありません。
SWELLの吹き出しオプション
- アイコン画像
- 名前(吹き出しの下に表示されるテキスト)
- アイコンの枠
- 吹き出しの形
- 吹き出しの向き
- 吹き出しの色
- 吹き出しの線
ここで設定した吹き出し設定を、ブログ内の好きな場所で呼び出すことができます。ちなみに投稿内で呼び出した吹き出しを部分的に修正することもできます。
アナリティクスの設定

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

アナリティクスで取得できるデータはサイト改善作業でマストなデータ!作業後は必ず反映されているかチェックしましょう。
グーグルアドセンスコードの設定

グーグルアドセンス広告が表示されるようSWELLへ切り替え後は設定を忘れずしておきましょう。
自動広告を表示させたい人の作業

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

設置するアドセンスコードはアドセンス管理画面(広告→広告掲載の自動化→コードを取得)で確認できます。
インフィード広告を設置したい人

投稿の一覧のデザインにあわせてアドセンス広告を表示するインフィード広告を設置する手順です。
SWELL設定→広告コードタブを選択。「インフィード広告の設定」にアドセンスのコードを設置してください。インフィード広告の間隔は管理画面から調整できます。さすがに1個おきはユーザー的にウンザリしそうなので、設定する値はほどほどにしましょう。
その他の場所にアドセンス広告を表示する設定
他には3つの方法があります。
アドセンス広告の設置方法
- ウィジェット
- 記事内の任意の箇所
- 独自カスタマイズ

上から順に簡単な方法です。
事前検証をするならバックアップサイト

「CocoonからSWELLへの切り替えで絶対に失敗したくない!」そんな人はバックアップサイトで切り替えの事前テストをすることをオススメします。
バックアップサイトって何?初心者でも作れるの?
テスト目的やデータ復元用に用意しておくサイトのことを「バックアップサイト」と言います。
いざという時にデータを復旧したり、作業前のテストをするといった際に便利です。バックアップサイトはブログ運営するなら作っておくと役に立ちます。CocoonからSWELLへの切り替え前に本番環境ではなく、このバックアップサイトでテストを行うと移行失敗のリスクを軽減できます。

バックアップサイトって初心者でも簡単に作れるの?
専用のプラグインがあるので、知識のない人でもポチポチとボタンをクリックするだけでバックアップサイトは作れます。
最近のレンタルサーバーは何個でもWordPressを設置できます。レンタルサーバーの空いているスペースにWordPressをインストールし検証用のサイトを作ってみましょう。
WordPressのインストールにはMySQLというデータベースが必要です。レンタルサーバー会社ごとにMySQLの数が決まっています。主要なレンタルサーバー会社のMySQL上限をまとめました。
MySQLの上限
レンタルサーバー | プラン | MySQLの上限 |
---|---|---|
エックスサーバー | X10プラン | 制限なし |
ConoHa WING | ベーシック | 制限なし |
さくらインターネット | スタンダード | 50個 |
ロリポップ! | スタンダード | 50個 |

ほとんどのレンタルサーバー会社でMySQLの制限がありません。余裕でバックアップサイトが作れますね。
WordPressでバックアップサイトを作る手順
バックサイトを作成するざっくりした流れを説明します。
全体の流れ
- WordPressをインストール
- サイトデータをエクスポート(出力)
- バックアップサイトでデータインポート(入力)

各ステップを詳しく解説します。
レンタルサーバーのコントロールパネルにログインして作業を行います。
「クイックインストール」「簡単インストール」等など、レンタルサーバー会社ごと名称は異なりますがWordPressをコントロールパネルからインストールするツールがあります。このツールを使ってサーバーの空いているスペースにWordPressを新規インストールします。

各レンタルサーバーのマニュアルをまとめました↓
インストールディレクトリーについて
WordPressをインストールする最、インストールする場所(インストールディレクトリー)を指定します。この時、うっかり本番環境のデータを上書きしないよう注意しましょう。
運営してるブログからサイトデータをエクスポート(出力)します。エクスポートはAll-in-One WP Migrationプラグインが簡単でオススメです。

All-in-One WP Migrationをインストールするとダッシュボード上に専用のメニューが表示されます。クリックしメニューを開き→エクスポート→エクスポート先→ファイル。
しばらくすると緑色の枠で「ダウンロード」と表示されます。このボタンをクリック。


これでエクスポート(出力)作業はOKです。
バックアップサイト側でデータをインポート(入力)する作業です。バックアップサイト側にもAll-in-One WP Migrationプラグインをインストールしましょう。

All-in-One WP Migrationプラグインのメニューからインポートを選択し、先程エクスポートしたデータをインポートしてください。データサイズにより読み込みに時間がかかることがあります。

データのコピーできれば作業完了です。
検索エンジンに表示されない設定
バックアップサイトは検索エンジンに登録されないよう設定をしましょう。
ダッシュボード→設定→表示設定→検索エンジンでの表示にチェックを入れて変更を保存。
まとめ
CocoonからSWELLへテーマを切り替える手順と注意事項を紹介しました。CocoonからSWELLへ移行するさいに参考にしてください。
CocoonからSWELLへ移行するさいのポイント
- Cocoon用テーマ乗り換えサポートプラグインを使う
- ショートコードを削除する
- Cocoon用テーマ乗り換えサポートプラグインプラグインを忘れず停止・削除する
- バックアップサイトで事前テストする