圧倒的な使い心地!進化し続けるWordPressテーマ「SWELL」公式サイトをチェック!

「Cocoon」から「SWELL」へテーマ変更する方法と注意点【徹底解説】

wordpress-theme- chagetop

Webサイトのデザインを一気に変えることができる「WordPressのテーマ変更」。

「SWELLへテーマ変更したい!」と思いつつ、「今までのデザインがどうなるか心配」「もしもエラーが起きたら……」などの不安から動けなくなっていませんか?

当サイトも長い間、SWELLへテーマ変更できずにいました。しかし「乗り換えサポートプラグイン」のおかげで、心配していたデザイン崩れもほとんどなく変更することができましたよ。SWELLに変わった今は、また新鮮な気持ちでブログ運営しています。

この記事では、CocoonとSWELL違いやテーマ変更する方法、注意点などをまとめています。SWELLが気になっている方は、ぜひ続きを読んでみてくださいね。

目次

「Cocoon」と「SWELL」の違いを比較!

スクロールできます
「Coccon」「SWELL」
販売価格無料17,600円(税込)
発売日2018年7月2019年3月
利用制限なし(100%GPL)なし(100%GPL)
オリジナル機能
ページ表示高速化機能
ブロックエディタ―対応
サポート体制
カスタマイズ
オリジナルブロック
「Coccon」と「SWELL」の違いを比較

CocconとSWELLは意外にも、共通点が多いWordPressテーマです。

どちらもデザインはシンプル、「利用制限なし」「オリジナル機能」「ページ表示高速化機能」と充実しています。

利用制限の「100%GPL」というのはライセンスの種類です。(ざっくり説明すると、著作権は制作者のものだけど自由に利用していいよ。自己責任でやってね。みたいな感じですね。)

さらにユーザーが質問や不具合報告を行うフォーラムがあり、「サポート体制」も十分です。Cocconが無料で提供されているのは、不思議なくらいですよね。

では、この2つのWordPressテーマの大きな違いはどこにあるのでしょうか?

その答えは「ブロックエディタ―」の使いやすさです!

Cocconもブロックエディタ―対応ですが、SWELLは完全対応!文字の装飾やリスト、ボタンなど、記事を書きながらサクサク変更することができます。

出典|LOOS,Inc.

わたしは、SWELLを購入してから「ブロックエディタ―を使う楽しさ」を知りました。SWELL独自のオリジナルブロックもあり、記事作成だけでなくトップページ・固定ページもカスタマイズ可能です。

Cocconは高機能であるにも関わらず無料で利用できるため、とても人気のあるWordPressテーマです。

しかしカスタイズとなると、HTML・CSSなどのプログラミング知識がある程度必要になります。ブログを始めたばかりの初心者さんには、Cocoonのカスタマイズは少し難しいかもしれません。

プログラミングは分からないけれど手軽にカスタマイズしたい!という思いにぴったりと寄り添ってくれるWordPressテーマ、それが「SWELL」だと思います。

\圧倒的な使い心地のWordPressテーマ/

SWELLには他テーマからの「乗り換えサポートプラグイン」がある

moving-WordPress-theme
People illustrations by Storyset

WordPressのテーマを簡単に説明すると、「見た目や機能を変更するテンプレート」。有料・無料のさまざまなテーマがあり、自分の好みや目的に合わせてテーマを選ぶことができます。

着せ替え人形のように、テーマ変更するだけでWebサイトのデザインを一気に変えられるのは便利ですよね。

テーマ変更の悩み「デザイン崩れ」

WordPressのテーマ変更をするとき、一番心配されているのは「デザイン崩れ」ではないでしょうか?一生懸命書いた記事がおかしくなってしまったら……考えるだけでゾッとしますよね。

CocoonからSWELLへテーマ変更する場合、Cocoonの独自機能で行っていたカスタマイズは崩れてしまいます。たとえば、「吹き出し」「文章の装飾」「ショートコード」などです。

Cocoon|デザイン崩れが起きる機能例
  • 吹き出し
  • ボックスデザイン
  • 文章の装飾
  • ブログカード(ショートコード)
  • タイムライン(ショートコード)
  • プロフィールボックス(ショートコード) など……

