WordPressテーマSWELL導入方法を見てみる

CocoonからSWELLへの移行手順【プラグインで簡単移行】

CocoonからSWELLへの移行手順【プラグインで簡単移行】
フェニック

Cocoonを使ってるけどSWELLに移行したいな。どうやったらいいのかな?

今回はこのような疑問にお答えします。

CocoonからSWELLへの移行は簡単です。

SWELLにはCocoonからの移行プラグインがあるからです。

私も使ってみたところ、不具合なく簡単にSWELLに移行できました。

SWELL移行後のデザイン
SWELL移行後のデザイン

この記事では、画像80枚以上使ってCocoonからSWELLに移行する手順を解説します。

失敗なく移行できるので、是非参考にしてください。

追記です。

ブログツールの中でも特におすすめ!と感じたものはブログアフィリエイトツールおすすめ21選で紹介しています。

この記事の著者

Shota @Shota_Lab_1

歴3年の副業ブロガー。月間32,000PVのブログフェニックスを運営。
X(Twitter)のフォロワーは4,500人以上

目次

CocoonからSWELLへの移行手順

Coocoonのデザイン
Coocoonのデザイン
SWELL移行後のデザイン
SWELL移行後のデザイン

上図が「移行前のCocoonのデザイン」と「SWELL移行後のデザイン」です。

手順通りの進めば、上図のように不具合なくSWELLへ移行できます。

SWELLをインストールする

SWELLを親テーマをインストールする手順は、以下の通りです。

STEP
SWELL公式サイトへ移動する
STEP
【購入する】をクリック
【購入する】をクリック
SWELL公式サイトのトップ画面
STEP
利用規約に同意する
利用規約に同意する
STEP
料金を支払いSWELLを購入する
SWELLの料金を支払い購入する
  • メールアドレスの入力
  • カード情報の入力
  • 国名を入力
STEP
メールアドレスからSWELLの親テーマをダウンロードする
メールアドレスからSWELLの親テーマをダウンロードする
ダウンロードされたSWELLの親テーマのzipファイル
STEP
SWELLの会員サイトに登録する

⋙SWELL会員サイト登録ページへ移動する

SWELLの会員サイトに登録する
  • ユーザー名の入力
  • メールアドレスの入力
  • パスワードの設定
STEP
会員サイトからSWELLの子テーマをダウンロードする
会員サイトからSWELLの子テーマをダウンロードする
ダウンロードしたSWELLの子テーマの画像
STEP
WordPressからSWELLの親テーマと子テーマをインストールする
WordPressからSWELLの親テーマと子テーマをインストールする①
WordPressからSWELLの親テーマと子テーマをインストールする②

これでSWELLのインストールは完了です。

この時点では、Cocoonを有効化しておいてください。

なおSWELLのインストール方法については、以下の記事でも解説しています。

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

SWELLには、Cocoonからの乗り換えプラグインが用意されています。

SWELL乗り換えプラグイン不使用時のデザイン
SWELL乗り換えプラグイン不使用時のデザイン
SWELL乗り換えプラグイン使用時のデザイン
SWELL乗り換えプラグイン使用時のデザイン

乗り換えプラグインを使用することで、デザイン崩れを最小限に抑えることができます。

SWELLフォーラムへの移動

SWELL乗り換えプラグインをダウンロードするために、SWELLフォーラムに移動します。

\ SWELL /

画面上部の【ログイン】をクリック

SWELLフォーラムに移動したら「SWELLERS’」会員画面にログインします。

画面上部の【ログイン】をクリックします。

SWELL購入時に登録した「メールアドレス」「パスワード」とCAPTCHAコードを入力し【ログイン】をクリック

SWELL購入時に登録した「メールアドレス」「パスワード」と「CAPTCHAコード」を入力し【ログイン】をクリックします。

これで「SWELLERS’」会員画面へのログインは完了です。

SWELL乗り換えプラグインのダウンロード

「Cocoon用-SWELL乗り換えプランイン」をダウンロード

「SWELLERS’」会員画面から「Cocoon用-SWELL乗り換えプランイン」をダウンロードします。

