【2023年プロ監修】CocoonからSWELLへの移行手順|ブログ初心者向けに効率的なテーマ切り替え方法を解説

JIN:R感想レビュー|JINとの違いを比較解説|JINからの移行は簡単か?
初心者

CocoonからSWELLに切り替えたい…
初心者でも簡単にできるかな?
詳しい手順を知りたい…

そんなお悩みに答えます。

WordPressテーマの切り替えって、なんだかちょっと怖いですよね?ブログのデザインが崩れたり、サイトが真っ白になってログインできなくなったら困ります。

僕はWeb制作の仕事をしています。仕事がらクライアントのWordPressテーマを別のテーマに移行するといった作業を業務レベルで行っています。Cocoonに関しても仕事で独自カスタマイズやテーマの切り替えを経験したことがあります。

本記事では初心者ブロガーさん向けに、CocoonからSWELLへの移行作業の手順を画像を多めに使って解説します。SWELLはバージョンアップの頻度が高いテーマです。2023年にリリースされている最新バージョンを使った解説ですので、テーマ移行作業の参考にしてください。

ちなみにCocoonからSWELLへの移行作業には、SWELL販売会社から乗り換えサポートプラグインが提供されています。SWELLへの移行作業がスムーズになる便利なプラグインですので、使い方を合わせて解説します。

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

テーマ切り替えの事前準備

テーマ切り替えの事前準備

本記事で解説するのは、無料テーマCocoonから有料テーマSWELLへの移行作業です。

海外のエンジニアが開発した同じ名称のテーマがあります。
国産ブログテーマ「SWELL」への移行作業ですので、ご注意ください。

テーマ切り替え前の事前準備

  1. バックアップファイルの取得
  2. Googleアナリティクスのコードをコピー
  3. Googleサーチコンソールタグのコピー
  4. カスタマイザー上の独自CSSコードのコピー
かんた

それぞれの作業を詳しく解説します。

【事前作業①】バックアップファイルの取得

このステップは任意です。

【事前作業①】バックアップ

テーマ移行中にトラブルが発生した場合に備えてバックアップを用意します。アフィリエイト報酬が発生しまくりのブログを運営しているようなユーザーさんは、SWELLへのテーマ切り替え前にブログのバックアップを取得しましょう。

記事数が少ない人で、このステップが煩わしく感じる人はスキップしてもかまいません。

ボクの経験談ですがテーマをSWELLに切り替えただけでアップロード済みの画像やデータがデータベースから消えることはありません。

かんた

過剰に心配する必要はありません。

バックアップ方法はなんでも構いません。無料のバックアップでもOK。レンタルサーバーが標準的に用意しているサービスでも構いません。

このステップの目的は復旧方法を確保することです。普段使っているプラグインやレンタルサーバーのバックアップサービスを利用できる人は、それでOKです。

大事なポイントは、復旧方法を知っているかどうか?

かんた

復旧方法がわからないプラグインを選んではいけません。

ちなみにボクはテーマ切り替えのバックアップにはAll-in-One WP Migrationプラグインを使っています。

管理画面上でボタンをポチッと押すとバックアップをエクスポートできて、ポチっとするとバックアップファイルをインポートできる操作性が抜群のプラグインです。

容量制限あり

All-in-One WP Migrationの無料版はバックアップの上限があります。上限を超える場合は有料版を購入するか、別の無料バックアッププラグインを利用してください。なお、All-in-One WP Migrationでバックアップデータを作成するさい、「メディアライブラリをエクスポートしない (ファイル) 」チェックを入れるとファイルサイズをかなり小さくすることができます↓

メディアライブラリをエクスポートしない (ファイル)

【事前作業②】Googleアナリティクスのコードをコピー

ブロガーさんだとブログのアクセス解析にGoogleアナリティクスを利用していますよね?GoogleアナリティクスのコードはSWELLに移設する必要があります。うっかり忘れてしまうと、テーマ移行後にpvが0のままになってしまいます。

テーマ切り替え前にCocoonで設定しているGoogle アナリティクスのコードをコピーしましょう↓

操作内容

Cocoon設定」→「アクセス解析・認証」をクリック↓

「Cocoon設定」→「アクセス解析・認証」をクリック↓

ページを下にスクロールし、「Google Analytics設定」のコードをコピー↓

ページを下にスクロールし、Google Analytics設定

アナリティクスコード」にあるコードをメモ帳にコピー↓

アナリティクスコードをコピー

【事前作業③】サーチコンソールタグのコピー

このステップは任意です。

Googleサーチコンソールを利用している人向けの作業です。SWELLへテーマ切り替え前に、Cocoonの管理画面で設定したサーチコンソールのタグをコピーしておきましょう。

操作内容

Cocoon設定」→「アクセス解析・認証」をクリック↓

「Cocoon設定」→「アクセス解析・認証」をクリック↓

ページを下にスクロールし、「Google Search Console設定」のコードをメモ帳にコピー↓

Google Search Console

【事前作業④】カスタマイザー上の独自CSSコードのコピー

このステップは任意です。

Cocoonでカスタマイザーに独自CSSを追加している人向けの作業です。ヘッダーやフッターなどのレイアウト系の装飾はSWELLに移行してもHTML構造が違うので移設する日通はありません。ブログ記事内の装飾に独自CSSを利用している人のみ、事前準備としてCSSコードをコピーしましょう。

カスタマイザーに設定している独自CSSコードをメモする作業手順です↓

操作内容

外観」→「カスタマイズ」をクリック↓

「外観」→「カスタマイズ」をクリック↓

追加CSS」をクリック↓

カスタマイザーの追加CSS

追加してあるCSSコードをコピーし、メモ帳に貼り付け↓

CSSをコピー

CocoonからSWELLへのテーマ切り替え作業手順

CocoonからSWELLへの移行手順

事前準備は完了しましたか?

ここからはWordPressテーマをCocoonからSWELLに切り替える方法をステップごとに解説していきます。まずはテーマ乗り換えサポートプラグインについて軽めに解説します。

テーマ切り替えサポートプラグインは、SWELLの開発元が提供している無料プラグインです。名前からイメージできる通り、テーマを切り替え作業をサポートしてくれる効果があります。

初心者

どんなサポートなの?

一般的にWordPressテーマを別のテーマに切り替えるとテーマの独自装飾は消えてしまいます。例えばブログ定番の装飾の「吹き出し」を例にします。

次の画像はCocoonで吹き出しを使ったサンプルです↓

Cocoonで設定した吹き出し
【吹き出し】テーマ切り替え前のサンプル

テーマをCocoon以外に切り替えると、次のように吹き出し装飾がなくなってしまいます↓

SWELLにサポート乗り換えプラグインなしで切り替えた画面
【吹き出し】テーマ切り替え後のサンプル

画像が大きく表示され、吹き出しのテキスト部分が改行されてしまいました。吹き出しの枠線も完全に消えています。もはや吹き出しがあったとは想像がつかないレベルに崩れました。

