MENU
さとしん
WordPressが好きで毎日触って勉強しています。ブロックエディターに出会ってから本当にWordPressが楽しくなりました。WordPressやブロックエディタに馴染めず困っている人の役にたてたら嬉しいなぁと思いながら、このサイトを運営しています!

CocoonからSWELLへの移行手順!大変なテーマ移行を少しでも楽にしよう!

無料テーマ「Cocoon」から、有料テーマ「SWELL」に移行する方法を紹介します。

テーマを切り替えること自体は難しい作業ではありません。

ですが、テーマを切り替える前に対応したほうが良い作業があったり、テーマ移行後に崩れたデザインを修正する作業が大変です。

なのでこの記事では、なるべく負担の少ない方法で安心してテーマ移行ができるように、手順や注意点を紹介していきます。

移行の手順もしっかり解説します…!
この記事の内容まとめ
  • 移行前にやるべき作業の紹介
  • 移行後に崩れてしまう装飾の紹介
  • 移行後に設定しておいた方が良い項目の紹介
さとしん

一緒にSWELLでブログ運営を楽しむために頑張っていきましょう…!

目次

SWELLにはテーマ移行用のサポートプラグインがある

SWELLには他テーマからの乗り換えをサポートしてくれるプラグインがあります。

さとしん

Cocoonから移行する方向けのプラグインもありますよ…!

以下テーマのサポートプラグインが用意されています。

  • Cocoon
  • JIN
  • SANGO
  • STORK
  • THE THOR
  • AFFINGER5

このサポートプラグインのおかげでテーマ移行の負担がとても軽くなります。

本来、テーマの移行作業はとても大変です。各テーマが独自に持たせている機能や装飾は、移行後のテーマに引き継ぐことはできません。

例えばCocoonの場合、ブロックエディターのCocoonブロックの装飾が崩れたり、管理画面のCocoon設定の内容がリセットされてしまいます。

Cocoonブロック

Cocoonブロック

Cocoon設定

Cocoon設定

そのため、テーマを切り替えた後に、大急ぎで崩れた装飾を修正する必要があります。

ですが、Cocoon移行用サポートプラグインを使用すると、Cocoonブロックの装飾をある程度保った状態でSWELLに移行することができます。

つまり、テーマを切り替えた後にゆっくり自分のペースで記事内の装飾の修正を進めることできるイメージです。

さとしん

テーマ移行直後の負担が減るので本当にありがたいプラグインです…!

ただし、最終的にはSWELLの装飾にリライトし直すことをおすすめします。
詳細は記事後半の「Cocoon独自の装飾をSWELLのスタイルにリライト」で説明します。

では、さっそくCocoonからSWELLへの移行手順を解説していきます。

SWELLの導入&有効化まで

ここでは、SWELLを購入して有効化するまで進めていきます。

大きく以下の3つの手順です。

  1. SWELLのダウンロード
  2. Cocoon乗り換えサポートプラグインの有効化
  3. SWELLの有効化
さとしん

ここは悩まず簡単に進められるはずです…!

SWELLのダウンロード

SWELLをダウンロードしていきます。以下の手順です。

STEP
SWELLの購入ページにアクセスする

\ ここからアクセスできます! /

STEP
利用規約を確認し、「SWELLを購入する」ボタンをクリック
SWELLのインストール方法-2
STEP
Stripeの決済画面で必要事項を入力する
SWELLのインストール方法-3
STEP
入力したアドレス宛に届くメールに記載されたURLへアクセス

SWELL親テーマのzipファイルがPCにダウンロードされます。

STEP
管理画面→「外観」→「テーマ」→「新規追加」→「テーマのアップロード」 をクリック
SWELLのダウンロード方法-1
STEP
「ファイルを選択」欄でzipファイルを選択して「今すぐインストール」をクリック
SWELLのダウンロード方法-2

この時点ではまだSWELLを有効化せずにCocoonのままでOKです。

Cocoon乗り換えサポートプラグインの有効化

次は乗り換え用のサポートプラグインをダウンロードします。以下の手順です。

STEP
SWELLERS’の製品ダウンロードページへ進む

ログインしていない場合は、ログインしてください。

\ ここからDLできます! /

他テーマからSWELLへの移行-1
STEP
Cocoonからの乗り換えサポート用プラグインをクリック

zipファイルがダウンロードされます。

Cocoonからの乗り換え用サポートプラグイン
STEP
管理画面→「プラグイン」→「新規追加」→「プラグインのアップロード」をクリック
Cocoonからの乗り換え用サポートプラグインのインストール-0
STEP
「ファイルを選択」欄でzipファイルを選択して「今すぐインストール」をクリック
Cocoonからの乗り換え用サポートプラグインのインストール-1
STEP
サポートプラグインを有効化
Cocoonからの乗り換え用サポートプラグインのインストール-2