「cocoon-to-swell」と表記された圧縮ファイルがダウンロードされます。

乗り換えプラグインは圧縮ファイルのまま使用します。

Shota

誤って解凍してしまったら再度ダウンロードしてください。

SWELL乗り換えプラグインのインストール

WordPress管理画面から【プラグイン】⇒【新規追加】をクリック

WordPress管理画面から【プラグイン】⇒【新規追加】をクリックします。

【プラグインのアップロード】をクリック

【プラグインのアップロード】をクリックします。

「SWELL乗り換えプラグイン」を選択

ダウンロードした「SWELL乗り換えプラグイン」を選択します。

【今すぐインストール】をクリック

【今すぐインストール】をクリックしましょう。

【プラグインを有効化】をクリック

【プラグインを有効化】をクリックすれば、SWELL乗り換えプラグインのインストールは完了です。

CocoonからSWELLへ移行するための準備をする

SWELLに移行するために必要な準備は、以下の3点です。

  1. メタデータをSEO SIMPLE PACKへ移行
  2. CocoonのCSSコードを保管
  3. アドセンスコード、アナリティクスコード、サーチコンソール認証コードを保管

メタデータをSEO SIMPLE PACKへ移行

CocoonからSWELLへ移行する際に、メタデータを引き継ぐことはできません。

SWELLへ引き継げないメタデータ
  • 記事のタイトル
  • 記事のメタディスクリプション
  • アドセンスコード
  • アナリティクスコード
  • サーチコンソールの認証コード
  • OPG

「記事タイトル」と「記事のメタディスクリプション」は、簡単に移行できます。

先に済ませてしまいましょう。

STEP
SEO SIMPLE PACKをインストールする
SEO SIMPLE PACKをインストールする
STEP
投稿記事の【SEOタイトル】と【メタディスクリプション】をコピー
投稿記事の【SEOタイトル】と【メタディスクリプション】をコピー
STEP
SEO SIMPLE PACKの【このページのタイトルタグ】と【このページのディスクリプション】に貼り付ける
SEO SIMPLE PACKの【このページのタイトルタグ】と【このページのディスクリプション】に貼り付け
  • Cocoonの【SEOタイトル】と【メタディスクリプション】のすぐ下に設定項目が表示されます
STEP
【更新】をクリック
【更新】をクリック

固定ページを含め、全記事でこの作業を実施します。

フェニック

がんばるぞ!

CocoonのCSSコードの保管

CocoonをCSSコードで装飾している方は、CSSコードを保管しておきましょう。

CSSコードは外観の【テーマファイルエディター】もしくは【追加CSS】に記載されています。

今回は【追加CSS】から、CSSコードをコピーする方法を解説します。

WordPress管理画面から【外観】⇒【カスタマイズ】⇒【追加CSS】をクリック

WordPress管理画面から【外観】⇒【カスタマイズ】⇒【追加CSS】をクリックします。

CSSコードを全てコピー

CSSコードを全てコピーします。

コピーしたCSSコードは、メモ帳またはコードエディターに貼り付けて保管しましょう。

アドセンスコード、アナリティクスコード、サーチコンソール認証コードの保管

WordPress管理画面から【Cocoon設定】⇒【アクセス解析】をクリック

WordPress管理画面から【Cocoon設定】⇒【アクセス解析】をクリックします。

【ヘッダー用コード】に記載しているアドセンスコードをコピーします。

コピーしたアドセンスコードは、メモ帳またはコードエディターに貼り付けて保管しましょう。

同様の手順で、アナリティクスコードとサーチコンソール認証コードも保管します。

SWELLの子テーマを有効化する

WordPress管理画面から【外観】⇒【テーマ】をクリック

WordPress管理画面から【外観】⇒【テーマ】をクリックします。

【SWELL CHILD】を有効化

【SWELL CHILD】を有効化してください。

SWELL移行後のデザイン

これでCocoomからSWELLへテーマが移行しました。

SWELLの子テーマのみ有効化する理由

WordPressテーマは、親テーマと子テーマの片方しか有効化できないように設計されています。

