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

SWELLで美容系HPを作るメリット
初心者

CocoonからSWELLにテーマを切り替える方法を知りたい
簡単な移行方法ってあるの?
SWELLへの移行経験者に話をききたいな。

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

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

この記事を書いた人
  • IT業界22年のベテラン エンジニア
  • WordPressで企業サイトの構築しています
  • 取り扱いWordPressテーマは300個オーバー
SWELLマニアの かんた です

目次

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

【楽ちん】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へテーマを切り替える移行手順

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

テーマ移行の流れ

  1. 最新版のSWELLを用意する
  2. Cocoon乗り換えサポートプラグインを有効化
  3. CocoonからSWELLにテーマ切り替える
  4. デザイン崩れを調整
  5. 独自ショートコードを削除する
  6. 乗り換えサポートプラグインを停止
  7. Cocoonを削除する
かんた

テーマ移行の各手順を解説します。

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

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

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

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

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

Cocoon用テーマ乗り換えサポートプラグイン
Cocoon用テーマ乗り換えサポートプラグイン

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

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

かんた

乗り換えサポートプラグインは有効化するだけで動作します。プラグインの設定はありません。

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

SWELLを有効化

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

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

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

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

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

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

かんた

ちなみにこの作業はマニュアル、つまり手作業になります。

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

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

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

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

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

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

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

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

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

Cocoon用テーマ乗り換えサポートプラグイン

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

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

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

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

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

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

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

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

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

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

デザインが崩れが発生した装飾

  • ランキング
  • ふきだし
  • ボックス

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

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

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

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

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

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

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

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

動作環境
WordPress5.5以上(推奨:5.6~)
PHP7.0以上
2021年2月6日のデータ(引用元:SWELL公式サイト)

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

かんた

レンタルサーバー会社ごとのPHPバージョン変更方法をまとめました↓

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

【備考】テーマ移行後の作業

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

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

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

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

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

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

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の吹き出しオプション

  • アイコン画像
  • 名前(吹き出しの下に表示されるテキスト)
  • アイコンの枠
  • 吹き出しの形
  • 吹き出しの向き
  • 吹き出しの色
  • 吹き出しの線

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

アナリティクスの設定

アナリティクスの設定

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

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

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

かんた

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

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

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

かんた

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

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

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

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

かんた

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

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

SWELLでインフィード広告を表示させる方法

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

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

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

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

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

  • ウィジェット
  • 記事内の任意の箇所
  • 独自カスタマイズ
かんた

上から順に簡単な方法です。

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

Cocoonから移行前にテスト

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

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

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

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

初心者

バックアップサイトって初心者でも簡単に作れるの?

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

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

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

MySQLの上限

レンタルサーバープランMySQLの上限
エックスサーバーX10プラン制限なし
ConoHa WINGベーシック制限なし
さくらインターネットスタンダード50個
ロリポップ!スタンダード50個
レンタルサーバー会社ごとのMySQL上限数
かんた

ほとんどのレンタルサーバー会社でMySQLの制限がありません。余裕でバックアップサイトが作れますね。

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

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

全体の流れ

  1. WordPressをインストール
  2. サイトデータをエクスポート(出力)
  3. バックアップサイトでデータインポート(入力)
かんた

各ステップを詳しく解説します。

STEP
WordPressをインストール

レンタルサーバーのコントロールパネルにログインして作業を行います。

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

かんた

各レンタルサーバーのマニュアルをまとめました↓

インストールディレクトリーについて
WordPressをインストールする最、インストールする場所(インストールディレクトリー)を指定します。この時、うっかり本番環境のデータを上書きしないよう注意しましょう。

STEP
サイトデータをエクスポート

運営してるブログからサイトデータをエクスポート(出力)します。エクスポートはAll-in-One WP Migrationプラグインが簡単でオススメです。

バックアップサイトの作り方

All-in-One WP Migrationをインストールするとダッシュボード上に専用のメニューが表示されます。クリックしメニューを開き→エクスポートエクスポート先ファイル

しばらくすると緑色の枠で「ダウンロード」と表示されます。このボタンをクリック。

データをエクスポート
かんた

これでエクスポート(出力)作業はOKです。

STEP
バックアップサイトでデータインポート

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

All-in-One WP Migrationプラグインでインポート

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

ファイルサイズが大きい場合はインポートサイズを拡張できる無料プラグインを使いましょう。無料版は512MBまでインポートできます。どうしても容量を超えてしまう場合は有料版にするか、エクスポート時のオプションでメディアを対象外にしてみてください。かなり容量を削れます。

かんた

データのコピーできれば作業完了です。

検索エンジンに表示されない設定
バックアップサイトは検索エンジンに登録されないよう設定をしましょう。
ダッシュボード→設定表示設定検索エンジンでの表示にチェックを入れて変更を保存。

まとめ

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

CocoonからSWELLへ移行するさいのポイント

  • Cocoon用テーマ乗り換えサポートプラグインを使う
  • ショートコードを削除する
  • Cocoon用テーマ乗り換えサポートプラグインプラグインを忘れず停止・削除する
  • バックアップサイトで事前テストする
よかったらシェアしてね!
  • URLをコピーしました!
もくじ
先頭へ
目次
閉じる