![Girima-Blog-](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="160"><rect fill-opacity="0"/></svg>)
くらべネコこんにちわ！くらべネコです！
ギリマ今日もよろしくね！
くらべネコ本日はこんな疑問を解決します！
- 無料テーマ「Cocoon」から、有料テーマ「SWELL」に移行する方法を紹介します。
くらべネコCocoonの設定が気になる方は以下の【 [Cocoon] スタートアップガイド ~ 初期設定マニュアル】を参考にどうぞ。
テーマを切り替えること自体は難しい作業ではありません。
くらべネコなのでこの記事では、なるべく負担の少ない方法で安心してテーマ移行ができるように、手順や注意点を紹介していくよ！
- 移行前にやるべき作業の紹介
- 移行後に崩れてしまう装飾の紹介
- 移行後に設定しておいた方が良い項目の紹介
Cocoon➤SWELL移行ガイド：SWELLはテーマ移行用のサポートプラグインがある
SWELLには他テーマからの乗り換えをサポートしてくれるプラグインがあります。
くらべネコCocoonから移行する方向けのプラグインもありますよ！
ギリマそんなのあるんだね！
以下テーマのサポートプラグインが用意されています。
- Cocoon
- JIN
- SANGO
- STORK
- THE THOR
- AFFINGER5
このサポートプラグインのおかげでテーマ移行の負担がとても軽くなります。
くらべネコ本来、テーマの移行作業はとても大変(;^_^A
例えばCocoonの場合、ブロックエディターのCocoonブロックの装飾が崩れたり、管理画面のCocoon設定の内容がリセットされてしまいます。
Cocoonブロック
Cocoon設定
つまり、テーマを切り替えた後にゆっくり自分のペースで記事内の装飾の修正を進めることできるイメージです。
くらべネコテーマ移行直後の負担が減るので本当にありがたいプラグインだね！
ただし、最終的にはSWELLの装飾にリライトし直すことをおすすめします。
詳細は記事後半の「Cocoon独自の装飾をSWELLのスタイルにリライト」で説明します。
くらべネコでは、さっそくCocoonからSWELLへの移行手順を解説していきます。
Cocoon➤SWELL移行ガイド：SWELLの導入&有効化まで
くらべネコここでは、SWELLを購入して有効化するまで進めていきます。
大きく以下の3つの手順です。
- SWELLのダウンロード
- Cocoon乗り換えサポートプラグインの有効化
- SWELLの有効化
くらべネコここは悩まず簡単に進められると思います！
Cocoon➤SWELL移行ガイド：SWELLのダウンロード
SWELLをダウンロードしていきます。
以下の手順です。
SWELL親テーマのzipファイルがPCにダウンロードされます。STEP管理画面→「外観」→「テーマ」→「新規追加」→「テーマのアップロード」 をクリック
Cocoon➤SWELL移行ガイド：Cocoon乗り換えサポートプラグインの有効化
次は乗り換え用のサポートプラグインをダウンロードします。
以下の手順です。
ログインしていない場合は、ログインしてください。
zipファイルがダウンロードされます。
Cocoon➤SWELL移行ガイド：SEO関連データの移行
Cocoon時代にメタディスクリプションなどの情報をCocoonの機能で設定した場合は、事前に移行作業が必要です。
以下の画面から設定されている場合はこのタイミングで移行作業をおすすめします。
SWELLに移行するときにこの情報は引き継がれません。
もし、All in One SEO Packなどのプラグインで設定していた場合はこの手順はスルーしてOKです。
くらべネコ次の「SWELLテーマの有効化」に進みましょう。
SWELLではSEO関連のデータはプラグインで設定、管理することになります。
プラグインで管理することで、今回のようなテーマ移行の際でも設定が消えることなく使い続けることができます。
WordPress.org 日本語SEO SIMPLE PACKとてもシンプルなSEOプラグインです。ページごとのmetaタグやOGPタグを簡単に設定・カスタマイズできます。
くらべネコSWELLの了さんが開発されたプラグインで、当然日本語に対応しているので使いやすいです。
以下の手順でインストールからSEO関連データの移行作業まで進めていきます。
くらべネコ全て手動での移行です！
プラグイン追加画面で「SEO SIMPLE PACK」と検索すると見つかります。
Cocoon側の入力情報は消してしまってOKなので、切り取り(Ctrl+X)でもOKです。
Cocoonの「SEO」欄の下に 「SEO SIMPLE PACK設定」 が追加されているはずです。
Cocoon➤SWELL移行ガイド：SWELLテーマの有効化
くらべネコここまで完了したら、SWELLテーマを有効化しましょう。
ちなみに、SWELLでは子テーマも用意されています。
製品ダウンロードページからダウンロードできます。
テーマエディターなどでコードを記述してカスタマイズする予定がある場合は、子テーマをインストール、有効化しておきましょう。
追加CSSや、プラグインを使ってコードを記述する場合は、子テーマのインストールはしなくてもOKです。
くらべネコ迷う場合は子テーマをインストール＆有効化しておいて良いかと思うよ！
Cocoon➤SWELL移行ガイド：SWELLに切り替えた後の設定
くらべネコついにブログがSWELLに変わりましたね！
初めに最低限の環境を整えておきましょう。
以下4点について説明します。
- 基本設定
- プラグインの整理
- Googleアナリティクスの設定
- Googleアドセンスの設定
Cocoon➤SWELL移行ガイド：基本設定
まずはSWELLの基本的な設定を進めていきましょう。
当サイトでも、上記の公式マニュアルをベースに、困った時の対処法などもまとめた記事を作っていますので参考にしてください。
取り急ぎ、公式マニュアル内の「基本設定」の項目を参考に設定を進めておくと良いかなと思います。
Cocoon➤SWELL移行ガイド：プラグインの整理
SWELLとCocoonでは、テーマ側に含まれる機能が異なるので、Cocoonで使っていたプラグインで不要になるものや、新たにインストールしたほうが良いプラグインもあります。
公式サイトに推奨、非推奨のプラグインが紹介されているので参考にしてください。
くらべネコこのマニュアルは必読ですよ！
Cocoon➤SWELL移行ガイド：Googleアナリティクスの設定
Googleアナリティクスの計測用コードを「Cocoon設定」から入力していた場合は、再設定が必要です。
以下の手順で設定できます。
事前にプラグイン「SEO SIMPLE PACK」をインストールしておいてください。
「UA」もしくは「G」から始まるIDです。
これだけでGoogleアナリティクスの設定は完了です。
Cocoon➤SWELL移行ガイド：Googleアドセンスの設定
サイト内にアドセンス広告を設置していた場合も再度設定し直す必要があります。
SWELLでは以下の手順で各広告を設定することができます。
Cocoon➤SWELL移行ガイド：Cocoon独自の装飾をSWELLのスタイルにリライト
CocoonからSWELLへの移行に伴い崩れた装飾をリライトしていきましょう。
くらべネコかなり大変な作業なので、優先順位を付けてリライトしていくことをおすすめします。
Cocoon装飾がSWELLに移行したあとどうなるのか？気になる方も多いと思います。
サポートプラグインが対応している装飾の一覧が記載されています。
Cocoon➤SWELL移行ガイド：優先的にリライトしたい装飾
テーマをSWELLに変更して、デザインが維持できない、崩れてしまう可能性のある装飾は以下のとおりです。
- 文字色、太字
- 見出しボックス
- タブ見出しボックス
- ラベルボックス
- ふきだし
- Cocoonボタン
- 囲みボタン
- 人気記事一覧
- ナビカード一覧
- プロフィールボックス
- ページ読み込み時の日付
- Amazonリンク
- 楽天リンク
- FAQ(寄付特典)
- HTML挿入ボタン(寄付特典)
- 更新日ショートコード(寄付特典)
数が多いので青マーカーを引いたコンテンツのみピックアップして紹介します。
Cocoon➤SWELL移行ガイド：文字色、太字
テキストの文字色と太字の装飾はデザインが維持されません。
テーマ移行前後の装飾の違いは以下のとおりです。
Cocoon
SWELL移行後
上記はブロックツールバーの「A」タブから設定した装飾です。
ツールバーの「B」タブもしくは、Ctrl+Bで太字にした装飾は移行後も引き継がれます。
Cocoon➤SWELL移行ガイド：見出しボックス、タブ見出しボックス、ラベルボックス
見出しボックス系の装飾もデザインは維持されませんでした。
それぞれ、 テーマ移行前後の装飾の違いは以下のとおりです。
Cocoon
SWELL移行後
くらべネコ移行時はデザインが崩れていないか要チェック！
SWELLでは「キャプション付きブロック」というブロックがあるので、そのブロックに置き換えると良いかなと思います。
Cocoon➤SWELL移行ガイド：ふきだし
ふきだしはスマホ表示で多少表示が崩れてしまいます。
テーマ移行前後の装飾の違いは以下のとおりです。
くらべネコPC表示では全く問題なしでした！
Cocoon
SWELL移行後
SWELL移行後、スマホ表示のふきだしは以下画像のようなイメージになります。
大きな問題ではありませんが、少々窮屈な印象なので気になる人もいるかもしれません。
くらべネコ必要に応じて修正しよう！
ちなみに、SWELLのふきだしはアイコンなどを事前に設定しておくことができるのでとても便利です。
ボタン
Cocoonのボタンブロックもデザインがうまく引き継がれませんでした。
テーマ移行前後の装飾の違いは以下のとおりです。
Cocoon
SWELL移行後
移行後は、ボタンが白背景、白文字になっていて見えませんが、ボタン自体は存在しています。
以下の赤枠のボタンブロックがブロックエディター標準のボタンです。
SWELLには、「SWELLボタン」というオリジナルのボタンブロックがあります。
便利な機能がたくさん用意されているので、ぜひSWELLボタンに置き換えると良いかなと思います。
Cocoon➤SWELL移行ガイド：ゆっくりでもリライトしておきたい装飾
ですが後述するとおり、最終的にサポートプラグインは停止もしくは削除することをおすすめします。
くらべネコ記事数が多ければ多いほど、この作業が大変になるね(;^_^A
ただし、このリライトに緊急性はないので、新記事を書いたり他の作業をする合間にゆっくり進めても良いと思います。
くらべネコ無理のない程度にCocoon時代の装飾を無くしていきましょう。
Cocoon➤SWELL移行ガイド：乗り換えサポートプラグインとCocoonテーマの削除
乗り換えサポートプラグインを有効化している間は、CocoonとSWELLの2つのテーマを読み込むためサイトが重くなる懸念があります。
Cocoon➤SWELL移行ガイド：SWELLでサイト全体のデザインを整えてみる
くらべネコ一通りSWELL移行後の設定とリライトまで完了したので、ここから先は自由にブログを運営していきましょう。
記事を書き始めるのもOKですし、サイトのデザインを整えてみても良いと思います。
ここでは、デザインを整える方法を紹介しておきます。
Cocoon➤SWELL移行ガイド：デモサイトデザインに着せ替える
SWELLにはデモサイトデザインに着せ替えるためのデータが無料配布されています。
着せ替えデータは以下の6パターン用意されています。
Cocoon➤SWELL移行ガイド：オリジナルのトップページを作ってみる
もちろん、デモサイトではなく自分でオリジナルのトップページを作りこむこともできます。
まず、ファーストビューの印象を整えてくれる設定がSWELLには複数用意されています。
- メインビジュアル
- 記事スライダー
- ピックアップバナー
Cocoon➤SWELL移行ガイド：SWELLのブロックエディターで記事を書いてみる
SWELLに移行したら、これまでクラシックエディターで執筆していた方もブロックエディターを使ってみてほしいです。
SWELLではブロックエディターを強化してくれる機能が豊富に用意されています。
Cocoon➤SWELL移行ガイド：SWELLでブログ運営を充実させよう♪
くらべネコ「Cocoon」から「SWELL」にテーマを移行する手順を紹介しました♪