SWELLの子テーマを有効化させる理由は、テーマのバージョンアップ時に設定をリセットさせないためです。

親テーマは、バージョンアップすると設定がリセットされます。

リセットされる設定項目
  • 外観のカスタマイズ
  • 内部SEOの設定
  • OPG設定

子テーマを有効化しておけば、設定情報は全て子テーマに残ります。

そのため親テーマがバージョンアップしても、設定がリセットすることはありません。

以上の理由からSWELLは子テーマのみ有効化してください。

SWELLからCocoonに移行した後の設定

中休み

SWELLからCocoonに移行した後の設定は、以下になります。

SWELLユーザー認証の設定

WordPress管理画面の【SWELLのユーザー認証が完了していません。】をクリック

SWELLはユーザー認証を設定しないと、テーマを更新することができません。

まずはユーザー認証を設定しましょう。

WordPress管理画面から【SWELLのユーザー認証が完了していません。】をクリックします。

SWELLに登録したメールアドレスを入力し【認証リクエスト送信】をクリック

ユーザー認証の画面が表示されたら、SWELLに登録したメールアドレスを入力し【認証リクエスト送信】をクリックします。

3分以内に、メールに添付されたユーザー認証用URLをクリック

登録したメールアドレスにSWELLからメールが届きます。

3分以内に、メールに添付されたユーザー認証用URLをクリックしましょう。

「(ドメイン名)の認証が完了しました。」と表示された画面

「(ドメイン名)の認証が完了しました。」と表示されたことを確認します。

WordPress管理画面に戻り【アクティベート完了】をクリック

WordPress管理画面に戻り【アクティベート完了】をクリックすれば、SWELLのユーザー認証は完了です。

SWELLへのメタデータの移行

CocoonからSWELLへ引き継げていない、以下のメタデータを設定します。

  • アドセンスコード
  • アナリティクスコード
  • サーチコンソールの認証コード
  • OPG

この項目では「アドセンスコード」「アナリティクスコード」「サーチコンソール認証コード」の設定方法を解説します。

OPG設定については、以下の記事で解説しています。

Googleアドセンスコードの設定

WordPress管理画面から【SWELL設定】⇒【SWELL設定】をクリック

WordPress管理画面から【SWELL設定】⇒【SWELL設定】をクリックします。

広告コードのタブを選択し【記事内広告】にアドセンスコードを貼り付ける

広告コードのタブを選択し【記事内広告】にアドセンスコードを貼り付けます。

【変更を保存】をクリックすれば、アドセンスコードの設定は完了です。

Googleアナリティスクコードの設定

WordPress管理画面から【SEO PACK】⇒【一般設定】をクリック

WordPress管理画面から【SEO PACK】⇒【一般設定】をクリックします。

Googleアナリティクスのタブを選択し【UAのタグ】または【GA4のタグ】を入力します。

Shota

アクセス数がダブルカウントされる可能性があるので、設定はどちらか一つにしてください。

【設定を保存する】をクリックすれば、アナリティスクコードの設定は完了です。

Googleサーチコンソールの認証コードの設定

WordPress管理画面から【SEO PACK】⇒【一般設定】をクリック

WordPress管理画面から【SEO PACK】⇒【一般設定】をクリックします。

ウェブマスターツールのタブを選択し【Googleサーチコンソール認証コード】に認証コードを入力します。

<meta name="google-site-verification" content="〇〇〇〇〇〇〇〇〇" />

〇〇〇〇〇〇〇〇〇がサーチコンソールの認証コードです。

【設定を保存する】をクリックすれば、サーチコンソールの認証コードの設定は完了です。

SWELLでのデザインの修正

デザインの修正が必要なのは、以下の6項目です。

  1. ブログ全体の基本カラーの修正
  2. SWELLのメインビジュアルの削除
  3. Cocoonで使用していたCSSコードの入力
  4. アイキャッチ画像の削除
  5. テキストリンクへの下線の追加
  6. サイドバーへのプロフィールの設置

ブログ全体の基本カラーの修正

