【WordPressテーマ】CocoonからSWELLへのテーマ変更はすごく簡単！注意点もしっかり解説！

無料WordPressテーマのCocoon(コクーン)を使っていると、ある時、もっと凝ったデザインにしたく、有料テーマを使ってみたくなることはありませんか？

そんな時、オススメしたい有料テーマはSWELL(スウェル)です！

SWELLはデザインが美しく現在人気急上昇ですが、メリットはそれだけではなく、Cocoonからの変更がとても簡単です！

本記事では、CocoonからSWELLへのテーマ変更がどれだけ簡単かお伝えしたいと思います。
ただし、注意点がいくつかあります。まずはテーマ変更の前に本記事を一通り見ることをおすすめします。

>> SWELLの詳細はこちら

SWELLはCocoonなどの他のテーマからの変更が簡単！

SWELLの大きな特徴の一つに、他のテーマからの変更が簡単にできるようなプラグインが用意されていることです。

通常、WordPressのテーマの変更は骨の折れる作業です。各テーマ特有の装飾を使っていたら、テーマを変えたら一瞬でデザインが崩れてしまいます。

10記事くらいであれば勢いで1日で修正できますが、100記事超えると1〜2週間がかりの作業になることもあります。

一方、SWELLの乗り換えプラグインを使うと、テーマを変更してもデザインが崩れないようにサポートしてくれます！

文字だけだとわかりづらいと思うので、実例で説明します。

例えば、変更前のCocoonで次のようなふきだしを使っていたとします(下の写真の赤枠)。
これはCocoon独自の装飾のため、他のテーマに変更すると使えなくなります。

テーマを移行すると、次のように崩れてしまいます。
もともとふきだしですが、アイコンと名前、ふきだしの文章が分離されてしまっていますね。

そこで、SWELLの乗り換えプラグインを有効にします。

そうすると、ふきだしが崩れずに表示されていますね。


もし乗り換えプラグインがなければ、このようなデザイン崩れをひとつひとつ対応する必要があります。
1記事10分かかるのであれば、250記事ある当ブログでは2,500分(＝41時間)かかってしまいますね(笑)

SWELLの乗り換えプラグインを使うことによって、この作業が不要になります。

1点注意ですが、この乗り換えプラグインを使っても100%ではありません。
一部デザインが崩れる場合もあるので注意です。

ちなみに、現在用意されている乗り換え用のプラグインは以下の通りです。
次のテーマからは、簡単に乗り換えできるようにサポートしてくれます。

CocoonからSWELLへの変更方法

まずは、参考までに変更前と変更後のアンパパブログを紹介します。

テーマを変更する前(Cocoon)

テーマを変更した後(SWELL)

それでは、さっそく変更手順を説明します。

おおまかには以上の通りです。

「事前準備」と「ローカル環境での動作確認」は、念の為の確認です。
本番環境でいきなり変えるのはリスクがあるので、ローカル環境で一度確認しておくと安全です。
ただ、ブログの規模が小さい等影響が限られるのであればスキップしても問題ありません。

SWELLの購入

SWELLの購入は以下の記事で解説しています。
(以下の記事の「購入」の部分だけ参考にしてください。インストールについては後ほど行います)

事前準備(任意)

まずは、事前準備として以下の作業を行います。

変更前ブログ(Cocoon)のバックアップ

バックアップは必須ではありませんが、万が一WordPressテーマを変更して動かなくなったときのことを考えると、バックアップをしておくと安心です。

ほとんどのレンタルサーバは、自動でバックアップしていると思います。
ただ、バックアップからの復元が有料であるケースもあります。
お金がかかるのが嫌という方は、手動でバックアップをしましょう。

変更前ブログ(Cocoon)の情報をメモ

CocoonからSWELLにテーマを変更してしまうと、Cocoonの設定画面が見れなくなってしまいます。
あとでSWELLに変更したあと、再設定するためにメモしておくと安全です。

Cocoon設定以外の、All In One SEOなどのプラグインで設定されている情報は、そのまま引き継がれるので大丈夫です。

盲点だったのが、メタディスクリプションです。
Cocoonだと、ここのメタディスクリプションにいれると、記事一覧に記事の抜粋として表示されます。
ここの部分も、Cocoon独自の機能のためWordPressのテーマを変更すると消えてしまいます。