次にテーマ乗り換えサポートプラグインを使った場合のサンプルです。テーマをSWELLに切り替えても、吹き出しは正常に表示されました↓

テーマ乗り換えサポートプラグインを使った場合の表示例
【吹き出し】乗り換えサポートプラグインを使った場合サンプル

テーマをSWELLに移行中もCocoonで使っていた装飾がSWELLの装飾に変換されます。これがテーマ乗り換えサポートプラグインの効果です。プラグインを使っても、Cocoonの装飾全てが変換されるわけではありません。

どの程度の装飾が変換されるかはSWELL公式ページで解説しています。詳しく知りたい人は、最新のSWELL公式情報を確認してください。

SWELLのテーマ購入手続き

WordPressテーマSWELLの購入ステップです。

Cocoonは無料テーマとして配布されていますが、SWELLは有料テーマです。購入しなければ利用することはできません。

WordPressテーマのようなソフトウェアは、ごくまれに公式サイト以外で格安で転売されていることがあります。ですが、SWELLはユーザー認証が導入されているテーマです。

SWELL公式サイト以外でSWELLを入手した場合、ユーザー認証ができずテーマのアップデートができません。乗り換えサポートプラグインや、着せ替えデザイン、サポートといったサービスを利用することもできません。

かんた

SWELLのテーマは公式サイトからちゃんと購入しましょう。

公式 WordPressテーマ「SWELL」をダウンロード

操作内容

SWELL公式サイトにアクセス↓

SWELLのテーマ購入画面
出典:SWELL公式ページ

利用規約を確認し、「利用規約に同意します」にチェックを入れる↓

利用規約を確認するにチェックを入れる
出典:SWELL公式ページ

SWELLを購入する」をクリック↓

SWELLを購入するボタンをクリック

カードでの支払いページで必要事項を入力し、

\17,600支払う」をクリック↓

SWELLを購入する手順
かんた

SWELLの購入手順は、次の記事で解説しています。

SWELL会員登録作業

テーマ購入後のステップです。SWELL購入者以外は会員登録できません。

SWELLの会員登録を行うステップです。会員登録すると最新バージョンのSWELLをいつでもダウンロードできるほか、次のメリットがあります。

会員登録する理由とメリット

  1. SWELLの子テーマをダウンロードできる
  2. ユーザー認証をすることができる
  3. テーマ切り替えサポートプラグインをダウンロードできる
  4. 着せかえデザインデータがダウンロードできる
  5. フォーラムに質問や要望を投稿できる
  6. オンラインコミュニティーに参加できる
かんた

会員登録する手順を解説します。

操作内容

会員登録ページにアクセス。

ユーザー名」、「メールアドレス」、「パスワード」を入力↓

必要事項を入力↓

メールアドレスはSWELL購入時に入力したメールアドレスのみ有効です。
それ以外のメールアドレスで会員登録することはできません。

利用規約を確認してチェックを入れた後、「登録する」をクリック↓

会員登録する

登録時のメールアドレスを間違えてしまった場合

SWELL公式ページにある「問い合わせフォーム」から連絡しましょう。

SWELLのテーマファイルをダウンロード

SWELLのテーマファイルをダウンロードするステップです。

操作内容

マイページにアクセスし、ログインします↓

マイページにログイン

ページを下に少しスクロールします。

SWELL製品ダウンロード部分の「SWELL 本体最新版」にある「swell-*-*-*.zip」をクリック↓

SWELLテーマをダウンロード

テーマの「*」について
swell-*-*-*.zipの「*」部分はバージョン情報です。
画像とは異なる表記になっている場合がありますが、気にする必要はありません。

子テーマを利用する場合は「子テーマ」にある「swell_child.zip」をダウンロード↓

SWELL子テーマをダウンロード

テーマファイル、子テーマファイルはzip形式のまま保存しておきます。解凍せず、そのままアップロードして使います。パソコンの設定で「拡張子を表示しない」を有効化している場合は、ダウンロードしたファイル名にに.zipは表示されませんが、気にする必要はありません。

かんた

解凍せず、ダウンロードしたままの状態で保存してください。

MacでSafariを使っている場合の注意点
zip形式のファイルをダウンロードすると自動的に解凍されて中身が表示されることがあります。
テーマファイルのダウンロード時にZipファイルが自動解凍されないようSafariで設定を解除するか、Google Chromeなど別のブラウザでテーマファイルをダウンロードしてください。

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

テーマ乗り換えサポートプラグインを利用予定の場合はこのステップを行ってください。

テーマ乗り換えサポートプラグインを有効化すると装飾が崩れるとこを最小限にしてくれます。記事数が多く、リライトに時間がかかりそうな場合にはテーマ乗り換えサポートプラグインを活用しましょう。

操作内容

マイページにアクセスし、ログインします↓

マイページにログイン

ログイン後、ページを下にスクロール。

SWELL製品ダウンロード部分の「乗り換えサポートプラグイン」にある「Cocoon用」をクリック↓

SWELL製品ダウンロード部分の「乗り換えサポートプラグイン」にある「Cocoon用」をクリック↓

プラグインはzip形式のファイルです。
テーマ同様に解凍しないで、そのまま保存しておきます。

SWELLのテーマファイルをアップロード

ダウンロードしたSWELLのテーマファイルをアップロードします。

操作内容

外観」→「テーマ」をクリック↓

「外観」→「カスタマイズ」をクリック↓

新規追加」をクリックし、ダウンロードしたSWELLのテーマファイルを選択↓

かんた

子テーマを利用する場合は合わせて子テーマをアップロードしましょう。

アップロードの順番に注意

テーマと子テーマをアップロードする場合、テーマ本体を先にインストールしてください。
子テーマを先にアップロードするとエラーが表示されます。

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

このステップは任意です。

Cocoonテーマ乗り換えサポートプラグインを利用する場合にこのステップを行ってください。

操作内容

プラグイン」をクリック↓

プラグインを追加

新規追加」をクリック↓

プラグインを追加

Cocoon用テーマ乗り換えサポートプラグインをアップロードし、有効化します↓

プラグインを有効化するとパフォーマンスが低下します

テーマ乗り換えサポートプラグイン有効時に、本来読み込む必要のないCocoonのファイルを読み込み装飾を書き換えて表示します。テーマ乗り換えサポートプラグインは装飾のコードをデータベースレベルで置換しているわけではありません。記事のリライトを行い、完全にCocoonの装飾をSWELLに置き換えた後に、プラグインを停止しましょう。

SWELLのテーマ有効化作業

操作内容

外観」→「テーマ」をクリック↓

テーマを有効化

SWELLを選択し「有効化」をクリック↓

SWELLを有効化

ファイルレベルでカスタマイズする予定の場合は、子テーマを有効化してください。

ユーザー認証作業

SWELLはユーザー認証システムが導入されているテーマです。
認証をしていないサイトではテーマのアップデートができません

ユーザー認証の設定手順を紹介します。

操作内容

ダッシュボードに表示される「SWELLのユーザー認証が完了していません。」をクリック↓

SWELLのユーザー認証が完了していません。」をクリック