SWELLの初期設定では、ブログ全体の基本カラーは青色に設定されています。

Cocoonで使用していた基本カラーに修正しましょう。

WordPress管理画面から【外観】⇒【カスタマイズ】をクリック

WordPress管理画面から【外観】⇒【カスタマイズ】をクリックします。

【サイト全体設定】をクリック
【基本カラー】をクリック

【サイト全体設定】⇒【基本カラー】をクリックします。

Cocoonで使用していた基本カラーを選択し【公開】をクリック

Cocoonで使用していた基本カラーを選択し【公開】をクリックします。

これでブログ全体の基本カラーの修正は完了です。

SWELLのメインビジュアルの削除

SWELLのメインビジュアルの削除

Cocoonにはメインビジュアルの設定機能はありません。

SWELL移行後に削除しましょう。

Shota

残したい方は残してください。

WordPress管理画面から【外観】⇒【カスタマイズ】をクリックします。

【トップページ】をクリック
【メインビジュアル】をクリック

【トップページ】⇒【メインビジュアル】をクリックします。

【メインビジュアルの表示内容】では【表示しない】にチェックを入れる

【メインビジュアルの表示内容】では【表示しない】にチェックを入れます。

【公開】をクリックすれば、メインビジュアルの削除は完了です。

メインビジュアル削除後のトップ画面
フェニック

トップページのデザインが整ってきたね!

Cocoonで使用していたCSSコードの入力

CSSが反映されていないSWELLのデザイン

SWELLに移行すると、Cocoonで使用していたCSSが反映されないためデザインが崩れます。

先ほど保管したCocoonのCSSコードを、SWELLに貼り付けましょう。

【追加CSS】をクリック

WordPress管理画面から【外観】⇒【カスタマイズ】をクリックします。

【追加CSS】をクリックしましょう。

CocoonのCSSコードを貼り付けて【公開】をクリック

CocoonのCSSコードを貼り付けて【公開】をクリックします。

SWELLにCocoonのCSSが反映されたデザイン

これでSWELLにもCocoonのCSSが反映されました。

アイキャッチ画像の削除

二重でアイキャッチ画像が表示された画像

タイトル下にアイキャッチ画像を設置していた場合、デフォルト設定では二重でアイキャッチ画像が表示されてしまいます。

タイトル下にアイキャッチ画像を設置していた方は、SWELLにより設置されるアイキャッチ画像を削除しましょう。

【投稿・固定ページ】をクリック
【アイキャッチ画像】をクリック

WordPress管理画面から【外観】⇒【カスタマイズ】をクリックします。

【投稿・固定ページ】⇒【アイキャッチ画像】をクリックします。

【本文の初めにアイキャッチ画像を表示】のチェックを外し【公開】をクリック

【本文の初めにアイキャッチ画像を表示】のチェックを外し【公開】をクリックしましょう。

これでアイキャッチ画像の削除は完了です。

テキストリンクへの下線の追加

CocoonからSWELLに移行すると、テキストリンクの設置されていた下線が消えてしまう

CocoonからSWELLに移行すると、テキストリンクの設置されていた下線が消えてしまいます。

テキストリンクのクリック率が下がってしまうので、下線を追加しましょう。

【投稿・固定ページ】をクリック
【コンテンツのデザイン】をクリック

WordPress管理画面から【外観】⇒【カスタマイズ】をクリックします。

【投稿・固定ページ】⇒【コンテンツのデザイン】をクリックしましょう。

【テキストリンクにアンダーラインを付ける】にチェック入れ【公開】をクリック

【テキストリンクにアンダーラインを付ける】にチェック入れ【公開】をクリックします。

これで、テキストリンクへの下線の追加は完了です。

サイドバーへのプロフィールの設置

Cocoonのサイドバー
Cocoonのサイドバー
SWELLのサイドバー
SWELLのサイドバー

CocoonからSWELLに移行すると、サイドバーに設置されていたプロフィールが消えてしまいます。

プロフィールは重要項目なので、必ず設置しましょう。

WordPress管理画面から【外観】⇒【ウィジェット】をクリック

