初心者CocoonからSWELLに切り替えたい…
初心者でも簡単にできるかな？
詳しい手順を知りたい…
そんなお悩みに答えます。
WordPressテーマの切り替えって、なんだかちょっと怖いですよね？ブログのデザインが崩れたり、サイトが真っ白になってログインできなくなったら困ります。
僕はWeb制作の仕事をしており、WordPressテーマを別のテーマに移行するといった作業を業務レベルで行っています。Cocoonに関しても独自カスタマイズやテーマの切り替えを経験したことがあります。
本記事では初心者ブロガーさん向けに、CocoonからSWELLへの移行作業の手順を画像を多めに使って解説します。SWELLはバージョンアップの頻度が高いテーマです。2023年にリリースされている最新バージョンを使った解説ですので、テーマ移行作業の参考にしてください。
ちなみにCocoonからSWELLへの移行作業には、SWELL販売会社から乗り換えサポートプラグインが提供されています。SWELLへの移行作業がスムーズになる便利なプラグインですので、使い方を合わせて解説します。
テーマ切り替えの事前準備
本記事で解説するのは、無料テーマCocoonから有料テーマSWELLへの移行作業です。
テーマ切り替え前の事前準備
- バックアップファイルの取得
- Googleアナリティクスのコードをコピー
- Googleサーチコンソールタグのコピー
- カスタマイザー上の独自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設定」→「アクセス解析・認証」をクリック↓
ページを下にスクロールし、「Google Analytics設定」のコードをコピー↓
「アナリティクスコード」にあるコードをメモ帳にコピー↓
【事前作業③】サーチコンソールタグのコピー
Googleサーチコンソールを利用している人向けの作業です。SWELLへテーマ切り替え前に、Cocoonの管理画面で設定したサーチコンソールのタグをコピーしておきましょう。
「Cocoon設定」→「アクセス解析・認証」をクリック↓
ページを下にスクロールし、「Google Search Console設定」のコードをメモ帳にコピー↓
【事前作業④】カスタマイザー上の独自CSSコードのコピー
Cocoonでカスタマイザーに独自CSSを追加している人向けの作業です。ヘッダーやフッターなどのレイアウト系の装飾はSWELLに移行してもHTML構造が違うので移設する日通はありません。ブログ記事内の装飾に独自CSSを利用している人のみ、事前準備としてCSSコードをコピーしましょう。
カスタマイザーに設定している独自CSSコードをメモする作業手順です↓
「外観」→「カスタマイズ」をクリック↓
「追加CSS」をクリック↓
追加してあるCSSコードをコピーし、メモ帳に貼り付け↓
CocoonからSWELLへのテーマ切り替え移行手順
事前準備は完了しましたか？
ここからはWordPressテーマをCocoonからSWELLに切り替える方法をステップごとに解説していきます。まずはテーマ乗り換えサポートプラグインについて軽めに解説します。
テーマ切り替えサポートプラグインは、SWELLの開発元が提供している無料プラグインです。名前からイメージできる通り、テーマを切り替え作業をサポートしてくれる効果があります。
初心者どんなサポートなの？
一般的にWordPressテーマを別のテーマに切り替えるとテーマの独自装飾は消えてしまいます。例えばブログ定番の装飾の「吹き出し」を例にします。
次の画像はCocoonで吹き出しを使ったサンプルです↓
テーマをCocoon以外に切り替えると、次のように吹き出し装飾がなくなってしまいます↓
画像が大きく表示され、吹き出しのテキスト部分が改行されてしまいました。吹き出しの枠線も完全に消えています。もはや吹き出しがあったとは想像がつかないレベルに崩れました。
次にテーマ乗り換えサポートプラグインを使った場合のサンプルです。テーマをSWELLに切り替えても、吹き出しは正常に表示されました↓
テーマをSWELLに移行中もCocoonで使っていた装飾がSWELLの装飾に変換されます。これがテーマ乗り換えサポートプラグインの効果です。プラグインを使っても、Cocoonの装飾全てが変換されるわけではありません。
どの程度の装飾が変換されるかはSWELL公式ページで解説しています。詳しく知りたい人は、最新のSWELL公式情報を確認してください。
【移行手順.1】SWELLのテーマ購入手続き
WordPressテーマSWELLの購入ステップです。
Cocoonは無料テーマとして配布されていますが、SWELLは有料テーマです。購入しなければ利用することはできません。
WordPressテーマのようなソフトウェアは、ごくまれに公式サイト以外で格安で転売されていることがあります。ですが、SWELLはユーザー認証が導入されているテーマです。
SWELL公式サイト以外でSWELLを入手した場合、ユーザー認証ができずテーマのアップデートができません。乗り換えサポートプラグインや、着せ替えデザイン、サポートといったサービスを利用することもできません。
かんたSWELLのテーマは公式サイトからちゃんと購入しましょう。
SWELL公式サイトにアクセス↓
利用規約を確認し、「利用規約に同意します」にチェックを入れる↓
「SWELLを購入する」をクリック↓
カードでの支払いページで必要事項を入力し、
「\17,600支払う」をクリック↓
かんたSWELLの購入手順は、次の記事で解説しています。
【移行手順.2】SWELL会員登録作業
SWELLの会員登録を行うステップです。会員登録すると最新バージョンのSWELLをいつでもダウンロードできるほか、次のメリットがあります。
会員登録する理由とメリット
- SWELLの子テーマをダウンロードできる
- ユーザー認証をすることができる
- テーマ切り替えサポートプラグインをダウンロードできる
- 着せかえデザインデータがダウンロードできる
- フォーラムに質問や要望を投稿できる
- オンラインコミュニティーに参加できる
かんた会員登録する手順を解説します。
【移行手順.3】SWELLのテーマファイルをダウンロード
SWELLのテーマファイルをダウンロードするステップです。
マイページにアクセスし、ログインします↓
ページを下に少しスクロールします。
SWELL製品ダウンロード部分の「SWELL 本体最新版」にある「swell-＊-＊-＊.zip」をクリック↓
テーマの「＊」について
swell-＊-＊-＊.zipの「＊」部分はバージョン情報です。
画像とは異なる表記になっている場合がありますが、気にする必要はありません。
子テーマを利用する場合は「子テーマ」にある「swell_child.zip」をダウンロード↓
テーマファイル、子テーマファイルはzip形式のまま保存しておきます。解凍せず、そのままアップロードして使います。パソコンの設定で「拡張子を表示しない」を有効化している場合は、ダウンロードしたファイル名にに.zipは表示されませんが、気にする必要はありません。
かんた解凍せず、ダウンロードしたままの状態で保存してください。
MacでSafariを使っている場合の注意点
zip形式のファイルをダウンロードすると自動的に解凍されて中身が表示されることがあります。
テーマファイルのダウンロード時にZipファイルが自動解凍されないようSafariで設定を解除するか、Google Chromeなど別のブラウザでテーマファイルをダウンロードしてください。
【移行手順.4】Cocoon専用テーマ乗り換えサポートプラグインをダウンロード
テーマ乗り換えサポートプラグインを有効化すると装飾が崩れるとこを最小限にしてくれます。記事数が多く、リライトに時間がかかりそうな場合にはテーマ乗り換えサポートプラグインを活用しましょう。
マイページにアクセスし、ログインします↓
ログイン後、ページを下にスクロール。
SWELL製品ダウンロード部分の「乗り換えサポートプラグイン」にある「Cocoon用」をクリック↓
プラグインはzip形式のファイルです。
テーマ同様に解凍しないで、そのまま保存しておきます。
【移行手順.5】SWELLのテーマファイルをアップロード
ダウンロードしたSWELLのテーマファイルをアップロードします。
「外観」→「テーマ」をクリック↓
「新規追加」をクリックし、ダウンロードしたSWELLのテーマファイルを選択↓
かんた子テーマを利用する場合は合わせて子テーマをアップロードしましょう。
アップロードの順番に注意
テーマと子テーマをアップロードする場合、テーマ本体を先にインストールしてください。
子テーマを先にアップロードするとエラーが表示されます。
【移行手順.6】Cocoon用テーマ乗り換えサポートプラグインを有効化
Cocoonテーマ乗り換えサポートプラグインを利用する場合にこのステップを行ってください。
「プラグイン」をクリック↓
「新規追加」をクリック↓
Cocoon用テーマ乗り換えサポートプラグインをアップロードし、有効化します↓
プラグインを有効化するとパフォーマンスが低下します
テーマ乗り換えサポートプラグイン有効時に、本来読み込む必要のないCocoonのファイルを読み込み装飾を書き換えて表示します。テーマ乗り換えサポートプラグインは装飾のコードをデータベースレベルで置換しているわけではありません。記事のリライトを行い、完全にCocoonの装飾をSWELLに置き換えた後に、プラグインを停止しましょう。
【移行手順.7】SWELLのテーマ有効化作業
「外観」→「テーマ」をクリック↓
SWELLを選択し「有効化」をクリック↓
ファイルレベルでカスタマイズする予定の場合は、子テーマを有効化してください。
【移行手順.8】ユーザー認証作業
ユーザー認証の設定手順を紹介します。
ダッシュボードに表示される「SWELLのユーザー認証が完了していません。」をクリック↓
「メールアドレス」に、SWELL購入時に登録したメールアドレスを入力↓
※購入時に設定したメールアドレス以外は利用できません。
「認証リクエストを送信」をクリック↓
登録したメールアドレスに、次の確認メールが届きます↓
- 件名：SWELLのユーザー認証用URLを送付します。
- 送信元ドメイン：swell-theme.com
メール内のリンクをクリック↓
認証が完了された旨が表示されます↓
確認メールについて
メールは認証リクエストを送信直後に届きます。認証リクエストボタンをクリックし１分以上経過してもメールが届かない場合は迷惑メールフォルダを確認しましょう。
初心者ユーザー認証をしないで運営することもできるの？
できます。マイページから最新バージョンのSWELLをダウンロードがいつでもダウンロードできます。新バージョンがリリースされたら、マイページからテーマをダウンロードして、サイトにアップロードすれば認証プロセスを抜きにして最新バージョンでの運営ができます。
ただ、最新バージョンのSWELLを有効化していても「SWELLのユーザー認証が完了していません」の注意書きは出続けます。
【移行手順.9】SEO SIMPLE PACKプラグインのインストール
SEO SIMPLE PACKはSWELL開発者さんが公開しているプラグインです。有効化することで記事やアーカイブページでMeta title、Meta Descriptionなどを設定できるようになります。
記事ページのMeta設定
| SWELLのみの構成 | SEO SIMPLE PACK有効化時 | |
|---|---|---|
| Meta description | 設定できない | 設定できる |
| Robots | 設定できない | 設定できる |
| canonical URL | 設定できない | 設定できる |
カテゴリーアーカイブのMeta設定
| SWELLのみの構成 | SEO SIMPLE PACK有効化時 | |
|---|---|---|
| Meta description | 設定できない | 設定できる |
| Robots | 設定できない | 設定できる |
| canonical URL | 設定できない | 設定できる |
Cocoonだと記事のMeta titleとdescriptionは、テーマ内部のオプションで設定する仕様になっています↓
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公式プラグインディレクトリに公開されています。最新バージョンのプラグインはここからダウンロードできます。プラグインファイルをダウンロードしたら、ダッシュボードからアップロードしてください。
【移行手順.10】Googleアナリティクスコードの設定作業
アクセス解析用に、Googleアナリティクスのコードを移設するステップです。
「SEO PACK」をクリック↓
「“Tracking ID” for UA」にアナリティクスのコードを貼り付ける↓
Googleアナリティクスの設定が反映されているか確認する手順ですが、Googleアナリティクスにログインしリアルタイムユーザーを確認しつつ自分でサイトにアクセスしてみましょう。
かんたリアルタイムユーザーの数が動いていれば設定作業は完了です。
【移行手順.11】Googleサーチコンソールの設定作業
サーチコンソールは、検索キーワード、Googleのインデックス状況などを確認できる便利なツールです。SWELLへのテーマ切り替え時に、忘れず移設作業を行いましょう。
「SEO PACK」をクリック↓
「ウェブマスターツール」をクリック↓
「Googleサーチコンソールの認証コード」に事前作業でコピーしたコードを貼り付ける↓
【移行手順.12】ふきだしの登録作業
Cocoonの吹き出し機能って便利ですよね。SWELLにも同様の機能があります。
SWELLはCocoonと同じように、事前にふきだしを登録しておき、ブロックエディター上から呼び出して使うという仕様になっています。
ひんぱんに利用するふきだしを登録しておくことで執筆作業がスピードアップしますので、リライト開始前に登録しておきましょう。
「ふきだし」をクリック↓
「新規ふきだしの追加」をクリック↓
ふきだしの画像、アイコンの向きや枠線などをプリセットできます。登録数に制限はありませんので、必要なだけ登録しておきましょう。
【移行手順.13】Metaデータの引継ぎ作業
Cocoonで設定したMeta title、Meta descriptionをSEO SIMPLE PACKプラグインに引き継ぐ作業です。
少しだけ、Meta周りの基本知識を紹介します。Cocoonはテーマ内に独自のMetaデータ管理機能を持っています。テーマを別のテーマに切り替えただけでは、Metaデータは引き継がれません。
一方のSWELLはテーマ内にMetaデータ管理機能は内包していません。同一開発者が提供しているSEO SIMPLE PACKプラグインでMetaデータを管理する作りになっています。
かんたプラグイン化することにより、テーマの引っ越しに対応しやすいという設計です。
Meta titleの引継ぎ作業
Cocoonで「SEOタイトル」を利用していたユーザー向けの解説です↓
かんた記事のタイトルを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設定の「このページのタイトルタグ」はカラのままですが、この状態で問題ありません↓
タイトルタグの設定を変更したい場合はこのページのタイトルタグに入力してください。以後、入力した値が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 Admin」をクリック↓
WordPressで利用しているデータベースを選択↓
自分が使っているデータベースが不明な場合
表示されているどちらかのデータベースをクリックし、その中の「tables:」を確認↓
「wp_posts」などが表示されているデータベースが対象です。
先頭の「wp_」はWordPressインストール時に設定した接頭語です。クイックインストールなど、レンタルサーバーの自動インストール機能を利用した人は自動的に割り当てられています。
入力フォーム部分を選択↓
次のSQLクエリを入力↓
update wp_postmeta set meta_key = 'ssp_meta_title' where meta_key = 'the_page_seo_title'「Excute」をクリック↓
画面上部に「Success」と表示されたら作業完了です。
Database My Adminプラグインが見つからない場合
WordPress公式プラグインディレクトリで配布しています。最新バージョンをダウンロードし、ダッシュボードからインストールしてください。
Meta descriptionの引継ぎ作業
先ほどのMeta titleと同じ作業です。
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 Admin」をクリック↓
WordPressで利用しているデータベースを選択↓
自分が使っているデータベースが不明な場合
表示されているどちらかのデータベースをクリックし、その中の「tables:」を確認↓
「wp_posts」などが表示されているデータベースが対象です。
先頭の「wp_」はWordPressインストール時に設定した接頭語です。クイックインストールなど、レンタルサーバーの自動インストール機能を利用した人は自動的に割り当てられています。
入力フォームを選択↓
次のSQLクエリを入力↓
update wp_postmeta set meta_key = 'ssp_meta_description' where meta_key = 'the_page_meta_description'「Excute」をクリック↓
画面上部に「Success」と表示されたら作業完了です。
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」をクリック↓
WordPressで利用しているデータベースを選択↓
入力フォームを選択↓
次のSQLクエリを入力↓
update wp_postmeta set meta_key = 'ssp_meta_canonical' where meta_key = 'the_page_canonical_url'「Excute」をクリック↓
画面上部に「Success」と表示されたら作業完了です。
【移行手順:14】カスタマイザーの独自CSSコードの移設作業
「Cocoonで独自CSSを書いていたけど、SWELLに移設して使いたい！」って人向けの作業です。まず、大前提ですが、CocoonとSWELLのHTML構造は別物です。コードをそのままSWELLに移設してもセレクター名違いで反映されないことを念頭におきましょう。
SWELLでは独自CSSを追加できる場所が２か所あります。特にSWELL固有のSWELLカスタム書式はメチャクチャ便利なので、違いをしっかり覚えましょう。
設置場所
- SWELLカスタム書式
- カスタマイザー内の「追加CSS」
SWELLカスタム書式について
SWELLカスタム書式は、その名からイメージが付く通りSWELLの独自機能です。
WordPressで独自のCSSコードを追加する場合にはカスタマイザー内の「追加CSS」にコードを記載するのが一般的です。
SWELLのカスタム書式と標準の追加CSSの違いは、エディターでの読み込みです。
次の表で示す通り、SWELLカスタム書式に記載したコードはフロントだけでなく、エディターにも読み込まれます。
| SWELLカスタム書式 | 追加CSS | |
|---|---|---|
| フロント | 読み込まれる | 読み込まれる |
| エディター | 読み込まれる | 読み込まれない |
かんたエディターにも反映させたいコードはSWELLカスタム書式に書くのがおススメです。
SWELLカスタム書式に独自CSSコードを記載する方法を紹介します↓
「SWELL設定」→「エディター設定」をクリック↓
「カスタム書式」をクリック↓
「カスタム書式用CSS」に独自CSSコードを追加↓
カスタマイザー内の追加CSSについて
WordPress標準の追加CSSについてです。SWELLでもカスタマイザー内に追加CSSの入力が行えます。エディターに読み込ませる必要のないレイアウト系の独自CSSは追加CSSに入力するのがおススメです。
カスタマイザー内の追加CSSに、独自CSSコードを追加する方法を紹介します↓
「外観」→「カスタマイズ」をクリック↓
「追加CSS」をクリック↓
コードを貼り付ける↓
【移行手順:15】Font Awesomeの設定作業
SWELLでは標準で仕様できるアイコンがあります。Font Awesomeのアイコンを利用しなくても、アイコンを使った装飾が可能です。
標準のアイコンとは別にFont Awesomeのアイコンを利用したい人は次の設定を行ってください。
「SWELL設定」をクリック↓
「Font Awesome」タブを選択↓
Font Awesome読み込み設定オプションを選択↓
v6とv5は利用できるアイコンがかなり違います。Font Awesomeの公式サイトを確認し、使いたいアイコンのあるバージョンを選択しましょう。
高速化したいならFont Awesomeは使わない
SWELLに限った話ではありませんが、外部のファイルを読み込むことでパフォーマンスは低下します。もしサイトのパフォーマンスが高い優先度ならFont Awesomeの読み込みは行わないのが賢明です。
【移行手順:16】jQueryの設定作業
独自カスタマイズでjQueryのコードを書いている人や、jQueryの読み込みが必要なプラグインを利用しているといったケースでのみ必要な作業です。
「SWELL設定」をクリック↓
「jQuery」タブをクリック↓
jQueryの読み込みオプションを選択↓
読み込むファイルが増えるとサイトパフォーマンスが低下します。
「jQueryが必要か分からない」という人は、本作業は行わないのが無難です。
【移行手順:17】OGPの設定作業
OGPはOpen Graph Protcol の略語です。TwitterやFacebookなどのSNSでシェアされた時に表示される、アイキャッチなどのデザインを指定するプロトコルです。
SEO SIMPLE PACKプラグイン有効時の手順を解説します。
デフォルトのOGP画像を設定
サイト共通のデフォルト画像を設定する手順です。ここで設定した画像は、アイキャッチを設定していないページのOGP画像に指定されます。
記事ページと違い、固定ページって、それほど意識してアイキャッチを付けませんよね？けっこう未設定にしている場合ことがありますが、そういったページに必要なのがデフォルト画像です。
「SEO PACK」→「OGP設定」をクリック、
OGPタグの基本設定から「画像を選択」をクリックし、任意の画像をアップロード↓
OGP画像のサイズを設定
SNSでシェアされた時の画像サイズを大きくする設定です。画像が大きく目立方がクリック率が上がるかも？
「SEO PACK」→「OGP設定」をクリック、
「Twitter」を選択、カードタイプで「summary_large_image」を選択↓
【移行手順:18】ASPの管理コードを設置する作業
アフィリエイトブログを運営している人向けの設定です。
ASPの担当者から「このコードをhead内に追加して」といった指示を受けることがあります。古いテーマの場合には、header.phpなどのテンプレートファイルを直接編集する必要があったりします。
SWELLはhead内に任意のコードを追加するオプションがあるので、テンプレートファイルを編集する必要はありません。
ASP指定のコードをhead内に設置する方法を紹介します。
「外観」→「カスタマイズ」をクリック↓
「高度な設定」をクリック↓
「headタグ終了直前に出力するコード」にコードを設置↓
設定が反映されない場合
カスタマイザーの設定を有効化する場合は、保存オプションで「公開」を選択しましょう。「下書き」では設定が反映されません。
カスタマイザー内に設定したコードはLPカスタム投稿を除く、全てのページで表示されます。
特定のページだけで指定のコードを表示したい場合は、wp_headフックを使いましょう。例えばis_single('記事ID')の条件を付けると特定の記事ページだけで表示させることができます↓
記事ID１の記事だけに表示するサンプルコード
function kanta_sample(){
if ( is_single('1') ) {
echo 'コード';
}
}
add_action( 'wp_head', 'kanta_sample' );不必要なコードを読み込ませたくない人はwp_headフックを活用してください。
【移行手順:19】不要なプラグインの整理
Cocoon運営時に利用していたプラグインを整理するステップです。
SWELLへの切り替え後に有効化しているプラグインを精査し、必要のないプラグインを無効化し削除しましょう。
どのプラグインが必要かはサイト運営しているユーザー次第です。参考までに次のようなプラグインはSWELLでは必須ではありません。
高速化系の補助プラグイン
サイトの読み込みスピードは検索順位を決定する要素の１つです。できるだけ早いサイトに仕上げるために、プラグインを入れているユーザーは多いと思います。
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には記事内やウィジェットに目次を自動的に表示する機能があります。目次系のプラグインは機能が重複するので不要です。
かんた自分のサイト運営にあわせて見直してください。
【移行手順:20】頻繁に使い回すパーツの登録作業
同じパーツを使いまわすことってありますよね？ブログを効率的に執筆したいなら「ブログパーツ」の活用がおススメです。ブログパーツはSWELLの独自ブロックの1つです。イメージ的にCocoonのテキストテンプレートや、アフィリエイトタグのような機能です。
繰り返し利用する画像や文章を事前登録し、呼び出して使うことができます。
具体的な例を使って紹介します。以下の画像は、ボクのブログ記事の先頭にあるプロフィールのパーツです↓
プロフィールパーツはブログパーツに登録しており、エディター内に埋め込むことができます。
ブログパーツの特徴の１つは何といってもメンテナス性。例えば、ボクのプロフィールだと「IT業界歴22年」と表記しています。これを23年に変する場合、ブログパーツ管理ページ上で変更するだけで、このブログパーツを埋め込んでいる全てのページで一括変更されます。
ブログパーツを使わず全ページに著者情報を手入力していたら、直すのはものすごく大変ですよね？
ブログパーツは著者プロフィール以外にも、Cocoonのアフィリエイトタグ管理のようにASPのリンクを管理するといった用途にも向いています。
ASPのリンクって、覚えているのは不可能。リンクを貼るのにわざわざASPにログインして、リンクをコピーするのってちょと非効率ですよね？
かんたブログパーツで管理しておけば大幅な時短になり、ミスも起きません。
SWELLでブログパーツを使う方法を紹介します↓
「ブログパーツ」→「新規追加」をクリック↓
エディターが開くので、自由にパーツを作りましょう↓
Cocoonのテキストテンプレートやアフィリエイトタグ管理機能と違い、SWELLはブロックエディターでパーツを作ることができます。SWELLのカスタムブロックやプラグインを組み合わることもできるので、かなり自由度高めです。
ブログパーツは登録できる数に制限はありません。カテゴリー分け機能もあるので、ガツガツ登録して作業効率を高めましょう。
ブログパーツが表示されない場合
ダッシュボード左手にブログパーツが表示されない場合はブログパーツの表示設定を確認しましょう。
「SWELL設定」→「機能停止」、「ブログパーツを停止」のチェックを外す。
【移行手順:21】SWELLER’Sオンラインコミュニティーへの参加
SWELLにはSWELL公式のユーザーコミュニティーがあります。ユーザー間での情報共有、サイト運営などの雑談を行えるクローズな環境です。
公開型のサポートフォーラムとは別ものです。
参加費や月額料金といった費用は一切ありません。オンラインタイプでアプリなどのインストールも不要なので気軽に参加しましょう。ちなみに以前のオンラインコミュニティーはSlackでしたが、2022年末からDiscordに変更されています。理由はSlackの料金システムの変更によるものです。
オンラインコミュニティーへの参加方法を紹介します。
【移行手順:22】記事のリライト作業
WordPressテーマ切り替えで一番大変なのが記事のリライトです。記事数が多い人ほど大変ですが、とにかく気合で乗り切りましょう！
エエディターでページを開き、Cocoon固有の装飾をSWELLの装飾に変更していく地道な作業です。
テーマ乗り換えサポートプラグインを利用している環境でも、最終的にすべての装飾を置き換える必要がありますが、記事数に応じて次のようにリライトを進めるのがおススメです。
リライトの進め方
| 記事数 | 進め方 |
|---|---|
| 少ない （目安：30記事未満） | 1記事ずつ完全にリライトする。 優先順位としはアフィリエイト収益が発生していたキラーページ。次いでアクセス数の多い集客記事。 |
| 多い （目安：30記事以上） | 表示されない装飾、表示が一部おかしくなっているものだけ優先的にリライトする。（正常に表示されているものは優先度低めで後回し）。 |
Cocoonテーマ乗り換えサポートプラグインを有効化すると装飾の一部は正常に表示されます。記事数が多い場合は、無事に変換されている装飾は後回しにして、表示が一切されなくなっている装飾などを優先するとテーマ切り替え移管中のダメージを最小限に抑えることができます。
【移行手順:23】Cocoon乗り換えサポートプラグインの停止
記事のリライトが完了したら、テーマ乗り換えサポートプラグインを停止しましょう。テーマ乗り換えサポートプラグインは移管中にCocoonのファイルを読み込んでいるためパフォーマンスに影響が出ます。
かんたリライト作業が完了したら、不要なCocoonのファイルを読み込む必要はありません。
乗り換えサポートプラグイン停止後は、キャッシュをクリアし全ページのチェックです。大事なことなので、もう一度言いいます。
キャッシュをクリア！
キャッシュをクリアしないと、プラグイン有効時のページが表示される可能性があります。十分な確認ができないので、必ずキャッシュをクリアした後に全ページを確認しましょう。
【移行手順:24】乗り換えサポートプラグインとCocoonの削除
Cocoonのテーマとテーマ乗り換えサポートプラグインを削除しましょう。
WordPressは有効化していないテーマとプラグインがあると、ダッシュボードのサイトヘルス上で警告が表示されます。
テーマ切り替えに関するFAQ
CocoonからSWELLに切り替える移行作業に関してのFAQです。
セルフバックなどでSWELLを安く購入したい
SWELLのセルフバック、セールに関しては次の記事で詳しく解説しています。
CocoonからSWELLへの移設するのにかかる時間の目安は？
記事の数、記事の装飾の量しだいです。
1記事が2,000～3,000文字程度の記事であれば、リライトにかかる時間は15分から30分程度です。10記事であればその10倍程度の時間を見積もっておきましょう。
Cocoonテーマ切り替えサポートプラグインは無料？
無料です。
SWELL購入後、マイページからダウンロードできます。
SWELLにはアフィリエイトがあると聞きましたが、どこから参加できますか？
もしもアフィリエイトが取り扱いASPです。
SWELLのアフィリエイトには審査がありません。申し込むと即アフィリエイトできるようになります。
バックアップファイルが「ギガ単位」と非常にデカいです。それほどファイルサイズが大きくなる運営はしていいませんが、何とかなりませんか？
自動的に生成されているバックアップファイルがないか確認するのがおすすめです。バックアップの管理画面から確認するか、FTPやファイルマネージャーツールで保存されているファイルがないか確認しましょう。
テーマ切り替え移行作業時のトラブル対応について
WordPressテーマをCocconからSWELLへる移行作業に関するトラブル対応についてです。WordPress定番の次の症状についての解決アプローチを紹介します。
トラブルの一例
- サイトが真っ白になった
- ダッシュボードにログインできない
- カスタマイザーで設定時に保存できない
SWELLの要件に合わせる
CocoonからSWELLへのテーマ切り替え後、サイトが真っ白になってしまうようなケースについてです。SWELLの動作環境を満たしていない可能性があります。
以下がSWELLが動作する推奨環境です。
推奨環境
| PHP | PHP 7.3 以上 |
| WordPress | WordPress 5.9 以上 (推奨：6.1 ~) |
バージョンアップする場合はPHPが先です。WordPress本体にも推奨のPHPがあるため、推奨未満のPHPバージョンだとWordPressが表示されなくなるなど不具合が発生します。
初心者PHPのバージョンって、どうやって確認するの？
SWELLを有効化している場合は、ダッシュボードにPHPのバージョン情報が表示されます↓
上のサンプル画像だとPHPのバージョンは7.4.33です。SWELLの推奨条件をしっかり満たしています。
PHPのバージョンアップ方法
PHPのバージョンアップはレンタルサーバーのコントロールパネルで行います。基本的にボタンをポチポチするだけです。プログラムコードの編集などはありませんので、初心者の人でもPHPのバージョンアップは簡単です。
以下、代表的なレンタルサーバー各社のマニュアルです。
公式マニュアル
プラグインが干渉している
サイトで有効化しているプラグインが原因でサイトに不具合が発生することがあります。
プラグインによる不具合の症状は色々です。
不具合の一例
- サイトが真っ白になる
- ダッシュボードにログインできない
- 英文字のエラーが表示される
- 画像が表示されない
例えばSWELLにテーマを切り替えた直後後に、アイキャッチ画像が表示されなくなったという症状を見かけたことがあります。画像を圧縮するプラグインが原因で、このプラグインを停止したらアイキャッチが表示されました。
プラグインを停止してみる。
かんたシンプルながら効果的な切り分け方法です。
どのプラグインがトラブルの原因になっているかを特定する場合は次の流れでプラグインを１つづつ停止します。
作業の流れ
- プラグインを停止
- キャッシュをクリア
- 表示・動作を確認する
プラグインを全て同時に停止してしまうと、どのプラグインがトラブルの原因かを特定することはできません。１つずつ順番に停止して確認してください。
問題のプラグインを特定した後についてです。どうしてもプラグインを利用したい場合、プラグインの最新バージョンがないかチェックしましょう。
最新バージョンのプラグイン利用しても使えない場合、SWELLとの相性が悪いのか、その他のプラグインが干渉している可能性があります。
かんたデフォルトテーマに切り替えて正常に動作するかチェックしてみてください。
WAFの影響
カスタマイザーで設定を保存しようすると「何かうまくいかなかったようです。」と表示されるケースについてです。例えばアドセンスの申請コードをhead内に貼り付けようとすると発生することがあります。
エラーの原因は次の通りです。
エラーの原因
- レンタルサーバーのWAF
- セキュリティー系のプラグイン
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の設定を無効化したら反映まで２時間以上かかったことがあります。
カスタマイザー上からコードを貼るだけの作業なのに、WAFの反映に数時間も待つのは地獄です。でも、面倒だからと言ってWAFを無効化した状態はセキュリティー上危険。
カスタマイザーの作業で一時的にWAFを停止したら、必ず有効化するのも忘れないよう注意しましょう。
かんた基本的にWAFを有効化した状態で運営することをおススメします。
SWELLサポートフォーラムを活用する
トラブル発生時の対応アプローチをいくつか紹介しましたが、どうしても解決できない場合は、SWELLのサポートフォーラムをチェックしてみましょう。
CocoonからSWELLにテーマ切り替え後に発生したトラブルの報告と解決方法が紹介されているかもしれません。
それでも解決できない場合は、トラブルの内容をフォーラムに投稿しましょう。
Cocoon同様にSWELLのサポートフォームでの相談は無料です。サポート範囲内のことであればテーマ開発者さん他、他のSWELLユーザーからアドバイスをもらうことができます。
SWELLのサポートフォーラムに投稿する方法を紹介します。
マイページからログイン↓
「SWELLに関する質問」をクリック↓
「トピックを追加」をクリック↓
タイトルを入力、確認事項などをチェックし、相談内容を入力↓
問題が確認できるページのURL
URLの記載があると、SWELLテーマ開発者さんや有志のメンバーはサイトを直接確認することができます。URLを入力するとトラブル解決が早くなる可能性が高まります。URLはログインしたユーザーのみに表示するオプションがあります。
「トピックを追加」をクリック↓
以上でトピックが投稿されます。
よくあるトラブルの原因
プラグインによる影響、独自に追加したコード（CSS、JavaScript、jQuery）、キャッシュなどが原因で不具合が発生することがあります。トピックを立てるまえに、プラグインの停止、独自カスタマイズコードの削除、キャッシュのクリアをして確認しましょう。
ダウンタイムなしでCocoonからSWELLに移行する手順
テーマ移管期間中にレイアウトくずれが発生するのは普通のことです。ですが、企業系のオウンドメディアだと、装飾が崩れて表示されているのはイメージダウンですよね？
収益が毎日発生するレベルのアフィリエイトブログでも、テーマ切り替えの作業で収益が落ちるのは避けたいですよね？
かんたテーマ切り替えの影響を最小限に抑える場合は、次の作業手順を行ってみてください。
作業の流れ
- バックアップファイルを用意する（本番サイト）
- WordPressをインストールする（検証サイト）
- バックアップデータを読み込む（検証サイト）
- リライト作業をする（検証サイト）
- バックファイルを用意する（検証サイト）
- バックアップデータを読み込む（本番サイト）
簡単に説明すると、運営しているサイト以外に検証用のサイトを作る方法です。検証環境でリライトを行った後、移行が完了したデータを本番サイトに流し込む流れです。
かんた詳しい手順を解説します。
【ステップ①】バックアップファイルを用意する（本番サイト）
バックアップファイルを作成します。今回は無料プラグインのAll-in-One WP Migrationを使ってバックアップファイルを作成する方法を紹介します。
「All-in-One WP Migration」をクリック↓
「エクスポート先」をクリック↓
「ファイル」を選択↓
「ダウンロード」をクリック↓
ファイルサイズが異常に大きいと感じたら
体験談ですが、肥大化したバックアップファイルがあるとダウンロードファイルのサイズがギガ単位になることがあります。バックアッププラグインで定期的にバックアップファイルを自動作成している環境であれば、必要なファイルだけを保存して古いバックアップファイルを削除しましょう。
【ステップ②】WordPressをインストールする（検証サイト）
運営しているサイトとは別に、検証用のWordPressサイトをインストールするステップです。
インストール先のイメージ↓
| 本番環境 | 検証サイト |
|---|---|
| example.com | example.com/test |
WordPressのインストールは、レンタルサーバーのコントロールパネルから行います。
「クイックインストール」「簡単インストール」など、レンタルサーバー会社ごとに機能の名前は違いますが、WordPressをコントロールパネルからインストールするツールがあります。
WordPressインストール方法のマニュアル
かんた便利なツールでWordPressをインストールしましょう。
インストール時の注意点
本番環境のWordPressサイトで公開しているページのパーマリンクと被らないよう注意してください。例えば、本番環境で「test」というパーマリンクの記事を公開している場合、検証サイトのインストール先にとしてexample.com/testは使えません。記事が表示されなくなります。
【ステップ③】バックアップデータを読み込む（検証サイト）
本番環境でエクスポートしたバックアップファイルを検証サイトに読み込むステップです。
検証サイトにもAll-in-One WP Migrationを入れた後に作業を行います。
「All-in-One WP Migration」→「インポート」をクリック↓
バックアップファイルをドラッグ＆ドロップ操作でアップロード↓
検索エンジンをブロックする
バックアップサイトを検索エンジンに登録させない設定をしましょう。
ダッシュボード上、「設定」→「表示設定」と進み、「検索エンジンがサイトをインデックスしないようにする」にチェックを入れます。XML形式のサイトマップ出力系プラグインも停止して構いません。
【ステップ④】リライト作業をする（検証サイト）
WordPressテーマをSWELLに切り替えた後、記事のリライト作業を行います。
一般ユーザーに公開している環境ではないので、テーマ乗り換えサポートプラグインは不要です。ひたすら記事のリライトに集中しましょう。
リライトが完了したら、サイト全体のレイアウトなどデザインを自分好みにアレンジしちゃってください。
【ステップ⑤】バックファイルを用意する（検証サイト）
「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
異なるバージョンについては、キャプチャ画像や解説の内容が違うケースがありますのでご注意ください。