メールアドレス」に、SWELL購入時に登録したメールアドレスを入力↓

SWELLのユーザー認証が完了していません。

※購入時に設定したメールアドレス以外は利用できません。

認証リクエストを送信」をクリック↓

「認証リクエストを送信」をクリック↓

登録したメールアドレスに、次の確認メールが届きます↓

  • 件名:SWELLのユーザー認証用URLを送付します。
  • 送信元ドメイン:swell-theme.com

メール内のリンクをクリック↓

リンクをクリック

認証が完了された旨が表示されます↓

認証が確認できたSWELLの画面

確認メールについて

メールは認証リクエストを送信直後に届きます。認証リクエストボタンをクリックし1分以上経過してもメールが届かない場合は迷惑メールフォルダを確認しましょう。

複数サイトでの認証について

SWELLを複数のサイトを利用するケースでも、ユーザー認証サイトごとに行えます。認証したサイトは、マイページに表示されます。認証の解除はSWELLを有効化しているサイトから行えるほか、マイページからも行えます。

初心者

ユーザー認証をしないで運営することもできるの?

できます。マイページから最新バージョンのSWELLをダウンロードがいつでもダウンロードできます。新バージョンがリリースされたら、マイページからテーマをダウンロードして、サイトにアップロードすれば認証プロセスを抜きにして最新バージョンでの運営ができます。

ただ、最新バージョンのSWELLを有効化していても「SWELLのユーザー認証が完了していません」の注意書きは出続けます。

SEO SIMPLE PACKプラグインのインストール

このステップは任意ですが、必須レベルでおススメします!

SEO SIMPLE PACKはSWELL開発者さんが公開しているプラグインです。有効化することで記事やアーカイブページでMeta title、Meta Descriptionなどを設定できるようになります。

記事ページのMeta設定

スクロールできます
SWELLのみの構成SEO SIMPLE PACK有効化時
Meta description設定できない設定できる
Robots設定できない設定できる
canonical URL設定できない設定できる
SEO SIMPLE PACKプラグイン有効時のMeta設定

カテゴリーアーカイブのMeta設定

スクロールできます
SWELLのみの構成SEO SIMPLE PACK有効化時
Meta description設定できない設定できる
Robots設定できない設定できる
canonical URL設定できない設定できる
SEO SIMPLE PACKプラグイン有効時のMeta設定

Cocoonだと記事のMeta titleとdescriptionは、テーマ内部のオプションで設定する仕様になっています↓

Cocoonの編集画面
【Cocoon有効時】ブロックエディターでMeta設定をするフィールド

Cocoonで設定していたMeta設定はCocoonの独自機能です。SWELLなど別のWordPressテーマに切り替えると出力されなくなります。せっかく設定したものが使えなくなるのは、もったいないですよね?

かんた

ここでSEO SIMPLE PACKプラグインの出番です。

SEO SIMPLE PACKプラグインを利用すると、Cocoonで利用していたMeta設定をSWELLで引き継ぐことができます。

後ほどMetaデータの引継ぎ方法を解説しますが、このステップではSEO SIMPLE PACKプラグインのインストール方法を紹介します↓

操作内容

プラグイン」をクリック↓

プラグインを追加

新規追加」をクリック↓

SEO SIMPLE PACK」でキーワード検索↓

プラグインを検索

SEO SIMPLE PACK表示されたら、「今すぐインストール」をクリック↓

プラグインをインストール
かんた

インストールが完了したらプラグインを有効化してください。

SEO SIMPLE PACKが見つからない場合

SEO SIMPLE PACKプラグインはWordPress公式プラグインディレクトリに公開されています。最新バージョンのプラグインはここからダウンロードできます。プラグインファイルをダウンロードしたら、ダッシュボードからアップロードしてください。

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

SEO SIMPLE PACKプラグインを使った手順です。

アクセス解析用に、Googleアナリティクスのコードを移設するステップです。

操作内容

SEO PACK」をクリック↓

“Tracking ID” for UA」にアナリティクスのコードを貼り付ける↓

Googleアナリティクスの設定が反映されているか確認する手順ですが、Googleアナリティクスにログインしリアルタイムユーザーを確認しつつ自分でサイトにアクセスしてみましょう。

かんた

リアルタイムユーザーの数が動いていれば設定作業は完了です。

Googleサーチコンソールの設定作業

サーチコンソールは、検索キーワード、Googleのインデックス状況などを確認できる便利なツールです。SWELLへのテーマ切り替え時に、忘れず移設作業を行いましょう。

操作内容

SEO PACK」をクリック↓

ウェブマスターツール」をクリック↓

ウェブマスターツール

Googleサーチコンソールの認証コード」に事前作業でコピーしたコードを貼り付ける↓

ふきだしの登録作業

ふきだしの登録作業

Cocoonの吹き出し機能って便利ですよね。SWELLにも同様の機能があります。

SWELLはCocoonと同じように、事前にふきだしを登録しておき、ブロックエディター上から呼び出して使うという仕様になっています。

ひんぱんに利用するふきだしを登録しておくことで執筆作業がスピードアップしますので、リライト開始前に登録しておきましょう。

操作内容

ふきだし」をクリック↓

ふきだしをクリック

新規ふきだしの追加」をクリック↓

ふきだしの新規追加をクリック

ふきだしの画像、アイコンの向きや枠線などをプリセットできます。登録数に制限はありませんので、必要なだけ登録しておきましょう。

Metaデータの引継ぎ作業

このステップは任意です。

Cocoonで設定したMeta title、Meta descriptionをSEO SIMPLE PACKプラグインに引き継ぐ作業です。

少しだけ、Meta周りの基本知識を紹介します。Cocoonはテーマ内に独自のMetaデータ管理機能を持っています。テーマを別のテーマに切り替えただけでは、Metaデータは引き継がれません。

一方のSWELLはテーマ内にMetaデータ管理機能は内包していません。同一開発者が提供しているSEO SIMPLE PACKプラグインでMetaデータを管理する作りになっています。

かんた

プラグイン化することにより、テーマの引っ越しに対応しやすいという設計です。

Meta titleの引継ぎ作業

この設定は任意です。

Cocoonで「SEOタイトル」を利用していたユーザー向けの解説です↓

Cocoonのタイトル
かんた

記事のタイトルをMeta tilteとしてそのまま使っているケースではこの作業は必要ありません。

Cocoonのtitleタグの設定をSEO SIMPLE PACKプラグインに引き継ぐには、SEO SIMPLE PACKプラグインの独自フィルターフック「ssp_output_title」を使います↓

操作内容

※コードの内容は編集しません。コードをそのまま張り付ける作業です。

SWELL子テーマのfunctions.phpに次のコードを貼り付ける↓

add_filter( 'ssp_output_title', function( $ssp_title ) {

    $post_id  = get_the_ID();
    $cocoon_meta_atnak = get_post_meta( $post_id, 'the_page_seo_title', true );
    $ssp_meta = get_post_meta( $post_id, 'ssp_meta_title', true );
    if ( empty( $ssp_meta ) && $cocoon_meta_atnak ) {
        return $cocoon_meta_atnak;
    }
    return $ssp_title;
});

