初心者ブログのテーマをDiverからSWELLに乗り換えたい
正しい手順を知りたい…
以降した人の経験談を聞きたい…
そんな疑問に答えます。
WordPressのテーマ切り替え作業は、正しい手順を知らないと本当に大変です。僕は仕事がら色んなWordPessテーマの切り替え作業を行った経験があります。
本記事ではDiverとSWELLの両方のテーマを持っている僕が、DiverからSWELLへテーマを切り替える作業手順を画像付きで解説します。
テーマ切り替えの事前準備
今回の切り替え対象テーマはDiverからSWELLです。
テーマ切り替え前の事前準備
- バックアップ
- アナリティクスのコードをコピー
- 独自CSSコードのコピー
かんたそれぞれの作業を解説します。
【事前作業①】バックアップ
切り替え前にサイトのバックアップを取得します。WordPressにはバックアップ系のプラグインが多数配布されています。普段利用しているバックアッププラグインがあれば、そのプラグインでかまいません。
何を使っていいか分からないという人にはAll-in-One WP Migrationプラグインをおススメします。無料版はバックアップの上限が512MBなので、これより大きなサイズをバックアップしたい場合は有料版を購入するか、別の無料バックアッププラグインを利用してください。
【事前作業②】アナリティクスのコードをコピー
Googleアナリティクスを利用している人向けの作業です。テーマ切り替え前にDiverの管理画面に設定しているコードをコピーしましょう。
「Diverオプション」をクリック↓
画面を下にスクロールし「Google Analytics設定」まで進みます。
「トラッキングID」をメモ帳アプリにコします↓
【事前作業③】独自CSSコードのコピー
独自のCSSコードを書いている人向けの作業です。テーマ切り替え前にメモ帳アプリに、追加したCSSコードコピペしておきましょう。
「外観」→「カスタマイズ」をクリック↓
「追加CSS」をクリック↓
表示されるコードをコピー↓
DiverからSWELLへのテーマ切り替え作業手順
テーマをDiverからSWELLに切り替える方法をステップごとに解説していきます。
SWELLの購入
SWELLを購入するステップです。
WordPressテーマなどのソフトウェアはごくまれに不正に転売されています。SWELLはユーザー認証が導入されているテーマです。SWELL公式サイト以外でSWELLを入手した場合、ユーザー認証ができずテーマのアップデートができません。
かんたテーマは公式サイトから購入しましょう。
公式サイトにアクセス↓
利用規約を確認し、「利用規約に同意します」にチェックを入れる↓
「SWELLを購入する」をクリック↓
カードでの支払いページで必要事項を入力し、
「\17,600支払う」をクリック↓
かんたテーマの購入手順は、次の記事で解説しています。
会員登録
SWELLの会員登録を行うステップです。
会員登録する理由とメリット
- SWELLのテーマをダウンロードできる
- SWELLの子テーマをダウンロードできる
- ユーザー認証をすることができる
- テーマ切り替えサポートプラグインをダウンロードできる
- 着せかえデザインデータがダウンロードできる
- フォーラムに質問や要望を投稿できる
- オンラインコミュニティーに参加できる
かんた会員登録する手順を解説します。
会員登録ページにアクセス。
必要事項を入力↓
メールアドレスはSWELL購入時に入力したメールアドレス限定です。それ以外のメールアドレスで会員登録することはできません。
利用規約を確認してチェックを入れた後、「登録する」をクリック↓
SWELLのテーマファイルをダウンロード
マイページにアクセスし、ログインします↓
ページを下にスクロールします。
SWELL製品ダウンロード部分の「SWELL 本体最新版」にある「swell-＊-＊-＊.zip」をクリック↓
テーマの「＊」について
swell-＊-＊-＊.zipの「＊」部分はバージョン情報です。
画像とは異なる表記になっている場合がありますが、気にする必要はありません。
Safariを使っている場合の注意点
zip形式のファイルをダウンロードすると自動的に解凍されてしまうことがあります。
自動解凍されないようSafariで設定を解除するか、Google Chromeなど別のブラウザでテーマファイルをダウンロードしてください。
子テーマを利用する場合は「子テーマ」にある「swell_child.zip」をダウンロード↓
SWELLのアップロード
ダウンロードしたSWELLのテーマファイルをアップロードします。
「外観」→「テーマ」をクリック↓
「新規追加」をクリックし、ダウンロードしたSWELLのテーマファイルを選択↓
かんた子テーマを利用する場合は合わせて子テーマをアップロードしましょう。
アップロードの順番に注意
テーマと子テーマをアップロードする場合テーマ本体を先にインストールしてください。
子テーマを先にアップロードするとエラーが表示されます。
SWELLを有効化
「外観」→「テーマ」をクリック↓
SWELLを選択し「有効化」をクリック↓
子テーマを利用する場合は子テーマを有効化してください。
ユーザー認証
ユーザー認証の設定手順を紹介します。
ダッシュボードに表示される「SWELLのユーザー認証が完了していません。」をクリック↓
「メールアドレス」に、SWELL購入時に登録したメールアドレスを入力↓
※購入時に設定したメールアドレス以外は利用できません。
「認証リクエストを送信」をクリック↓
登録したメールアドレスに、次の確認メールが届きます↓
- 件名：SWELLのユーザー認証用URLを送付します。
- 送信元ドメイン：swell-theme.com
メール内のリンクをクリック↓
認証が完了された旨が表示されます↓
確認メールについて
メールは認証リクエストを送信直後に届きます。認証リクエストボタンをクリックし１分以上経過してもメールが届かない場合は迷惑メールフォルダを確認しましょう。
SEO SIMPLE PACKプラグインのインストール
SEO SIMPLE PACKはSWELL開発者さんが公開しているMeta Title、Meta Descriptionを管理するプラグインです。
プラグインを有効化すると各ページのmetaまわりの設定が行えるようになります。
「プラグイン」をクリック↓
「新規追加」をクリック↓
「SEO SIMPLE PACK」でキーワード検索↓
SEO SIMPLE PACK表示されたら、「今すぐインストール」をクリック↓
かんたインストールが完了したらプラグインを有効化してください。
アナリティクスコードの設定
アクセス解析用のコードを設定するステップです。
「SEO PACK」をクリック↓
「“Tracking ID” for UA」にアナリティクスのコードを貼り付ける↓
ふきだしの登録
Diverの「ふきだし」と「会話」の装飾は、SWELLだと「ふきだし」という名称です。
SWELLでは事前にふきだしを登録しておき、ブロックエディター上から呼び出して使うという仕様になっています。ひんぱんに利用するふきだしを登録しておくことで執筆作業がスピードアップします。
「ふきだし」をクリック↓
「新規ふきだしの追加」をクリック↓
ふきだしの画像、ふきだしの向きなどを自由に登録しておきましょう。
Meta descriptionデータの移設
DiverのMeta descriptionは「diver_single_metadescription」に保存されています。テーマをSWELLに切り替えるとデータ自体はDBに残りますが、HTMLに出力されることはありません。
SEO SIMPLE PACKプラグインを有効化している場合には「ssp_description」の値がMeta descriptionとしてHTMLに出力されます。
Meta descriptionの保存先
| Diver | SEO SIMPLE PACK |
|---|---|
| diver_single_metadescription | ssp_description |
Diverで設定したMeta descriptionをSEO SIMPLE PACKプラグインを有効化している環境に移す作業が必要です。
かんた移設する方法は次の3パターンです。
パターン
- 手作業
- 子テーマのfunctions.phpでの作業
- DBでの作業
かんたそれぞれ解説します。
手作業
記事の数が10記事未満など、記事数が少ない人向けの作業パターンです。さらに、「コードレベルでの編集が怖い」といった人は無理せず手作業で行うのが無難です。
テーマ切り替え前に記事ごとのMeta descriptionをメモ帳やエクセルにコピーし、テーマ切り替え後に貼り付けるといった流れで作業を行いましょう。
子テーマのfunctions.phpでの作業
記事数が多く、一括作業をしたい人向けです。
次のコードをSWELL子テーマのfunction.phpに貼り付けます↓
add_filter('ssp_output_description', function($ssp_description) {
$diver_meta_atnak = get_post_meta(get_the_ID(), 'diver_single_metadescription', true);
$ssp_meta = get_post_meta(get_the_ID(), 'ssp_meta_description', true);
if ( empty( $ssp_meta ) && $diver_meta_atnak ) {
return $diver_meta_atnak;
}
return $ssp_description;
});コードの編集はVS Codeなどを使ってください。
DBでの作業
記事数が多く、一括作業をしたい人向けです。こちらの構成の場合、作業②の「子テーマのfunctions.phpでの作業」と比較して子テーマが不要というメリットがあります。Code Snippetsプラグインを使うことができないといったケースでも有効な方法です。
次のコマンドでMeta descriptionを置き換えることが可能です。
update wp_postmeta set meta_key = 'ssp_meta_description' where meta_key = 'diver_single_metadescription'独自CSS
「外観」→「カスタマイズ」をクリック↓
「追加CSS」をクリック↓
コードをコピー↓
Font Awesomeを使えるようにする
「SWELL設定」をクリック↓
「Font Awesome」タブを選択↓
Font Awesome読み込み設定オプションを選択↓
jQueryの設定
「SWELL設定」をクリック↓
「jQuery」タブをクリック↓
jQueryの読み込みオプションを選択↓
OGPの設定
TwitterやFacebookなどのSNSでシェアされた際の表示形式を指定するOGPの設定です。
SEO SIMPLE PACKプラグイン有効時の手順を解説します。
左側のメニューから「SEO PACK」→「OGP設定」をクリック、
OGPタグの基本設定から「画像を選択」をクリックし、任意の画像をアップロード↓
左側のメニューから「SEO PACK」→「OGP設定」をクリック、
「Twitter」を選択、カードタイプで「summary_large_image」を選択。
記事のリライト
エディターで投稿をリライトするステップです。
Diver独自の装飾機能はSWELLでは表示されません。投稿を１つずつ修正をしていきましょう。
テーマ切り替えに関するFAQ
DiverからSWELLへの移行作業に関するFAQです。
SWELLを安く購入する方法は？
次の記事で解説しています。
Diver専用のテーマ乗り換えサポートプラグインは無いの？
SWELL公式サイトにあるデモサイトのようにする方法は？
デモサイトの着せ替えデータが無料で配布されています。
配布はSWELL購入者限定です。マイページにログインし、着せ替えのデザインデータをダウンロードし、自分のサイトに読み込ませましょう。
テーマ切り替え後、エディターがクラシックのままでブロックエディターに切り替わらない…
Classic Editorプラグインを停止しましょう。
SWELLを使ったサイトで、参考になるデザインを紹介してほしい
SWELLを使ったサイトの事例集は次の記事にまとめてあります。
まとめ
WordPressテーマをDiverからSWELLに切り替える手順を解説しました。
SWELLはCocoonやAffingerなど他のWordPressテーマからの移行用に、テーマ乗り換えサポートプラグインを提供しています。
Diverからの切り替えサポートプラグインは現時点ではありませんが、一部ユーザーから公式サポートフォーラムに要望が投稿されています（参考：有料テーマ「Diver」からの乗り換えサポートプラグイン）。テーマ切り替え後に発生する不具合を最小にする効果があるので、ぜひDiverユーザー向けに提供してもらえるとありがたいですね。
SWELLとDiverは本記事執筆時に利用可能な下記最新バージョンで検証しています。
各テーマのバージョン
- SWELL：バージョン 2.7.2.1
- Diver：バージョン 4.9.8
異なるバージョンについては、キャプチャ画像や解説の内容が違うケースがありますのでご注意ください。