【完全ガイド】CocoonからSWELLへ移行する方法|手順・注意点・失敗しないための準備

当ページのリンクには広告が含まれています。
|手順・注意点・失敗しないための準備

こんにちは、和花人ブログのMIHOです。

結論から言うと、

CocoonからSWELLへの移行は、準備さえすれば難しくありません。

ただし、

  • Cocoon独自ショートコードの置き換え
  • 装飾ブロックの修正
  • ウィジェットの再設定

ここでつまずく人が多いのも事実です。

この記事では、

  • 移行前にやるべき準備
  • 実際の移行手順
  • よくある失敗と対処法
  • 私が移行して感じたリアルな変化

を、実体験ベースでまとめました。

「有料テーマに変えたいけど不安…」という方の判断材料になれば嬉しいです。

今回の記事の目次

なぜ私はCocoonからSWELLに移行したのか

Cocoonは、本当に優秀な無料テーマです。
私もブログを始めた頃から使い、WordPressの基本を学びました。

でも記事数が増えるにつれ、こう感じるようになりました。

  • もっと読みやすく整えたい
  • デザインに統一感を出したい
  • カスタマイズに時間を取られたくない

ある日、偶然見かけたSWELL使用サイトの“静かな美しさ”に一目ぼれ。

余白の使い方、文字の読みやすさ、洗練されたボタンや装飾。

「この環境で書きたい」

それが決定打でした。

▼ 私が使っているWordPressテーマ「SWELL」を見る(PR)

COCOONとSWELLの印象比較

比較項目CocoonSWELL
価格無料有料
デザインカスタマイズ前提初期で整う
表示速度高速さらに最適化設計
ブロック対応対応完全最適化
直感操作やや慣れ必要直感的

Cocoonは「自分で作り込むテーマ」
SWELLは「最初から整っているテーマ」

という印象です。

移行前の準備チェックリスト(超重要)

テーマを切り替える前に、まずは事前準備がとても大切です。

ここを怠ると、「表示崩れ」「レイアウトの不具合」「プラグイン競合」などのトラブルにつながります。

1. バックアップは必ず取る

何か問題が起きたときに元に戻せるよう、バックアップは必須です。

  • WordPressの管理画面から「All-in-One WP Migration」などのプラグインを使ってバックアップ
  • サーバー側(エックスサーバーなど)での自動バックアップ確認も忘れずに
MIHO

※私はエックスサーバーを使っていますが、バックアップがあるおかげで安心して移行できました。

2. Cocoon設定をスクショ保存

・見出し設定
・ウィジェット
・フォント
・カラー

などをスクリーンショットで残しておくと、SWELLで再構築するときに迷いません。

3. 使用中のショートコードを確認

COCOON独自のショートコード(例:[speech]など)はSWELLでは使えなくなります。
該当記事を検索し、置き換えリストを作成しておくと◎

Cocoon→SWELL 移行手順

以下のステップで、私はスムーズに移行できました。

STEP1|SWELLテーマの購入&ダウンロード

公式サイトから購入し、親テーマ+子テーマをダウンロードします。

▼ SWELL公式サイトはこちら(PR)

SWELLの購入〜インストールまでを画像付きで詳しく解説した記事はこちら
▼ SWELLの購入方法とWordpressへの設定手順を見る

STEP2|WordPressにアップロード

WordPressの管理画面 → 外観 → テーマ → 新規追加 → テーマのアップロードから、以下2つをアップロード:

  • 親テーマ:swell-x.x.x.zip
  • 子テーマ:swell_child.zip

アップロード後、「SWELL CHILD」の方を有効化しましょう。
※親テーマではないため注意して下さい。

STEP3|旧テーマ(COCOON)からの切り替え

テーマ切り替え後、一気にサイト全体が切り替わります。

最初はデザインがガタガタになるので焦らないでOK。
順を追って修正していきましょう!

STEP4|カスタマイザーで基本設定を整える

  • サイトロゴ・ファビコン
  • フォント・カラー設定
  • ヘッダーとフッターの構成

STEP5|ウィジェットの再設定

ウィジェット(サイドバーやフッター)も全て初期化されます。

  • 人気記事ウィジェット
  • プロフィールボックス
  • 広告バナー

すべて再構築が必要です。

記事下のプロフィール画像もこのタイミングで整えておきましょう。
▼ WordPressでGravatarなしでプロフィール画像を変更する方法

STEP6|装飾の崩れを修正(ここが一番手間!)

Cocoon装飾はそのままでは使えません。

  • 目次:COCOONの自動生成から、SWELLのブロックに置き換え
  • ボックス・吹き出し:SWELLの専用ブロックで再構築
  • アフィリエイトボタン:HTMLを見直す or SWELLボタンへ変更

SWELLはブロックエディタを前提に設計されているため、クラシックエディタ記事が多い人は要注意です。

記事数が多いほどここは時間がかかります。

STEP7|プラグインの見直しと整理

SWELLは多機能なので、これまで使っていたプラグインが不要または競合の可能性があります。

以下は不要になる代表的なプラグイン:

プラグイン名理由
Table of Contents PlusSWELLに目次自動生成機能あり
Lazy Load系SWELLが標準対応
キャッシュ系SWELL推奨の「WP Fastest Cache」に変更推奨

よくある失敗と対処法

❌ ショートコードが残る

対策: []がそのまま記事内に表示されることがあるので、「検索」→「置換」機能を使って一括修正が便利。
記事数が多い人は「Search Regex」などのプラグインが役立ちます。

❌ CSSが効かなくなる

COCOON用に書いたCSSが、SWELLではうまく反映されないことがあります。

対策: 子テーマのstyle.cssに貼り直すか、SWELL専用のクラス名に置き換え。
(SWELL公式ドキュメントで主要クラス一覧あり)

❌ 表示スピードが落ちた気がする…

SWELLは本来高速ですが、移行時に設定やプラグインが干渉していることも。

対策:

  • 画像の遅延読み込みを有効にする
  • 不要なJS読み込みをOFF
  • キャッシュ系プラグインの見直し

移行してよかった?私の本音レビュー

正直、最初の1週間はカスタマイズに追われて大変でした。

でもそれを乗り越えると、「書くこと」や「魅せること」に集中できる環境が整い、ブログに対するモチベーションも再燃しました。

特に、

  • ブロックエディタがサクサク動く
  • デザインが整ってるからSNSで褒められる
  • 表示速度が改善し、SEO順位も安定

など、目に見える成果があったことで「乗り換えて大正解だった」と今では感じています。

まとめ|移行は“タイミング”が大事

Cocoonは素晴らしいテーマです。

でも、

「これからも長く続けたい」
「ブログを資産にしたい」

そう思うなら、早めの移行が楽です。

記事が300本になってからより、
50本の今の方が圧倒的に修正は少ない。

迷っているなら、一度公式サイトを見てみてください。

▼ WordPressテーマ「SWELL」をチェックする(PR)

▽迷わず選ばれる理由がある|私がSWELLを使い続けている理由(PR)

❀ 私も複数サイトを運営していますが、全てこのサーバーです。

|手順・注意点・失敗しないための準備

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

よかったらシェアしてね!
  • URLをコピーしました!
今回の記事の目次