SWELL子テーマを有効化していない環境であれば、Code Snippetsプラグインでコードを追加しても構いません。

上記フィルターフックを追加するとCocoonのtitleタグで設定した内容がMeta titleとしてHTMLに出力されます。

エディター下部に表示されるSEO SIMPLE PACK設定の「このページのタイトルタグ」はカラのままですが、この状態で問題ありません↓

SEOパックのタイトル

タイトルタグの設定を変更したい場合はこのページのタイトルタグに入力してください。以後、入力した値がHTMLと編集画面に表示されるようになります。

ssp_output_titleフィルターフックはデータベースに保存してあるmetaデータを置換するわけではありません。先ほど紹介したコードはCocoonのSEOタイトルの有無をチェックし、SEO SIMPLE PACKのタイトルが未入力であればCocoonのSEOタイトルを表示するという役割です。

フックを使わずスッキリした管理を目指したい場合は、CocoonのSEOタイトルをSEO SIMPLE PACKの値に置換するのがおすすめです。

レンタルサーバーの提供しているphpMyAdminツールや、Database My Adminプラグインのいずれかでデータベースでの操作で一括置換できます。

以下、プラグインを使った置換方法を紹介します。

操作内容

プラグイン」→「新規追加」をクリック、

Database My Admin」を検索、プラグインをインストールし有効化↓

「Database My Admin」を検索、プラグインをインストールし有効化↓

Database Admin」をクリック↓

Database Admin

WordPressで利用しているデータベースを選択↓

Select databaseの画面でWordPressで利用しているデータベースを選択します。

自分が使っているデータベースが不明な場合

表示されているどちらかのデータベースをクリックし、その中の「tables:」を確認↓

wp_posts」などが表示されているデータベースが対象です。

先頭の「wp_」はWordPressインストール時に設定した接頭語です。クイックインストールなど、レンタルサーバーの自動インストール機能を利用した人は自動的に割り当てられています。

○○_posts」「○○_users」などがあるデータベースを選択てください。

入力フォーム部分を選択↓

フォームにコマンドを入力

次のSQLクエリを入力↓

update wp_postmeta set meta_key = 'ssp_meta_title' where meta_key = 'the_page_seo_title'

Excute」をクリック↓

「Excute」をクリック↓

画面上部に「Success」と表示されたら作業完了です。

Database My Adminプラグインが見つからない場合

WordPress公式プラグインディレクトリで配布しています。最新バージョンをダウンロードし、ダッシュボードからインストールしてください。

Meta descriptionの引継ぎ作業

この設定は任意です。

先ほどのMeta titleと同じ作業です。

Cocoonのメタデスクリプションを利用してい人向けの作業ですので、そもそも使っていなかったという人はこのステップを読み飛ばしてください。

Cocoonのメタデスクリプション
【Cocoon】ブロックエディター上のメタデスクリプション

CocoonのメタデスクリプションをSEO SIMPLE PACKプラグインに引き継ぐには「ssp_output_description」フィルターフックを使います↓

操作内容

※コードの内容は編集しません。コピペするだけです。

SWELL子テーマのfunctions.phpに貼り付ける↓

add_filter('ssp_output_description', function($ssp_description) {

    $cocoon_meta_atnak = get_post_meta(get_the_ID(), 'the_page_meta_description', true);
    $ssp_meta = get_post_meta(get_the_ID(), 'ssp_meta_description', true);
    if ( empty( $ssp_meta ) && $cocoon_meta_atnak ) {
        return $cocoon_meta_atnak;
    }
    return $ssp_description;

});

SWELL子テーマは必須ではありません。子テーマを有効化していない場合はCode Snippetsプラグインを使ってください。テーマのバージョンアップで設定が上書きされてしまうので、SWELLのfunctions.phpへ書き込むのは避けましょう。

ssp_output_descriptionフィルターフックを追加するとCocoonのtitleタグで設定した内容がMeta descriptionとしてHTMLに出力されます。

Meta titleでも解説しましたが、SEO SIMPLE PACK設定の「このページのディスクリプション」はカラのままですが、この状態が正常です。

このページのディスクリプション

ディスクリプションを編集したい場合は、表示したい内容を入力しましょう。以後、入力した内容がMeta descriptionとしてHTMLに表示されるようになります。

Meta title同様にフィルターフックを使わずデータを置換する方法についてです。

操作内容

プラグイン」→「新規追加」、

Database My Admin」を検索、プラグインをインストールし有効化↓

「Database My Admin」を検索、プラグインをインストールし有効化↓

Database Admin」をクリック↓

Database Admin

WordPressで利用しているデータベースを選択↓

Select databaseの画面でWordPressで利用しているデータベースを選択します。

自分が使っているデータベースが不明な場合

表示されているどちらかのデータベースをクリックし、その中の「tables:」を確認↓

wp_posts」などが表示されているデータベースが対象です。

先頭の「wp_」はWordPressインストール時に設定した接頭語です。クイックインストールなど、レンタルサーバーの自動インストール機能を利用した人は自動的に割り当てられています。

○○_posts」「○○_users」などがあるデータベースを選択てください。

入力フォームを選択↓

フォームにコマンドを入力

次のSQLクエリを入力↓

update wp_postmeta set meta_key = 'ssp_meta_description' where meta_key = 'the_page_meta_description'

Excute」をクリック↓

「Excute」をクリック↓

画面上部に「Success」と表示されたら作業完了です。

本ステップ終了後、Database My Adminプラグインは削除して構いません。

canonicalの引継ぎ作業

この工程は任意です。Cocoonでcanonicalの設定をしている場合のみ行ってください。

Meta titileやdescriptionと同様の作業内容です。

Cocoonの記事ページでcanonicalを利用していた場合の引継ぎ作業にはSEO SIMPLE PACKプラグインの独自フィルターフックssp_output_canonicalが利用できます。

操作内容

※コードの内容は編集しません。コピペするだけです。

SWELL子テーマのfunctions.phpに貼り付ける↓

add_filter('ssp_output_canonical', function($canonical) {

    $cocoon_meta_atnak = get_post_meta(get_the_ID(), 'the_page_canonical_url', true);
    $ssp_meta = get_post_meta(get_the_ID(), 'ssp_meta_canonical', true);
    if ( empty( $ssp_meta ) && $cocoon_meta_atnak ) {
        return $cocoon_meta_atnak;
    }
    return $ssp_output_canonical;

});

Meta titleやdescription同様にDatabase My Adminプラグインでデータベース側でcanonicalの設定を置換する方法も紹介します↓

操作内容

Database Admin」をクリック↓

Database Admin

WordPressで利用しているデータベースを選択↓

Select databaseの画面でWordPressで利用しているデータベースを選択します。

入力フォームを選択↓

フォームにコマンドを入力

次のSQLクエリを入力↓

update wp_postmeta set meta_key = 'ssp_meta_canonical' where meta_key = 'the_page_canonical_url'