変更後で必要であれば、メモをしておく必要があります。

他にもCocoon設定をしているのであれば、基本的にはワードプレステーマを変えてしまうと消えてしまうので、必要に応じてメモをしておきましょう。

ローカル環境で動作確認(任意)

WordPressのテーマの変更を行うと、デザイン崩れだけでなく、最悪ブログが停止してしまう可能性があります。

ですので、念の為ローカル環境で一度動作確認をしてから、本番環境のテーマを変更した方が安全です。

【用語】
実際に運用している環境のことを、本番環境といいます。
自分のパソコン内で動く環境のことを、ローカル環境といいます。

ローカル環境の作成

ローカル環境とは、自分のパソコンの中でWordPressのブログを動かすことです。

通常運用しているWordPress(本番環境)は全世界に公開されますが、ローカル環境の場合は自分のパソコンのみで確認ができます。

ローカル環境の目的は次の2つです。

ローカル環境の作成は、Local by Flyweelを使うと20分程度で作れます。

こちらの記事で詳しく解説しています。

「テーマ変更作業本番」の流れをローカル環境で試す

このあと「テーマ変更作業本番」を行いますが、ローカル環境で流れを確かめておくと安全です。

実際にローカル環境でテーマを変更してみて、「どのくらいデザインが崩れるのか？」とか「どのように修正するか？」などを確認しておくと良いでしょう。

手順は、このあとの「テーマ変更作業本番」の内容をローカル環境で行って下さい。

テーマ変更作業本番

それでは、実際に運用しているWordPress本番環境でCocoonからSWELLに変更しましょう。

Cocoonからの乗り換えサポート用プラグインをインストール

SWELLをインストールする前に、「Cocoonからの乗り換えサポート用プラグイン」をインストールし、有効化しておきましょう。
これにより、SWELLに変更したあとも、デザイン崩れを最小限にできます。


それでは、「Cocoonからの乗り換えサポート用プラグイン」のインストール手順を説明します。


プラグインは、利用者限定サイトからダウンロードできます。
まずは、利用者限定サイトの登録をおこいます。

パスワードは、購入時のメールに記載されています。

メールが届くので、本文のリンクをクリックすると、新しいパスワードが設定できます。

マイページに、下記のように「乗換サポート用プライングイン」のリンクがあります。
今回はCocoon用のプラグインをダウンロードして下さい。

プラグインのインストールは、WordPressの管理画面 > プラグイン から行います。
上部の「プラグインのアップロード」を押下して下さい。

その後、「ファイルを選択」で先程ダウンロードしたファイルを選択して、「今すぐインストール」ボタンを押下して下さい。

インストール完了後に、「プラグインを有効化」ボタンを押下して下さい。

以上です。

SWELLをインストール

それではSWELLを本番環境にインストールしましょう。
インストールについては、下記の記事の「インストール方法」の部分を参考にして下さい。

デザイン崩れが発生している箇所を修正

デザイン崩れが発生している箇所を修正します。

ちなみにアンパパブログのテーマ変更の時は、以下の部分が崩れていました。

■ランキング
Cocoonで作ったランキングは全体的に崩れていたので、作り直しました。

■囲みボタン
Cocoonにはアフィリエイトタグをそのままボタンに貼れる囲みボタンがありますが、SWELLではうまく表示されませんでした。

■ふきだし
基本的にはふきだしも正しく表示されますがが、ふきだしの名前を「アン(改行)パパ」としていたろころは、SWELLにしたら見事に崩れてしまいました。

これらを修正するのに、3時間くらいかかりました。

デザインの崩れ具合は、人によって異なると思います。
変更前のテーマで、複雑なことをしていると、デザイン崩れが多く発生する可能性がありますね。

各種設定

Cocoon設定画面で設定していた情報を、SWELLにおいても設定します。

▼インストール後の設定については、下記の記事も参考になると思います。

ここでは、設定項目の場所を説明します。


■Googleアドセンス設定
「SWELL設定 > 広告設定」でアドセンスのコードを設定します。


■OGPの設定、Googleアナリティクス、サーチコンソール連携
SWELLには設定項目がありませんので、「All in One SEO」「SEO SIMPLE PACK」などのプラグインを利用して設定します。
SWELLでは、軽量かつシンプルなプラグインの「SEO SIMPLE PACK」が推奨されています。


