【テーマ切り替え】DiverからSWELLへの移行手順を解説

FAQ
初心者

ブログのテーマをDiverからSWELLに乗り換えたい
正しい手順を知りたい…

そんな疑問に答えます。

WordPressのテーマ切り替え作業は、正しい手順を知らないと本当に大変です。僕は仕事がら色んなWordPessテーマの切り替え作業を行った経験があります。

本記事ではDiverとSWELLの両方のテーマを持っている僕が、DiverからSWELLへテーマを切り替える作業手順を画像付きで解説します。

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

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

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

今回の切り替え対象テーマはDiverからSWELLです。

海外のエンジニアが開発した同じ名称のテーマがあります。
本記事で解説するのは、国産ブログテーマ「Diver」から「SWELL」への移行作業です。

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

  1. バックアップ
  2. アナリティクスのコードをコピー
  3. 独自CSSコードのコピー
かんた

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

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

テーマ切り替え後に不具合があった場合に、以前の状態に戻すために必要な作業です。

切り替え前にサイトのバックアップを取得します。WordPressにはバックアップ系のプラグインが多数配布されています。普段利用しているバックアッププラグインがあれば、そのプラグインで構いません。

何を使っていいか分からないという人にはAll-in-One WP Migrationプラグインをおススメします。無料版はバックアップの上限が512MBなので、これより大きなサイズをバックアップしたい場合は有料版を購入するか、別の無料バックアッププラグインを利用してください。

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

Googleアナリティクスを利用している人向けの作業です。テーマ切り替え前にDiverの管理画面に設定しているコードをコピーしましょう。

操作内容

Diverオプション」をクリック↓

Diverオプションをクリック

画面を下にスクロールし「Google Analytics設定」まで進みます。

トラッキングID」をメモ帳アプリにコします↓

GAコード

【事前作業③】独自CSSコードのコピー

独自のCSSコードを書いている人向けの作業です。テーマ切り替え前にメモ帳アプリに、追加したCSSコードコピペしておきましょう。

操作内容

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

カスタマイズをクリック

追加CSS」をクリック↓

追加CSS

表示されるコードをコピー↓

CSSをコピー

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

DiverからSWELLへの移行手順

テーマをDiverからSWELLに切り替える方法をステップごとに解説していきます。

SWELLの購入

SWELLを購入するステップです。

WordPressテーマなどのソフトウェアはごくまれに不正に転売されています。SWELLはユーザー認証が導入されているテーマです。SWELL公式サイト以外でSWELLを入手した場合、ユーザー認証ができずテーマのアップデートができません

かんた

テーマは公式サイトから購入しましょう。

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

操作内容

公式サイトにアクセス↓

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

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

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

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

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

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

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

SWELLを購入する手順
かんた

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

会員登録

SWELLの会員登録を行うステップです。

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

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

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

操作内容

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

必要事項を入力↓

必要事項を入力↓

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

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

会員登録する

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

操作内容

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

マイページにログイン

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

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

SWELLテーマをダウンロード

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

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

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

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

SWELLのアップロード

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

操作内容

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

テーマをアップロード

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

かんた

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

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

SWELLを有効化

操作内容

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

テーマを有効化

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

SWELLを有効化

子テーマを利用する場合は子テーマを有効化してください。

ユーザー認証

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

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

操作内容

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

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

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

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

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

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

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

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

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

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

リンクをクリック

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

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

確認メールについて

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

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の投稿記事にある「SEO設定」→「メタディスクリプション」を入力していた人向けです。All in One SEOプラグインでmetaデータを管理している人で、そのままAll in One SEOを利用する人も不要です。

DiverのMeta descriptionは「diver_single_metadescription」に保存されています。テーマをSWELLに切り替えるとデータ自体はDBに残りますが、HTMLに出力されることはありません。

SEO SIMPLE PACKプラグインを有効化している場合には「ssp_description」の値がMeta descriptionとしてHTMLに出力されます。

Meta descriptionの保存先

スクロールできます
DiverSEO SIMPLE PACK
diver_single_metadescriptionssp_description

Diverで設定したMeta descriptionをSEO SIMPLE PACKプラグインを有効化している環境に移す作業が必要です。

かんた

移設する方法は次の3パターンです。

パターン

  1. 手作業
  2. 子テーマのfunctions.phpでの作業
  3. DBでの作業
かんた

それぞれ解説します。

手作業

記事の数が10記事未満など、記事数が少ない人向けの作業パターンです。さらに、「コードレベルでの編集が怖い」といった人は無理せず手作業で行うのが無難です。

テーマ切り替え前に記事ごとのMeta descriptionをメモ帳やエクセルにコピーし、テーマ切り替え後に貼り付けるといった流れで作業を行いましょう。

子テーマのfunctions.phpでの作業

記事数が多く、一括作業をしたい人向けです。

操作内容

次のコードをSWELL子テーマのfuncstion.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での作業

phpMyAdminなどでツールでDBにアクセスできる場合に限ります。

記事数が多く、一括作業をしたい人向けです。こちらの構成の場合、作業②の「子テーマのfunctions.phpでの作業」と比較して子テーマが不要というメリットがあります。Code Snippetsプラグインを使うことができないといったケースでも有効な方法です。

操作内容

次のコマンドでMeta descriptionを置き換えることが可能です。

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

独自CSS

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

操作内容

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

カスタマイズをクリック

追加CSS」をクリック↓

追加CSS

コードをコピー↓

CSSをコピー

Font Awesomeを使えるようにする

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

操作内容

SWELL設定」をクリック↓

「SWELL設定」をクリック

Font Awesome」タブを選択↓

「Font Awesome」タブを選択↓

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

Font Awesomeの設定をする

jQueryの設定

この工程は任意です。jQueryを利用する場合のみ行ってください。

操作内容

SWELL設定」をクリック↓

SWELL設定を選択

jQuery」タブをクリック↓

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

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

OGPの設定

TwitterやFacebookなどのSNSでシェアされた際の表示形式を指定するOGPの設定です。

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

操作内容

左側のメニューから「SEO PACK」→「OGP設定」をクリック、

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

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

左側のメニューから「SEO PACK」→「OGP設定」をクリック、

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

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

記事のリライト

エディターで投稿をリライトするステップです。

Diver独自の装飾機能はSWELLでは表示されません。投稿を1つずつ修正をしていきましょう。

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

テーマ切り替えに関する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

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

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