Excute」をクリック↓

「Excute」をクリック↓

画面上部に「Success」と表示されたら作業完了です。

本ステップ終了後、Database My Adminプラグインは削除して構いません。

カスタマイザーの独自CSSコードの移設作業

この工程は任意です。Cocoonで独自CSSコードを利用していた場合のみ行ってください。

Cocoonで独自CSSを書いていたけど、SWELLに移設して使いたい!」って人向けの作業です。まず、大前提ですが、CocoonとSWELLのHTML構造は別物です。コードをそのままSWELLに移設してもセレクター名違いで反映されないことを念頭におきましょう。

SWELLでは独自CSSを追加できる場所が2か所あります。特にSWELL固有のSWELLカスタム書式はメチャクチャ便利なので、違いをしっかり覚えましょう。

設置場所

  1. SWELLカスタム書式
  2. カスタマイザー内の「追加CSS」

SWELLカスタム書式について

SWELLカスタム書式は、その名からイメージが付く通りSWELLの独自機能です。

WordPressで独自のCSSコードを追加する場合にはカスタマイザー内の「追加CSS」にコードを記載するのが一般的です。

SWELLのカスタム書式と標準の追加CSSの違いは、エディターでの読み込みです。

次の表で示す通り、SWELLカスタム書式に記載したコードはフロントだけでなく、エディターにも読み込まれます。

スクロールできます
SWELLカスタム書式追加CSS
フロント読み込まれる読み込まれる
エディター読み込まれる読み込まれない
CSS設置場所の違い
かんた

エディターにも反映させたいコードはSWELLカスタム書式に書くのがおススメです。

SWELLカスタム書式に独自CSSコードを記載する方法を紹介します↓

操作内容

SWELL設定」→「エディター設定」をクリック↓

カスタム書式」をクリック↓

「SWELL設定」→「エディター設定」をクリック↓

カスタム書式用CSS」に独自CSSコードを追加↓

カスタマイザー内の追加CSSについて

WordPress標準の追加CSSについてです。SWELLでもカスタマイザー内に追加CSSの入力が行えます。エディターに読み込ませる必要のないレイアウト系の独自CSSは追加CSSに入力するのがおススメです。

カスタマイザー内の追加CSSに、独自CSSコードを追加する方法を紹介します↓

操作内容

外観」→「カスタマイズ」をクリック↓

カスタマイズをクリック

追加CSS」をクリック↓

追加CSS

コードを貼り付ける↓

CSSをコピー

Font Awesomeの設定作業

この工程は任意です。Font Awesomeのアイコンを利用する場合のみ行ってください。

SWELLでは標準で仕様できるアイコンがあります。Font Awesomeのアイコンを利用しなくても、アイコンを使った装飾が可能です。

標準のアイコンとは別にFont Awesomeのアイコンを利用したい人は次の設定を行ってください。

操作内容

SWELL設定」をクリック↓

「SWELL設定」をクリック

Font Awesome」タブを選択↓

「Font Awesome」タブを選択↓

Font Awesome読み込み設定オプションを選択↓

Font Awesomeの設定をする

v6とv5は利用できるアイコンがかなり違います。Font Awesomeの公式サイトを確認し、使いたいアイコンのあるバージョンを選択しましょう。

高速化したいならFont Awesomeは使わない

SWELLに限った話ではありませんが、外部のファイルを読み込むことでパフォーマンスは低下します。もしサイトのパフォーマンスが高い優先度ならFont Awesomeの読み込みは行わないのが賢明です。

jQueryの設定作業

この工程は任意です。

独自カスタマイズでjQueryのコードを書いている人や、jQueryの読み込みが必要なプラグインを利用しているといったケースでのみ必要な作業です。

操作内容

SWELL設定」をクリック↓

SWELL設定を選択

jQuery」タブをクリック↓

jQueryの読み込みオプションを選択↓

jQuery読み込みオプションを選択

読み込むファイルが増えるとサイトパフォーマンスが低下します。
jQueryが必要か分からない」という人は、本作業は行わないのが無難です。

OGPの設定作業

OGPはOpen Graph Protcol の略語です。TwitterやFacebookなどのSNSでシェアされた時に表示される、アイキャッチなどのデザインを指定するプロトコルです。

SEO SIMPLE PACKプラグイン有効時の手順を解説します。

デフォルトのOGP画像を設定

サイト共通のデフォルト画像を設定する手順です。ここで設定した画像は、アイキャッチを設定していないページのOGP画像に指定されます。

記事ページと違い、固定ページって、それほど意識してアイキャッチを付けませんよね?けっこう未設定にしている場合ことがありますが、そういったページに必要なのがデフォルト画像です。

操作内容

SEO PACK」→「OGP設定」をクリック、

OGPタグの基本設定から「画像を選択」をクリックし、任意の画像をアップロード↓

SWELLのトップページ用にOGP画像を設定する方法

OGP画像のサイズを設定

SNSでシェアされた時の画像サイズを大きくする設定です。画像が大きく目立方がクリック率が上がるかも?

操作内容

SEO PACK」→「OGP設定」をクリック、

Twitter」を選択、カードタイプで「summary_large_image」を選択↓

TwitterのOGP画像サイズを大きくする設定

ASPの管理コードを設置する作業

この設定は任意です。

アフィリエイトブログを運営している人向けの設定です。

ASPの担当者から「このコードをhead内に追加して」といった指示を受けることがあります。古いテーマの場合には、header.phpなどのテンプレートファイルを直接編集する必要があったりします。

SWELLはhead内に任意のコードを追加するオプションがあるので、テンプレートファイルを編集する必要はありません。

ASP指定のコードをhead内に設置する方法を紹介します。

操作内容

外観」→「カスタマイズ」をクリック↓

カスタマイズをクリック


高度な設定」をクリック↓

「高度な設定」をクリック↓

headタグ終了直前に出力するコード」にコードを設置↓

設定が反映されない場合

カスタマイザーの設定を有効化する場合は、保存オプションで「公開」を選択しましょう。「下書き」では設定が反映されません。

カスタマイザー内に設定したコードはLPカスタム投稿を除く、全てのページで表示されます。

特定のページだけで指定のコードを表示したい場合は、wp_headフックを使いましょう。例えばis_single('記事ID')の条件を付けると特定の記事ページだけで表示させることができます↓

記事ID1の記事だけに表示するサンプルコード

function kanta_sample(){
if ( is_single('1') ) {
    echo 'コード';
}
}
add_action( 'wp_head', 'kanta_sample' );
かんた

不必要なコードを読み込ませたくない人はwp_headフックを活用してください。

不要なプラグインの整理

Cocoon運営時に利用していたプラグインを整理するステップです。

SWELLへの切り替え後に有効化しているプラグインを精査し、必要のないプラグインを無効化し削除しましょう。

どのプラグインが必要かはサイト運営しているユーザー次第です。参考までに次のようなプラグインはSWELLでは必須ではありません。

高速化系の補助プラグイン

