【簡単】CocoonからSWELLへ乗り換える方法とテーマ変更時の注意点

  • CocoonからSWELLにテーマを変更したいけれど注意点はあるのかな?
  • CocoonからSWELL に移行したときにデザインがどのように引き継がれるか知りたい
  • ワードプレスのテーマの変更って難しそう・・・。わかりやすく手順を説明してほしい
くろすけ

このような悩みを解決していきます

本記事の内容

  1. CocoonからSWELLへテーマ変更するまでの手順
  2. SWELLへ変更後におこなう各種設定について

ワードプレステーマの変更は難しそうに感じますがS乗り換えサポート用プラグインがあるので誰でも簡単に変更することができます。

目次

CocoonからSWELLへのテーマ変更手順と注意点

ワードプレステーマの変更は、

  • 文字の装飾(文字色やアンダーライン、マーカーなど)
  • 段落の装飾(リストやボックスなど)
  • テーマ独自の機能(吹き出し、)

などのデザインを引き継ぐことができません。ワードプレステーマの変更後は記事ひとつひとつの修正が必要です。

100記事、200記事とサイトの規模が大きくなればなるほど修正にかかる労力は膨大。それこそ気が遠くなるほど(笑)

SWELLでは他テーマからの変更を「乗り換えサポート用プラグイン」を使うことでデザインの崩れを最小限に抑えることができます。

乗り換えサポート用プラグインを有効化する前

乗り換えサポート用プラグインを有効化した後

乗り換えサポート用プラグインを使ってCocoonからSWELLへテーマを変更する手順はとても簡単です。

SWELLへ乗り換えまでの手順

  1. 親テーマ(=SWELL)と子テーマ(=SWELL-CHILD)をインストールする
  2. 乗り換えサポート用プラグインをインストールして有効化する
  3. 乗り換えサポート用プラグイン以外のプラグインを無効化する
  4. 子テーマ(=SWELL-CHILD)を有効化する
  5. Cocoonで書いていた記事を確認する

難しい操作はないので解説を読みながら落ち着いて進めていきましょう♪

親テーマと子テーマをインストールする

  1. 【外観】→【テーマ】をクリック
  2. 【新規追加】→【テーマのアップロード】をクリック
  3. 【ファイルの選択】からダウンロードした親テーマswell-2-2-3-1.zipと子テーマswell_child.zipをアップロード

今の段階で子テーマ「SWELL-CHILD」を有効化するとデザインが崩れてしまうので次は乗り換えサポート用プラグインをインストールしていきます。

ワードプレステーマはzipファイルのままインストールするので解凍せず(=展開せず)使用できます。

乗り換えサポートプラグインをインストールする

乗り換えサポート用プラグインは「SWELL購入者限定のマイページ」からダウンロードします。

STEP
SWELLの公式ページへ

ワードプレステーマ「SWELL」の公式サイトを開いたら【フォーラム】をクリックしましょう。

SWELL利用者限定の会員サイトと表示され「初めての方へ」「よくある質問」「フォーラム」「マイページ」の4つの項目があります。

マイページへは会員登録をしないとログインできないので、まずは会員登録をおこないます。画面を少しスクロールして「会員登録はこちらから」をクリックしましょう。

SWELL購入者限定パスワードはSWELL購入時に受信したメールに記載されています。

パスワードを入力したら【送信】をクリックしてください。すると以下のような会員登録フォームが表示されます。

必要事項を入力します

  1. ユーザー名を入力
  2. メールアドレスを入力
  3. チェックボックスを選択
  4. 【登録】をクリック

ここまでは、まだ仮登録です。入力したメールアドレス宛に届くパスワード設定用のメールでパスワードを設定することで本登録となります。

[SWELLERS’] Your username and password info」と件名が記載されたメールのリンクをクリックすると以下のようなパスワード設定画面が表示されます。

パスワードを設定するとマイページにログインできるようになります。

マイページにログインできるようになったら「製品ダウンロード」の【SWELL製品ページ】をクリックしましょう。

乗り換えサポート用プラグインの「Cocoon用」のリンクをクリックしてダウンロードします。保存先にはcocoon-to-swell-1-0-3.zipというファイル名で保存されているので確認してみてくださいね。

STEP
ファイルをアップロードして有効化

ダウンロードしたcocoon-to-swell-1-0-3.zipを【プラグイン】→【新規追加】→【プラグインのアップロード】でインストールします。

乗り換えサポート用プラグインは有効化するだけでCocoonのデザインをSWELLに引き継ぐことができるので設定などは一切不要です。

子テーマ「SWELL-CHILD」を有効化する

乗り換えサポート用プラグインのインストールができたら子テーマ「SWELL-CHILD」を有効化していきますが注意点が3つあります。

注意点
  • もしもに備えてサイトのバックアップを取っておく(BackWpupがおすすめ)
  • 乗り換えサポート用プラグイン以外のプラグインは無効化しておく
  • SWELLを有効化しても旧テーマ(=Cocoon)は削除しない

バックアップを取る

僕はCocoonからSWELLに変更する過程でトラブルは起こりませんでしたが「もしものとき」に備えてバックアップは取っておきましょう。

バックアップをワンクリックで作成できて、即座にパソコンに保存できる「BackWpup」がおすすめ。SWELLで推奨されているプラグインでもあるので先にインストールしておいてもOKです。

プラグインの無効化

今までCocoonで使えていたプラグインがそのままSWELLでも使えるとは限りません。プラグインがテーマに干渉して予期しない不具合が起こるケースがあります。トラブルを避けるためにも乗り換えサポート用プラグイン以外のプラグインは無効化させておきましょう。