SEO関連データの移行

Cocoon時代にメタディスクリプションなどの情報をCocoonの機能で設定した場合は、事前に移行作業が必要です。

以下の画面から設定されている場合はこのタイミングで移行作業をおすすめします。

CocoonからSWELLへ移行時のSEO関連データの移行-2
さとしん

SWELLに移行するときにこの情報は引き継がれません。

もし、All in One SEO Packなどのプラグインで設定していた場合はこの手順はスルーしてOKです。
次の「SWELLテーマの有効化」に進みましょう。

SWELLではSEO関連のデータはプラグインで設定、管理することになります。

プラグインで管理することで、今回のようなテーマ移行の際でも設定が消えることなく使い続けることができます。

おすすめのプラグインは「SEO SIMPLE PACK」です。

SWELLの了さんが開発されたプラグインで、当然日本語に対応しているので使いやすいです。

以下の手順でインストールからSEO関連データの移行作業まで進めていきます。

さとしん

全て手作業での移行です…!

STEP
SEO SIMPLE PACKをインストール&有効化

プラグイン追加画面で「SEO SIMPLE PACK」と検索すると見つかります。

SEO SIMPLE PACKのインストール
STEP
作業したい記事の編集画面に進む
CocoonからSWELLへ移行時のSEO関連データの移行-1
STEP
Cocoonの「SEO」欄にある情報をコピー

Cocoon側の入力情報は消してしまってOKなので、切り取り(Ctrl+X)でもOKです。

CocoonからSWELLへ移行時のSEO関連データの移行-2

ブロックエディターで使えるショートカットキーを以下で紹介しています。

STEP
「SEO SIMPLE PACK設定」の欄に貼り付け

Cocoonの「SEO」欄の下に 「SEO SIMPLE PACK設定」 が追加されているはずです。

CocoonからSWELLへ移行時のSEO関連データの移行-3

このSTEP2以降の手順を全ての記事で行えば完了です。

もちろん必須ではないので、メタディスクリプションが不要な場合や、改めて設定し直したい記事ではこの手順は省略してOKです。

SWELLテーマの有効化

ここまで完了したら、SWELLテーマを有効化しましょう。

さとしん

ついにSWELLに切り替わりますよ…!

管理画面→「外観」→「テーマ」から『SWELL』を探して「有効化」をクリックすればOKです。

SWELLのダウンロード方法-3
さとしん

Cocoonも名残惜しいですが、これからSWELLのブログ運営がスタートです…!

ちなみに、SWELLでは子テーマも用意されています。

製品ダウンロードページからダウンロードできます。

テーマエディターなどでコードを記述してカスタマイズする予定がある場合は、子テーマをインストール、有効化しておきましょう。

SWELLのテーマエディター画面

追加CSSや、プラグインを使ってコードを記述する場合は、子テーマのインストールはしなくてもOKです。

テーマカスタマイザーの追加CSS
さとしん

迷う場合は子テーマをインストール&有効化しておいて良いかと思います…!

SWELLに切り替えた後の設定

ついにブログがSWELLに変わりました。初めに最低限の環境を整えておきましょう。

以下4点について説明します。

  1. 基本設定
  2. プラグインの整理
  3. Googleアナリティクスの設定
  4. Googleアドセンスの設定

基本設定

まずはSWELLの基本的な設定を進めていきましょう。

以下の公式マニュアルがとても参考になります。

当サイトでも、上記の公式マニュアルをベースに、困った時の対処法などもまとめた記事を作っていますので参考にしてください。

取り急ぎ、公式マニュアル内の「基本設定」の項目を参考に設定を進めておくと良いかなと思います。

SWELL公式マニュアル
SWELL公式マニュアル

プラグインの整理

SWELLとCocoonでは、テーマ側に含まれる機能が異なるので、Cocoonで使っていたプラグインで不要になるものや、新たにインストールしたほうが良いプラグインもあります。

公式サイトに推奨、非推奨のプラグインが紹介されているので参考にしてください。

さとしん

このマニュアルは必読だと思います…!

Googleアナリティクスの設定

Googleアナリティクスの計測用コードを「Cocoon設定」から入力していた場合は、再設定が必要です。

以下の手順で設定できます。

事前にプラグイン「SEO SIMPLE PACK」をインストールしておいてください。

STEP
管理画面→「SEO PACK」→「一般設定」→「Googleアナリティクス」をクリック
SEO SIMPLE PACKのアナリティクス設定-1
STEP
「トラッキングID」または「測定ID」欄にIDを入力

「UA」もしくは「G」から始まるIDです。

これだけでGoogleアナリティクスの設定は完了です。

さとしん

正しく計測されているかの確認も忘れずに…!

Googleアドセンスの設定

サイト内にアドセンス広告を設置していた場合も再度設定し直す必要があります。