サイトの読み込みスピードは検索順位を決定する要素の1つです。できるだけ早いサイトに仕上げるために、プラグインを入れているユーザーは多いと思います。

SWELLには高速化の設定機能が充実しています。

SWELLの高速オプションを活用し、満足できない場合はボトルネックとなる箇所をピンポイントで改善できるプラグインを導入しましょう。

SWELLの高速化機能と同じ効果のあるプラグインを使うと不具合が発生することがあります。プラグインをたくさん入れても効果が倍になるわけではありませんので、注意しましょう。

SEO関連プラグイン

Meta周りの設定に関しては、SWELL開発者さんが提供しているSEO SIMPLE PACKをおススメします。高速化プラグイン同様に、機能が重複するSEO系のプラグインは不要です。

どうしてもAll in One SEOプラグインを利用したいといったケースでは、SEO SIMPLE PACKを無効化してください。

エディター補助プラグイン

SWELLはWordrPress標準エディターのブロックエディター対応テーマです。わざわざClassic Editorプラグインを有効化して、クラシック環境にする必要はありません。そのため、クラシック環境のツールバーを拡張するTinyMCE Advancedやショートコードを保存するAddQuicktagも不要です。

目次生成プラグイン

SWELLには記事内やウィジェットに目次を自動的に表示する機能があります。目次系のプラグインは機能が重複するので不要です。

かんた

自分のサイト運営にあわせて見直してください。

頻繁に使い回すパーツの登録作業

このステップは任意です。

同じパーツを使いまわすことってありますよね?ブログを効率的に執筆したいなら「ブログパーツ」の活用がおススメです。ブログパーツはSWELLの独自ブロックの1つです。イメージ的にCocoonのテキストテンプレートや、アフィリエイトタグのような機能です。

繰り返し利用する画像や文章を事前登録し、呼び出して使うことができます。

具体的な例を使って紹介します。以下の画像は、ボクのブログ記事の先頭にあるプロフィールのパーツです↓

【サンプル】ブログパーツ

プロフィールパーツはブログパーツに登録しており、エディター内に埋め込むことができます。

ブログパーツの特徴の1つは何といってもメンテナス性。例えば、ボクのプロフィールだと「IT業界歴22年」と表記しています。これを23年に変する場合、ブログパーツ管理ページ上で変更するだけで、このブログパーツを埋め込んでいる全てのページで一括変更されます。

ブログパーツを使わず全ページに著者情報を手入力していたら、直すのはものすごく大変ですよね?

ブログパーツは著者プロフィール以外にも、Cocoonのアフィリエイトタグ管理のようにASPのリンクを管理するといった用途にも向いています。

ASPのリンクって、覚えているのは不可能。リンクを貼るのにわざわざASPにログインして、リンクをコピーするのってちょと非効率ですよね?

かんた

ブログパーツで管理しておけば大幅な時短になり、ミスも起きません。

SWELLでブログパーツを使う方法を紹介します↓

操作内容

ブログパーツ」→「新規追加」をクリック↓

エディターが開くので、自由にパーツを作りましょう↓

ブログパーツ編集画面


Cocoonのテキストテンプレートやアフィリエイトタグ管理機能と違い、SWELLはブロックエディターでパーツを作ることができます。SWELLのカスタムブロックやプラグインを組み合わることもできるので、かなり自由度高めです。

ブログパーツは登録できる数に制限はありません。カテゴリー分け機能もあるので、ガツガツ登録して作業効率を高めましょう。

ブログパーツが表示されない場合

ダッシュボード左手にブログパーツが表示されない場合はブログパーツの表示設定を確認しましょう。

SWELL設定」→「機能停止」、「ブログパーツを停止」のチェックを外す。

SWELLER’Sオンラインコミュニティーへの参加

このステップは任意です。

SWELLにはSWELL公式のユーザーコミュニティーがあります。ユーザー間での情報共有、サイト運営などの雑談を行えるクローズな環境です。

公開型のサポートフォーラムとは別ものです。

参加費や月額料金といった費用は一切ありません。オンラインタイプでアプリなどのインストールも不要なので気軽に参加しましょう。ちなみに以前のオンラインコミュニティーはSlackでしたが、2022年末からDiscordに変更されています。理由はSlackの料金システムの変更によるものです。

オンラインコミュニティーへの参加方法を紹介します。

操作内容

SWELLのマイページで「ログイン」をクリック↓

SWELLERS’ オンラインコミュニティ」の画像をクリック↓

バナーをクリック

招待を受ける」をクリック。

招待を受ける

記事のリライト作業

WordPressテーマ切り替えで一番大変なのが記事のリライトです。記事数が多い人ほど大変ですが、とにかく気合で乗り切りましょう!

エエディターでページを開き、Cocoon固有の装飾をSWELLの装飾に変更していく地道な作業です。

テーマ乗り換えサポートプラグインを利用している環境でも、最終的にすべての装飾を置き換える必要がありますが、記事数に応じて次のようにリライトを進めるのがおススメです。

リライトの進め方

スクロールできます
記事数進め方
少ない
(目安:30記事未満)
1記事ずつ完全にリライトする。
優先順位としはアフィリエイト収益が発生していたキラーページ。次いでアクセス数の多い集客記事。
多い
(目安:30記事以上)
表示されない装飾、表示が一部おかしくなっているものだけ優先的にリライトする。(正常に表示されているものは優先度低めで後回し)。
リライトの進め方

Cocoonテーマ乗り換えサポートプラグインを有効化すると装飾の一部は正常に表示されます。記事数が多い場合は、無事に変換されている装飾は後回しにして、表示が一切されなくなっている装飾などを優先するとテーマ切り替え移管中のダメージを最小限に抑えることができます。

Cocoon乗り換えサポートプラグインの停止

乗り換えサポートプラグインを利用している人向けの解説です。

記事のリライトが完了したら、テーマ乗り換えサポートプラグインを停止しましょう。テーマ乗り換えサポートプラグインは移管中にCocoonのファイルを読み込んでいるためパフォーマンスに影響が出ます。

かんた

リライト作業が完了したら、不要なCocoonのファイルを読み込む必要はありません。

乗り換えサポートプラグイン停止後は、キャッシュをクリアし全ページのチェックです。大事なことなので、もう一度言いいます。

キャッシュをクリア!

キャッシュをクリアしないと、プラグイン有効時のページが表示される可能性があります。十分な確認ができないので、必ずキャッシュをクリアした後に全ページを確認しましょう。

乗り換えサポートプラグインとCocoonの削除

Cocoonのテーマとテーマ乗り換えサポートプラグインを削除しましょう。

WordPressは有効化していないテーマとプラグインがあると、ダッシュボードのサイトヘルス上で警告が表示されます。

テーマ切り替えに関するFAQ

テーマ切り替えに関するFAQ

CocoonからSWELLに切り替える移行作業に関してのFAQです。

セルフバックなどでSWELLを安く購入したい

SWELLのセルフバック、セールに関しては次の記事で詳しく解説しています。

CocoonからSWELLへの移設するのにかかる時間の目安は?