SWELLにテーマ変更後はプラグインをひとつひとつ有効化していきます。もし、特定のプラグインを有効化したあとに不具合が起こっても原因を探しやすいといったメリットがあります。

旧テーマは削除しない

乗り換えサポート用プラグインは旧テーマ(=Cocoon)のファイルやデータを読み込んで使用しています。乗り換えサポート用プラグインを有効化しているあいだは旧テーマ(=Cocoon)は削除せずにインストールしたままにしてくださいね。

Cocoonで書いた記事を確認する

乗り換えサポート用プラグインによってCocoonからSWELLにデザインが引き継がれているかチェックしてみましょう。

乗り換えサポート用プラグインで引き継げるデザイン

  • テキスト装飾
  • ボックス装飾
  • バッヂ
  • マイクロコピー
  • ボタン
  • 吹き出し

乗り換えサポート用プラグインは旧テーマ(=Cocoon)のデザインを90%ほど維持できているように感じました。

【重要】SWELL乗り換え後におこなうべき設定

くろすけ

この章ではSWELL変更後におこなっておきたい設定について解説しますね。テーマの変更よりもここからのほうが重要です!

プラグインを整理する

まず、SWELL変更後におこないたいのはプラグインの整理です。SWELLに備わっている機能と重複するプラグインは無効化または削除しましょう。

プラグインはワードプレスの機能を拡張してくれるアプリのようなもの。「便利だから」とインストールしすぎるとワードプレスの動作が遅くなる原因のひとつになります。ワードプレスの動作が遅い=ページの表示速度が低下するため、あなたの書いた記事が読まれる前に読者がサイトから離脱してしまう可能性が高まります。

推奨プラグイン
  • SEO SIMPLE PACK
  • Highlighting Code Block
  • Google XML Sitemaps
  • WP Multibyte Patch
  • WP Revisions Control
  • Invisible reCaptcha for WordPress
  • BackWPup
  • Contact Form by WPForms
  • Really Simple SSL
  • Wordfence Security
  • SiteGuard WP Plugin
非推奨プラグイン
  • Table of Contents Plus
  • Lazy Load
  • Speech bubble
  • WordPress Popular Posts
  • Akismet Anti-Spam
  • AddQuicktag
  • TinyMCE Advanced
  • WP Super Cache
  • W3 Total Cache
  • EWWW Image Optimizer
  • Jetpack
くろすけ

僕はページの表示速度をなるべく低下させたくないので推奨プラグイン+SWELLの機能を補うプラグインをインストールしています。

GoogleアナリティクスのトラッキングIDの設定

Cocoonnのテーマ本体にGoogleアナリティクスのトラッキングIDを貼り付けていたならトラッキングIDの貼りかえ作業が必要です。

SWELLではテーマ本体にトラッキングIDを貼り付けるのではなくプラグイン「SEO SIMPLE PACK」を使います。

プラグイン「SEO SIMPLE PACK」を使うことで、今後SWELLから他テーマに変更したときにトラッキングIDを貼りかえる作業の手間が省けます。

プラグイン「SEO SIMPLE PACK」の【一般設定】をクリックして【Googleアナリティクス】を選択。トラッキングID(UA-から始まる文字列)を貼り付けます。

トラッキングIDを貼り付ける場所

くろすけ

「SEO SIMPLE PACK」の詳しい使い方は以下の記事を参考にしてみてください。

ディスクリプションの設定

Cocoonのテーマ本体の機能を使ってディスクリプション(記事の要約)を設定をおこなっていたならプラグイン「SEO SIMPLE PACK」での再設定が必要です。

ディスクリプションは検索結果に表示されるので記事のクリック率にも影響します。

  1. プラグイン「SEO SIMPLE PACK」をインストールする
  2. テーマをCocoonに戻して各記事のディスクリプションを「SEO SIMPLE PACK」にコピペする
  3. すべての記事のディスクリプションのコピペが終わったらテーマをSWELLに戻す

残念ながらディスクリプションの書き写しは手作業になります。最終的にはすべての記事でデザインやレイアウトの崩れがないか確認することになるので、そのときに新たにディスクリプション(記事の要約)を設定し直してもいいかもしれないですね。

Googleアドセンスの広告コードの貼り付け

CocoonにGoogleアドセンスの広告コードを貼り付けていたならSWELLに新たに貼り付ける必要があります。

SWELLでは「ウィジェットエリアに追加」「ショートコードによる呼び出し」「」と好きな場所にアドセンスを配置することができます。

Cocoonではチェックボックスを選択するだけで任意の場所にアドセンスを配置することができました。SWELLに変更すると、おもにウィジェットで配置することになるので最初は戸惑うかもしれませんが慣れれば問題ありません。

まとめ

CocoonからSWELLへのテーマ変更は乗り換えサポート用プラグインが用意されているので記事の修正にかかる労力と時間がグッと減らせます。

SWELLユーザーに対する圧倒的なサポート(=開発者了さんの神対応)がSWELLの魅力のひとつでもありますね(笑)

CocoonからSWELLのテーマ変更についての解説は以上ですが僕自身まだまだ網羅しきれていない部分があります。

「アイキャッチ画像がうまく表示されないんだけど・・・」や「おすすめのプラグインを教えてほしい」など質問はどんどん受け付けています♪

くろすけ

SWELLの推奨プラグインについては以下の記事にまとめてみました。参考にしてもらえると嬉しいです。

シンプル美と機能性を両立させた、国内最高峰のWordPressテーマ『SWELL』
よかったらシェアしてね!

コメント

コメントする

目次
閉じる