SWELLでは以下の手順で各広告を設定することができます。

STEP
管理画面→「SWELL設定」→「広告コード」をクリック
アドセンス広告の貼り方
STEP
お好みの広告の入力欄に広告コードを入力
アドセンス広告の貼り方-2

詳しいGoogleアドセンスの設置方法は以下の公式マニュアルを参考にしてください。

また、当サイトの記事でもアドセンスの設置方法やうまく表示されないときの確認内容を以下のリンク先で解説しています。

>>アドセンス広告の設置方法

Cocoon独自の装飾をSWELLのスタイルにリライト

CocoonからSWELLへの移行に伴い崩れた装飾をリライトしていきましょう。

SWELLの乗り換えサポートプラグインのお陰で、装飾の崩れは最小限に抑えられているはずです。

かなり大変な作業なので、優先順位を付けてリライトしていくことをおすすめします。

Cocoon装飾がSWELLに移行したあとどうなるのか?気になる方も多いと思います。

まずは以下の公式マニュアルに目を通してみましょう。サポートプラグインが対応している装飾の一覧が記載されています。

上記のマニュアルに記載の無い装飾も一部あるため、僕の方でも装飾の変化を確認してみたので紹介します。

個人的な感想は、「サポートプラグイン凄すぎ…!」です。かなり移行時の負担が軽減されます。

さとしん

デザイン崩れが発生する装飾から最優先でリライトしていきましょう…!

あくまで僕の環境での結果なので、異なる点もあるかもしれません。必ずご自身のサイトの状態をご確認ください。

確認を実施した環境
  • WordPress:バージョン5.8
  • Cocoon:バージョン2.3.4
  • Cocoon Child:バージョン1.1.3
  • SWELL:バージョン2.4.1.1
  • 【SWELL】乗り換えサポート from Cocoon:バージョン1.1.2

優先的にリライトしたい装飾

テーマをSWELLに変更して、デザインが維持できない、崩れてしまう可能性のある装飾は以下のとおりです。

  • 文字色、太字
  • 見出しボックス
  • タブ見出しボックス
  • ラベルボックス
  • ふきだし
  • Cocoonボタン
  • 囲みボタン
  • 人気記事一覧
  • ナビカード一覧
  • プロフィールボックス
  • ページ読み込み時の日付
  • Amazonリンク
  • 楽天リンク
  • FAQ(寄付特典)
  • HTML挿入ボタン(寄付特典)
  • 更新日ショートコード(寄付特典)

数が多いので青マーカーを引いたコンテンツのみピックアップして紹介します。

上記青マーカー以外のコンテンツは以下の記事に画像付きまとめました。

文字色、太字

テキストの文字色と太字の装飾はデザインが維持されません。

テーマ移行前後の装飾の違いは以下のとおりです。

Cocoon

文字色+太字装飾-1

SWELL移行後

文字色+太字装飾-2

上記はブロックツールバーの「A」タブから設定した装飾です。

文字色+太字装飾-3

ツールバーの「B」タブもしくは、Ctrl+Bで太字にした装飾は移行後も引き継がれます。

見出しボックス、タブ見出しボックス、ラベルボックス

見出しボックス系の装飾もデザインは維持されませんでした。

それぞれ、 テーマ移行前後の装飾の違いは以下のとおりです。

Cocoon

ボックス系装飾-1

SWELL移行後

ボックス系装飾-2

このボックス系のブロックは使っている方も多いと思います。

さとしん

移行時はデザインが崩れていないか要チェックです…!

SWELLでは「キャプション付きブロック」というブロックがあるので、そのブロックに置き換えると良いかなと思います。

当サイトでもキャプション付きブロックについて以下リンク先で紹介しています。

>>キャプション付きブロックの使い方

ふきだし

ふきだしはスマホ表示で多少表示が崩れてしまいます。

テーマ移行前後の装飾の違いは以下のとおりです。

さとしん

PC表示では全く問題ありません…!

Cocoon

ふきだし-1

SWELL移行後

ふきだし-2

SWELL移行後、スマホ表示のふきだしは以下画像のようなイメージになります。

ふきだし-3
スマホで見たときのふきだし
ふきだし-4
スマホで見たときのふきだし

大きな問題ではありませんが、少々窮屈な印象なので気になる人もいるかもしれません。

さとしん

必要に応じて修正しましょう…!

ちなみに、SWELLのふきだしはアイコンなどを事前に設定しておくことができるのでとても便利です。

ふきだしの使い方は以下のリンク先で紹介しています。

>>ふきだしの使い方

ボタン

Cocoonのボタンブロックもデザインがうまく引き継がれませんでした。

テーマ移行前後の装飾の違いは以下のとおりです。

Cocoon

Cocoonボタン-1

SWELL移行後

Cocoonボタン-2