記事の数、記事の装飾の量しだいです。

1記事が2,000~3,000文字程度の記事であれば、リライトにかかる時間は15分から30分程度です。10記事であればその10倍程度の時間を見積もっておきましょう。

Cocoonテーマ切り替えサポートプラグインは無料?

無料です。

SWELL購入後、マイページからダウンロードできます。

SWELLにはアフィリエイトがあると聞きましたが、どこから参加できますか?

もしもアフィリエイトが取り扱いASPです。

SWELLのアフィリエイトには審査がありません。申し込むと即アフィリエイトできるようになります。

※ASPへの登録には審査があります。

バックアップファイルが「ギガ単位」と非常にデカいです。それほどファイルサイズが大きくなる運営はしていいませんが、何とかなりませんか?

自動的に生成されているバックアップファイルがないか確認するのがおすすめです。バックアップの管理画面から確認するか、FTPやファイルマネージャーツールで保存されているファイルがないか確認しましょう。

テーマ切り替え時のトラブル対応について

テーマ切り替え時のトラブル対応について

WordPressテーマをCocconからSWELLへる移行作業に関するトラブル対応についてです。WordPress定番の次の症状についての解決アプローチを紹介します。

トラブルの一例

  1. サイトが真っ白になった
  2. ダッシュボードにログインできない
  3. カスタマイザーで設定時に保存できない

SWELLの要件に合わせる

CocoonからSWELLへのテーマ切り替え後、サイトが真っ白になってしまうようなケースについてです。SWELLの動作環境を満たしていない可能性があります

以下がSWELLが動作する推奨環境です。

推奨環境

スクロールできます
PHPPHP 7.3 以上
WordPressWordPress 5.9 以上 (推奨:6.1 ~)
SWELLの推奨環境

PHPとWordPressのバージョンがSWELLの推奨未満であれば、バージョンアップしましょう。

バージョンアップする場合はPHPが先です。WordPress本体にも推奨のPHPがあるため、推奨未満のPHPバージョンだとWordPressが表示されなくなるなど不具合が発生します。

初心者

PHPのバージョンって、どうやって確認するの?

SWELLを有効化している場合は、ダッシュボードにPHPのバージョン情報が表示されます↓

PHPのバージョン情報を確認する方法

上のサンプル画像だとPHPのバージョンは7.4.33です。SWELLの推奨条件をしっかり満たしています。

PHPのバージョンアップ方法

PHPのバージョンアップはレンタルサーバーのコントロールパネルで行います。基本的にボタンをポチポチするだけです。プログラムコードの編集などはありませんので、初心者の人でもPHPのバージョンアップは簡単です。

以下、代表的なレンタルサーバー各社のマニュアルです。

公式マニュアル

プラグインが干渉している

サイトで有効化しているプラグインが原因でサイトに不具合が発生することがあります。

プラグインによる不具合の症状は色々です。

不具合の一例

  1. サイトが真っ白になる
  2. ダッシュボードにログインできない
  3. 英文字のエラーが表示される
  4. 画像が表示されない

例えばSWELLにテーマを切り替えた直後後に、アイキャッチ画像が表示されなくなったという症状を見かけたことがあります。画像を圧縮するプラグインが原因で、このプラグインを停止したらアイキャッチが表示されました。

プラグインを停止してみる。

かんた

シンプルながら効果的な切り分け方法です。

どのプラグインがトラブルの原因になっているかを特定する場合は次の流れでプラグインを1つづつ停止します。

作業の流れ

  1. プラグインを停止
  2. キャッシュをクリア
  3. 表示・動作を確認する

プラグインを全て同時に停止してしまうと、どのプラグインがトラブルの原因かを特定することはできません。1つずつ順番に停止して確認してください。

逆の流れですべてプラグインを停止して、1つづつ有効化するといった流れでも構いません。

問題のプラグインを特定した後についてです。どうしてもプラグインを利用したい場合、プラグインの最新バージョンがないかチェックしましょう。

最新バージョンのプラグイン利用しても使えない場合、SWELLとの相性が悪いのか、その他のプラグインが干渉している可能性があります。

かんた

デフォルトテーマに切り替えて正常に動作するかチェックしてみてください。

WAFの影響

カスタマイザーで設定を保存しようすると「何かうまくいかなかったようです。」と表示されるケースについてです。例えばアドセンスの申請コードをhead内に貼り付けようとすると発生することがあります。

エラーの原因は次の通りです。

エラーの原因

  1. レンタルサーバーのWAF
  2. セキュリティー系のプラグイン

WAFはWeb Application Firewallの頭文字をとった略称です。ファイヤーウォールという単語からイメージできる通り、セキュリティー機能の一種です。

WAFを簡単に説明すると外部からの不正なアクセスや攻撃を察知し、ハッキングなどからサイトを守ってくれる機能のことです。一般的な共有レンタルサーバーだと標準的に有効化されている機能です。

かんた

エックスサーバーや、ConoHa WINGなどにも導入されています。

エックスサーバーなど一般的な共有レンタルサーバーの場合、特別な設定をしなくてもWAFが有効化されているため、セキュリティーの知識がないユーザーでも安心してWordPressサイトを運営できます。

一見すると便利そうなWAFですが、正常な作業を「攻撃されている」と誤検知してしまうことがあります。これが原因でカスタマイザー上での作業中に「何かうまくいかなかったようです。」と表示されることがあります。

SWELLのサポートフォーラムを見ていると、WAFの誤検知に関する投稿をチラホラ見かけます。特にConoHa WINGを利用しているユーザーさんが多いなという印象です。

WAFを一時的に無効化するか、チューニングすることで改善します。

原因はレンタルサーバー側のWAFです。WordPressテーマの問題ではありませんので、レンタルサーバー会社のコントロールパネルからWAFの設定を見直しましょう。

以下、レンタルサーバー会社のWAF関連マニュアルです。

公式マニュアル

かんた

WAFでのトラブルによくあることなのですが、WAFを無効化しても改善しないことがあります。

実はこれ、WAFの反映には時間がかかることが原因だったりします。WAFは切り替え設定から反映まで10分以上かかることがあります

レンタルサーバーによっては数時間かかることもあります。

経験談なんですが、お名前.comでWAFの設定を無効化したら反映まで2時間以上かかったことがあります。

カスタマイザー上からコードを貼るだけの作業なのに、WAFの反映に数時間も待つのは地獄です。でも、面倒だからと言ってWAFを無効化した状態はセキュリティー上危険。

カスタマイザーの作業で一時的にWAFを停止したら、必ず有効化するのも忘れないよう注意しましょう。

かんた

基本的にWAFを有効化した状態で運営することをおススメします。

SWELLサポートフォーラムを活用する

SWELサポートフォーラム

トラブル発生時の対応アプローチをいくつか紹介しましたが、どうしても解決できない場合は、SWELLのサポートフォーラムをチェックしてみましょう。

CocoonからSWELLにテーマ切り替え後に発生したトラブルの報告と解決方法が紹介されているかもしれません。

それでも解決できない場合は、トラブルの内容をフォーラムに投稿しましょう。