そのため、テーマ移行後は記事のリライトが必要となってきます。記事数が多いサイトほど山のような作業量になってしまうというわけです……。

「テーマ乗り換えサポートプラグイン」を利用しよう

SWELLでは、そんなデザイン崩れの悩みを解消してくれるプラグイン「テーマ乗り換えサポートプラグイン」が用意されています。

このプラグインを利用すると、他テーマからSWELLへ変更しても旧テーマの設定を一部引き継ぐことが可能。なんと、デザイン崩れを最小限に抑えてくれるのです(神プラグインです)

現在は、「Cocoon」「AFFINGER5」「JIN」「SANGO」「STORK」「THE THOR」の6テーマに対応しています。SWELL購入後に、無料で利用できますよ。

乗り換えサポートプラグイン対応テーマ
  1. Cocoon
  2. AFFINGER5
  3. JIN
  4. SANGO
  5. STORK
  6. THE THOR

気をつけたいのは「テーマ乗り換えサポートプラグイン」を使ったとしても、すべての設定を引き継げるわけではない点です

デザイン崩れを一時的に抑え、自分のペースでテーマ変更作業を進められるのが「テーマ乗り換えサポートプラグイン」なのです。テーマ変更後は、必ず記事の確認・修正をしましょう。

SWELL
CocoonからSWELLへ乗り換えるためのサポート用プラグイン | WordPressテーマ SWELL CoconnからSWELLにテーマを乗り換えるための「サポート用プラグイン」を作成しました。 このプラグインを使用することで、 旧テーマのショートコード機能などで作成したコ...

テーマ変更トラブルを避けるための注意点

advance-preparation
Business illustrations by Storyset

つぎは、テーマ変更トラブルを避けるための注意点です。一つ目は「WordPressのバックアップ」をテーマ変更前にとること、そして二つ目は「SWELLの非推奨プラグインを確認することです。

トラブルが起きてから修復するのは大変です、テーマ変更の前に確認しておきましょう。

トラブルを避けるための注意点
  1. 「WordPressのバックアップ」をとる
  2. 「SWELLの非推奨プラグイン」を確認

1.テーマ変更前に「WordPressのバックアップ」をとっておく

万が一大きなエラーがWordPressで起きたとしても、バックアップさえとっておけば元の状態に戻すことができます。WordPressのバックアップ方法は、大きく分けると「プラグインでとる」「サーバーでとる」の2つです。

  • プラグインでバックアップをとる
  • サーバーでバックアップをとる

サーバーでバックアップをとる方法は、FTPソフト(ファイルを転送するソフト)を使います。FTPソフトに触ったことがない方は、プラグインがおすすめですよ。

おすすめのバックアッププライグインは「BackWPup」と「All-in-One WP Migration」。使い方は割愛しますが、どちらも面倒な作業なくバックアップがとれます。

2.「SWELLの非推奨プラグイン」の確認

もう一つ、SWELLへのテーマ変更で注意したいのが「プラグイン」です。その理由はテーマとプラグインの相性によって、不具合が起きたり、機能が重複していることがあるから。Cocoonを利用しているときは、正常に動いていた・必要だったプラグインがSWELLでは合わないケースがあるのですね。

SWELL公式サイトで紹介されている「非推奨プラグイン」を見てみましょう。

不具合が起こる可能性のあるプラグイン

  • Autoptimize」(軽量化プラグイン)…不具合が起こる可能性が高い!
  • SiteGuard WP Plugin」(セキュリティプラグイン)…不具合が起こるかも!?
  • EWWW Image Optimizer」(画像圧縮プラグイン)…不具合が起こるかも!?

「Autoptimize」は不具合が起こる可能性が高いそうです。SWELLにはサイトを軽量化する仕組みがありますので、無効化・アンインストールがおすすめです。

「SiteGuard WP Plugin」「EWWW Image Optimizer」のふたつも不具合が起こる原因になるかもしれないとして紹介されていました。

当サイトはどちらも利用していますが、今のところ不具合はありません(設定などが関係している……?)もしも、不具合が起きた場合はプラグインを停止してみましょう。