WordPress管理画面から【外観】⇒【ウィジェット】をクリックします。

【共通サイドバー】にチェックを入れ【ウィジェットを追加】をクリック

【[SWELL]プロフィール】のブロックを開きます。

【共通サイドバー】にチェックを入れ【ウィジェットを追加】をクリックします。

プロフィールの設定方法①
プロフィールの設定方法②

プロフィールは以下のように設定します。

項目設定方法と解説
名前名前を入力
役職空欄でOK
プロフィール文Cocoonで使用していたプロフィール文を貼り付け
アイコン画像Cocoonで使用したアイコン画像を選択
プロフィール背景画像好みの画像を選択
ボタンリンク先プロフィールページのURLを入力
ボタンテキスト「詳しいプロフィール」と入力
ボタンの色ブログ全体の基本カラーに合致する色を選択
SNSアイコンリストを表示するチェックを入れる
アイコンを丸枠で囲むチェックを入れる

設定が完了したら【完了】をクリックしましょう。

最後にSNSアイコンにURLを入力します。

WordPress管理画面から【外観】⇒【カスタマイズ】をクリック

WordPress管理画面から【外観】⇒【カスタマイズ】をクリックします。

【SNS情報】をクリックしましょう。

【SNS情報】をクリックしましょう。

使用しているSNSのリンクを入力

以下の項目に、使用しているSNSのリンクを入力します。

  • Facebook
  • Twitter
  • Instagram 
  • TikTok
  • 楽天ROOM
  • LINE
  • Pinterest
  • Github
  • YouTube
  • Amazon欲しいものリスト
  • Feedly
  • RSS ページ
  • お問い合わせページ

入力したら【公開】をクリックしましょう。

サイドバーに設置されたプロフィール

これで、サイドバーへのプロフィールの設置は完了です。

SWELLのプラグイン設定

SWELLは機能性が高いため、プラグインを最小限に抑えることができます。

SWELLに不要なプラグイン
  • Classic Editor
  • Table of Contents Plus
  • WP Super Cache
  • SiteGuard WP Plugin

以下の記事では、SWELLにおすすめのプラグインと相性が悪いプラグインを解説しています。

ぜひ参考にしてください。

SWELLの高速化機能を設定する

SWELLには、独自の高速化機能が搭載されています。

SWELLの高速化機能
  • キャッシュ機能
  • 遅延読み込み機能
  • CSSのインライン読み込み機能
  • ページ遷移高速化機能
Shota

SWELLはWordPressテーマで、最も高速化機能が充実しています。

SWELLの高速化機能は必ず利用しましょう。

SWELLの高速化機能の設定方法はSWELLの高速化設定で解説しています。

HTMLサイトマップを作成する

Cocoonでは固定ページに[sitemap]を入力するだけで、HTMLサイトマップを作成できました。

しかしSWELLにはHTMLサイトマップを作成する機能がありません。

HTMLサイトマップは、プラグインで作成します。

WP Sitemap Pageの画像

おすすめのプラグインは、WP Sitemap Pageです。

WP Sitemap Pageを使えば、10分でHTMLサイトマップを作成できます。

\ ブログフェニックス /

WP Sitemap Pageの使い方は、以下の記事で解説しています。

CocoonからSWELLへの移行手順のまとめ

今回はCocoonからSWELLへの移行手順を解説しました。

さくっと内容を振り返ります。

CocoonからSWELLへの移行手順
  1. SWELLをインストールする
  2. SWELL乗り換えプラグインをインストールする
  3. SWELL移行前の準備をする
  4. SWELLの子テーマを有効化する
SWELL移行後の作業
  1. SWELLユーザー認証の設定
  2. SWELLへのメタデータの移行
  3. デザインの修正
  4. プラグイン設定
  5. 高速化設定
  6. HTMLサイトマップの作成

CocoonからSWELLへの移行は以上になります。

SWELLを使いブログを、より一層楽しく運営しましょう。

\ 人気No,1のWordPressテーマ /

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメント一覧 (2件)

コメントする

コメントに日本語が含まれない場合は表示できません(スパム対策)

目次