Cocoon同様にSWELLのサポートフォームでの相談は無料です。サポート範囲内のことであればテーマ開発者さん他、他のSWELLユーザーからアドバイスをもらうことができます。

SWELLのサポートフォーラムに投稿する方法を紹介します。

操作内容

マイページからログイン↓

マイページにログインする

SWELLに関する質問」をクリック↓

「SWELLに関する質問」をクリック↓

トピックを追加」をクリック↓

トピックを追加をクリック

タイトルを入力、確認事項などをチェックし、相談内容を入力↓

必要事項を入力

問題が確認できるページのURL

URLの記載があると、SWELLテーマ開発者さんや有志のメンバーはサイトを直接確認することができます。URLを入力するとトラブル解決が早くなる可能性が高まります。URLはログインしたユーザーのみに表示するオプションがあります。

トピックを追加」をクリック↓

以上でトピックが投稿されます。

よくあるトラブルの原因

プラグインによる影響、独自に追加したコード(CSS、JavaScript、jQuery)、キャッシュなどが原因で不具合が発生することがあります。トピックを立てるまえに、プラグインの停止、独自カスタマイズコードの削除、キャッシュのクリアをして確認しましょう。

ダウンタイムなしでCocoonからSWELLに移行する方法

ダウンタイムなしでCocoonからSWELLに移行する方法

テーマ移管期間中にレイアウトくずれが発生するのは普通のことです。ですが、企業系のオウンドメディアだと、装飾が崩れて表示されているのはイメージダウンですよね?

収益が毎日発生するレベルのアフィリエイトブログでも、テーマ切り替えの作業で収益が落ちるのは避けたいですよね?

かんた

テーマ切り替えの影響を最小限に抑える場合は、次の作業手順を行ってみてください。

作業の流れ

  1. バックアップファイルを用意する(本番サイト)
  2. WordPressをインストールする(検証サイト)
  3. バックアップデータを読み込む(検証サイト)
  4. リライト作業をする(検証サイト)
  5. バックファイルを用意する(検証サイト)
  6. バックアップデータを読み込む(本番サイト)

簡単に説明すると、運営しているサイト以外に検証用のサイトを作る方法です。検証環境でリライトを行った後、移行が完了したデータを本番サイトに流し込む流れです。

かんた

詳しい手順を解説します。

【ステップ①】バックアップファイルを用意する(本番サイト)

稼働している本番サイトでの作業です。

【事前作業①】バックアップ

バックアップファイルを作成します。今回は無料プラグインのAll-in-One WP Migrationを使ってバックアップファイルを作成する方法を紹介します。

操作内容

All-in-One WP Migration」をクリック↓

「All-in-One WP Migration」をクリック

エクスポート先」をクリック↓

「エクスポート先」をクリック↓

ファイル」を選択↓

「ファイル」を選択↓

ダウンロード」をクリック↓

ファイルサイズが異常に大きいと感じたら

体験談ですが、肥大化したバックアップファイルがあるとダウンロードファイルのサイズがギガ単位になることがあります。バックアッププラグインで定期的にバックアップファイルを自動作成している環境であれば、必要なファイルだけを保存して古いバックアップファイルを削除しましょう。

【ステップ②】WordPressをインストールする(検証サイト)

運営しているサイトとは別に、検証用のWordPressサイトをインストールするステップです。

インストール先のイメージ↓

本番環境検証サイト
example.comexample.com/test

WordPressのインストールは、レンタルサーバーのコントロールパネルから行います。

クイックインストール」「簡単インストール」など、レンタルサーバー会社ごとに機能の名前は違いますが、WordPressをコントロールパネルからインストールするツールがあります。

WordPressインストール方法のマニュアル

かんた

便利なツールでWordPressをインストールしましょう。

インストール時の注意点

本番環境のWordPressサイトで公開しているページのパーマリンクと被らないよう注意してください。例えば、本番環境で「test」というパーマリンクの記事を公開している場合、検証サイトのインストール先にとしてexample.com/testは使えません。記事が表示されなくなります。

【ステップ③】バックアップデータを読み込む(検証サイト)

検証サイト側での作業です。

本番環境でエクスポートしたバックアップファイルを検証サイトに読み込むステップです。

検証サイトにもAll-in-One WP Migrationを入れた後に作業を行います。

操作内容

All-in-One WP Migration」→「インポート」をクリック↓

All-in-One WP Migrationでインポートをクリック

バックアップファイルをドラッグ&ドロップ操作でアップロード↓

バックアップファイルをセレクト

検索エンジンをブロックする

バックアップサイトを検索エンジンに登録させない設定をしましょう。
ダッシュボード上、「設定」→「表示設定」と進み、「検索エンジンがサイトをインデックスしないようにする」にチェックを入れます。XML形式のサイトマップ出力系プラグインも停止して構いません。

【ステップ④】リライト作業をする(検証サイト)

検証サイト側での作業です。

WordPressテーマをSWELLに切り替えた後、記事のリライト作業を行います。

一般ユーザーに公開している環境ではないので、テーマ乗り換えサポートプラグインは不要です。ひたすら記事のリライトに集中しましょう。

リライトが完了したら、サイト全体のレイアウトなどデザインを自分好みにアレンジしちゃってください。

【ステップ⑤】バックファイルを用意する(検証サイト)

検証サイト側での作業です。

操作内容

All-in-One WP Migration」をクリック↓

「All-in-One WP Migration」をクリック

エクスポート先」をクリック↓

「エクスポート先」をクリック↓

ファイル」を選択↓

「ファイル」を選択↓

ダウンロード」をクリック↓

【ステップ⑥】バックアップデータを読み込む(本番サイト)

稼働している本番サイトでの作業です。

操作内容

All-in-One WP Migration」→「インポート」をクリック↓

All-in-One WP Migrationでインポートをクリック

バックアップファイルをドラッグ&ドロップ操作でアップロード↓

バックアップファイルをセレクト

検索エンジンをブロックしている場合は設定を解除するを忘れずに!

以上でCocoonからSWELLへのテーマ移行作業は完了です。

まとめ

WordPressテーマをCocoonからSWELLに切り替える手順を解説しました。

無料テーマCocoonからのステップアップで、有料テーマのSWELLを選択するユーザーは増えているように感じます。当記事では初心者ユーザーさん向けに、できるだけ画像を含めテーマ切り替え方法を紹介しました。

仕事がらテーマ切り替えは色んなテーマで経験していますが、CocoonからSWELLへの切り替え作業については、テーマ乗り換えサポートプラグインがあるので、それほど難しくありません。

ぜひテーマの移行にチャレンジしてみください。

かんた

本記事が皆さんのお役に立てば幸いです。

SWELLとCocoonは本記事執筆時に利用可能な下記最新バージョンで検証しています。

各テーマのバージョン

  • SWELL:バージョン 2.7.2.1
  • Cocoon:バージョン 2.5.5

異なるバージョンについては、キャプチャ画像や解説の内容が違うケースがありますのでご注意ください。

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