■アフィリエイトタグ
「Cocoonからの乗り換えサポート用プラグイン」を利用していれば、Cocoonで設定したアフィリエイトタグも崩れることなく表示できます。

ただし、Cocoonで設定したアフィリエイトタグを修正する機能はありません。
将来的にメンテナンスを考えると、SWELLの「広告タグ」画面で登録し直すことをオススメします。


■メタディスクリプション

Cocoonで設定したメタディスクリプションが引き継がれないので、記事の抜粋が消えてしまい、SWELLの記事一覧では下記の赤枠のように本文がつらつら表示されてしまいます。

SWELLでは各投稿の「記事の抜粋」に入力する必要があります。そうすると、ここで入力した情報が記事一覧で表示されます。

■ランキング
SWELLの「広告タグ」でランキング型の広告タイプを作れます。

「広告タグ」と「ブログパーツ」を組み合わせることによって、Cocoonのランキングに近いものを作れます。

デザイン周りの設定

SWELLは、特に設定をしなくても綺麗なデザインとなっています。
色やヘッダ、メインビジュアルなどを修正したい場合は、WordPressの「外観 > カスタマイズ」から設定が可能です。

特にマニュアル見なくても簡単に設定できるので、色々試してみて、自分好みのデザインにしたいですね。

▼デザイン周りの設定については、下記の記事も参考になると思います。

CocoonからSWELLへの変更の注意点

CocoonからSWELLへの変更の注意点を説明します。
テーマ変更方法の中でも説明したものもありますが、あらためて整理したいと思います。

「乗換サポート用プラグイン」は100%ではない

「乗換サポート用プライングイン」を使うと、テーマ変更後もデザイン崩れを防止でき、テーマ変更作業の時間を大幅に短縮できます。ただし、このプラグインは100%ではありません。

当ブログのテーマ変更のときも、以下の部分はデザイン崩れしました。

公式ページに、テーマ変更でもデザインが崩れない機能について書かれています。
崩れてしまった場合は、手動での修正が必要ですので、余裕をもって変更作業することをおすすめします。

▼プラグインを使った時、どのくらいデザインを維持できるか実験してみました

コードがSWELL用に置き換わるわけではない

「乗換サポート用プライングイン」を使っても、CocoonのコードがSWELLのコードに置き換わるわけではないようです。

あくまでも、Cocoonのコードを、表示する時に崩れないようにサポートしてくれるようなイメージです。
つまり、Cocoonのコードを崩れずに表示することはできますが、編集ができません。

記事を編集すると、以下のようにCocoonのコードが残り、エラー表示になります。

例えば、Cocoonで作られたふきだしの文言を修正ができません。
もしこの部分の文言等を直したい場合は、一度削除して、SWELLのふきだしにする必要があります。

いつかは「乗換サポート用プラグイン」を停止したい

乗換サポート用プラグインは、あくまでもCocoonのコードを崩れないように表示するものです。
つまり、プラグインを使うと、この変換処理が走りやや処理が重くなってしまいます。

ですので、いつかは全記事リライトして、「乗換サポート用プラグイン」を停止することが望ましいです。

急いで行う必要はありませんが、少しずつCocoonの装飾をSWELLの装飾におきかえていきたいですね。

Cocoon設定画面で設定した内容は消える

「テーマ変更方法」でも説明しましたが、Cocoon設定画面で設定した内容は、SWELLにしたら引き継がれません。

例えば、次のような項目に注意が必要です。必要に応じて再設定しましょう。

まとめ

今回は、CocoonからSWELLへのテーマ変更方法を説明しました。


通常、ワードプレスのテーマを変える場合、記事が多ければ多いほど、相当な時間がかかってしまいます。

しかし、今回紹介した「乗換サポート用プライングイン」を使用すれば、簡単にテーマ変更が行えます。
簡単にできるとはいえ、注意すべき点はあります。本記事を参考に、慎重にテーマ変更を進めましょう。


現在Cocoonを使っていて、有料テーマに乗り換えてみたいのであれば、SWELLが簡単にできるのでおすすめです。

>> SWELLの詳細はこちら

▼SWELLについてはこちらの記事で徹底レビューしました