移行後は、ボタンが白背景、白文字になっていて見えませんが、ボタン自体は存在しています。

ちなみに、ブロックエディター標準のボタンは問題なく移行できます。

以下の赤枠のボタンブロックがブロックエディター標準のボタンです。

ボタンブロック

SWELLには、「SWELLボタン」というオリジナルのボタンブロックがあります。

便利な機能がたくさん用意されているので、ぜひSWELLボタンに置き換えると良いかなと思います。

以下リンク先でSWELLボタンブロックの使い方を紹介しています。

>>SWELLボタンの使い方

ゆっくりでもリライトしておきたい装飾

上記で紹介したもの以外は、サポートプラグインのお陰でデザインが大きく崩れることなく維持されます。

ですが後述するとおり、最終的にサポートプラグインは停止もしくは削除することをおすすめします。

そのため、デザインが維持されていたとしても、Cocoon独自の装飾は全てリライトしたほうが良いです。

さとしん

記事数が多ければ多いほど、この作業が大変になりますね…。

ただし、このリライトに緊急性はないので、新記事を書いたり他の作業をする合間にゆっくり進めても良いと思います。

無理のない程度にCocoon時代の装飾を無くしていきましょう。

乗り換えサポートプラグインとCocoonテーマの削除

満足いくところまで装飾をリライトできたら、乗り換えサポートプラグインとCocoonテーマは削除してOKです。

乗り換えサポートプラグインを有効化している間は、CocoonとSWELLの2つのテーマを読み込むためサイトが重くなる懸念があります。

なので基本的には、最終的には移行サポートプラグインは停止することを推奨します。

さとしん

装飾の修正作業お疲れさまでした…!

SWELLでサイト全体のデザインを整えてみる

一通りSWELL移行後の設定とリライトまで完了したので、ここから先は自由にブログを運営していきましょう。

記事を書き始めるのもOKですし、サイトのデザインを整えてみても良いと思います。

ここでは、デザインを整える方法を紹介しておきます。

さとしん

デザインを作りこむのも楽しいですよ…!

デモサイトデザインに着せ替える

SWELLにはデモサイトデザインに着せ替えるためのデータが無料配布されています。

着せ替えデータは以下の6パターン用意されています。

SWELLのデモサイトの一覧

デモサイトデータを反映させる方法は以下のリンク先で解説しています。

>>デモサイトデザインへの着せ替え方法

オリジナルのトップページを作ってみる

もちろん、デモサイトではなく自分でオリジナルのトップページを作りこむこともできます。

まず、ファーストビューの印象を整えてくれる設定がSWELLには複数用意されています。

  • メインビジュアル
  • 記事スライダー
  • ピックアップバナー

これらの設定方法は以下のリンク先で紹介しています。

>>トップページ設定

さらにトップページの記事の配置などをオリジナルにカスタマイズしたい場合は以下の記事を見てみてください。

さとしん

いろいろ試してみてくださいね…!

SWELLのブロックエディターで記事を書いてみる

SWELLに移行したら、これまでクラシックエディターで執筆していた方もブロックエディターを使ってみてほしいです。

さとしん

SWELLのブロックエディターの使い心地は最高です…!

ブロックエディターの基本的な操作方法はこちらの記事を見てみてください。

SWELLではブロックエディターを強化してくれる機能が豊富に用意されています。

SWELLのブロックエディターでできることは以下の記事にまとめたのでぜひ参考にしてください。

SWELLでブログ運営を楽しんでいきましょう!!

「Cocoon」から「SWELL」にテーマを移行する手順を紹介しました。

さとしん

移行作業、大変お疲れさまでした…!

みなさん大きな問題なくSWELLに移行が完了できていれば嬉しいです。

ここからはSWELLのブログ運営を楽しんでいきましょう。

当サイトではSWELLのことや、ブロックエディターについての記事を書いているので良ければ今後も参考にしてくださいね。

それから、SWELLで作られたサイトを集めたギャラリーも作っています。

SWELLを使って素敵なブログを作られた際にはぜひ掲載させてくださいね。

掲載の依頼は、当サイト運営者のTwitter(@__satoshin)まで。楽しみにお待ちしております。

さとしん

ぜひTwitterでも絡んでください…!

最後まで読んでいただきありがとうございました。


SWELLの基本的な設定や使い方はこちら↓↓

>>WordPressテーマ『SWELL』の使い方や設定で困ったときの情報まとめ!

SWELLのブロックエディターについて↓↓

>>SWELLのブロックエディターは使い心地が最高!充実の機能を動画で紹介!

SWELLでトップページをカスタマイズする方法↓↓

>>【SWELL】トップページをおしゃれなサイト型にカスタマイズする!

SWELLで作られたサイト集↓↓

>>WordPressテーマ『SWELL』を使った素敵なサイト、ブログを集めました!!

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
目次
閉じる