SWELLと機能が重複するプラグイン

SWELLには標準機能として、「目次作成」「画像遅延読み込み」「吹き出し作成」「人気記事リスト作成」などが備わっています。そのため、テーマ変更後はこれらの機能をもったプラグインは必要なくなるのですね。

特に気に入って使っているなどの理由がなければ、SWELLの機能だけで十分だと思います。

さらに詳しく知りたい方は、SWELL公式サイトの記事「SWELLで非推奨・不必要なプラグインと、推奨プラグインについて」をご覧ください。 

SWELL
SWELLで非推奨・不必要なプラグインと、推奨プラグインについて | WordPressテーマ SWELL このページでは、WordPressテーマ「SWELL」でどんなプラグインを使えばいいか、使わない方がいいのかを説明していきます。 SWELLと機能が重複していて不具合を起こすプラグ...

「Cocoon」から「SWELL」へのテーマ変更方法

さて、いよいよCocoonからSWELLへのテーマ変更です!順番に解説しますね。

STEP
WordPressのバックアップをとる

テーマ変更前に必ずWordPressのバックアップをとっておきましょう。

「もしものとき」に非常に役に立ちます。バックアップをとったことがない方はプラグインを利用してみてください。

STEP
プラグインの確認

利用しているプラグインのなかで、SWELLと合わないものが入っていないか確認します。

SWELL公式サイトに「SWELLで非推奨・不要なプラグインと、推奨プラグインについて」紹介されています。一度目を通しておきましょう。プラグイン「Autoptimize」は不具合が起こる可能性が高いそうですので、無効化・アンインストールがおすすめです。

STEP
「SWELLテーマ」「Cocoon用乗り換えサポートプラグイン」のダウンロード

SWELLテーマを購入

SWELL公式サイトのダウンロードページへ移動して、テーマを購入します。まだ購入されていない方は、下のボタンから移動できます。

利用規約に同意します」にチェックを入れ、「SWELLを購入する」ボタンを押してください。

swell-download
SWELLテーマを購入する

クレジットカード情報を入力して支払いが終われば、購入完了です。

SWELLテーマ・Cocoon用乗り換えサポートプラグインのダウンロード

SWELL会員サイトにアクセスし、マイページの「製品ダウンロードページ」から「SWELL親テーマ」「SWELL子テーマ」「Cocoon用乗り換えサポートプラグイン」の3つをダウンロードします。

ファイルはZip形式でダウンロードされます。そのまま使いますので、ファイルの解凍はしないでください

STEP
「乗り換えサポートプラグイン」をインストール・有効化

Cocoon用乗り換えサポートプラグインをWordPressにインストール・有効化する

それでは、Cocoon用乗り換えサポートプラグインからWordPressへアップロードしましょう。ダッシュボードから、プラグインの「新規追加」を選択します。

new-plugin
プラグイン新規追加

プラグインの追加から「プラグインのアップロード」をクリックしましょう。

plugin-file-upload
プラグインのアップロード

ファイルを選択」をクリック、「Cocoon用乗り換えサポートプラグイン」ファイルを選び、インストール・有効化します。

plugin-file
プラグインファイルの選択

インストール済みプラグインの一覧から、「Cocoon用乗り換えサポートプラグイン」が有効化されていることを確認しておきましょう。

swell-suport-plugin-from-cocoon
Cocoon用乗り換えサポートプラグインの有効化

プラグインの設定はありません、有効化だけしておきます。

STEP
「SWELLテーマ」をインストール・有効化

SWELL親テーマをWordPressにインストールする

続いてSWELLテーマをWordPressにインストールします。ダッシュボードの外観から「テーマ」を選び、「新規追加」をクリックします。

theme-upload
テーマをアップロード

テーマを追加の右側にある「テーマのアップロード」をクリックしましょう。「ファイルを選択」でダウンロードしたSWELL親テーマ(SWELL)のファイルを選び、アップロードします。

swell-theme-upload
SWELL親テーマを選択

親テーマはインストールだけです、有効化はしませんのでご注意ください!

SWELL子テーマをWordPressにインストール・有効化する

同様に、SWELL子テーマ(SWELL CHILD)もWordPressにインストールします。

swell-cocoon-theme
SWELL子テーマを有効化

インストールが終わったら、SWELL親テーマ・子テーマとCocoon親テーマ・子テーマの4つが揃っていることを確認してください。

SWELL子テーマ(SWELL CHILD)の「有効化」をクリックします

STEP
「デザイン崩れ」の確認・記事リライト

WordPressテーマからCocoonからSWELLに切り替わりました。デザイン崩れが起きていないか確認しながら、記事のリライトを進めていきましょう。

デザイン崩れの確認・記事リライトをする

投稿済みの記事をひらき、デザインがおかしくなっている箇所がないかチェックをします。

当サイトの場合は、白抜きボックスサイトマップ(Cocoonショートコード)でデザイン崩れがありました。またプラグイン「AddQuick Tag」で行っていた装飾がなくなっていましたよ。

デザイン崩れの例

  • 白抜きボックス
  • サイトマップ(ショートコード)
  • Amazon・楽天商品リンク(ショートコード)
  • ナビリスト(ショートコード)
  • AddQuick Tagの装飾                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           

つぎにCocoonのデザインが保たれている箇所も、修正していきましょう。

Cocoonテーマを残したままの状態は、WordPressの動きが重たくなる可能性があります。乗り換えサポートプラグインを活用しつつ、記事内のCocoonのデザインを修正していきましょう。

最終的には、CocoonテーマとCocoon用乗り換えサポートプラグインを削除します。

STEP
「Cocconテーマ」「Cocoon用乗り換えサポートプラグイン」を削除

Cocoon用乗り換えサポートプラグインを削除する

すべての記事をリライトできたら、Cocoon用乗り換えサポートプラグインはもう必要ありません。

プラグインを無効化して、もう一度デザイン崩れがないか確認。問題がなれば、削除しましょう。

STEP
Cocoonテーマを削除

Cocoon親テーマ・子テーマを削除する

いよいよ最後になりました。外観のテーマから、Cocoon親テーマ・Cocoon子テーマを選んで削除します。

これでCocoonからSWELLへのテーマ変更完了です!

まとめ:WordPressのテーマ変更にチャレンジしてみよう!

enjoy-swell-theme
Work illustrations by Storyset

CocoonからSWELLへ、WordPressのテーマ変更する方法と注意点を解説しました。最後に、もう一度ポイントを振り返っておきましょう。

  • WordPressのバックアップをとる
  • SWELL非推奨のプラグインを確認
  • Cocoon用テーマ乗り換えサポートプラグインを使う
  • デザイン崩れの確認・記事リライト
  • Cocoonテーマ・Cocoon用テーマ乗り換えサポートプラグインを削除

テーマ変更するのが初めての場合は、不安がいっぱいですよね。なかなか踏み出せない方も多いと思います。

ですが、実際にやってみるとテーマ変更自体の作業はあまりありません。SWELLテーマを購入・WordPressにインストールすれば、すぐ切り替わります。問題なのは、デザイン崩れの修正・記事のリライトです。

SWELLには「テーマ乗り換えサポートプラグイン」が用意されているため、デザイン崩れも最小限に抑えてくれます。本当にありがたいプラグインです。とはいうものの、やはり記事の量が多ければ多いほどリライト作業は大変……。

もしもテーマ変更するかどうか悩まれているのならば、「記事数が多くなる前の変更」をおすすめします。

ぜひ、WordPressのテーマ変更にチャレンジしてみてくださいね。

swell-banner

シンプル美と機能性を両立させたWordPressテーマ「SWELL」

ブロックエディタ―に完全対応!圧倒的な使い心地をぜひ体感してみてください。

アナログ子
「アナログな自分から変わりたい」アナログ子です。機械オンチで、よく物を壊します。ブログ、WordPress、ライティングなどの勉強中。

気になったこと、良かったことなどを記事にまとめています。好きな食べものは「焼いも」
wordpress-theme- chagetop

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

よかったらシェアしてね!
  • URL Copied!
  • URL Copied!

コメント

コメントする

目次
閉じる