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

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

WordPressのテーマをSTORK19からSWELLに乗り換えたい….
正しい手順を知りたい…
STORKの乗り換えサポートプラグイン使えるのかな?

そんな疑問に答えます。

運用しているサイトのWordPressテーマの切り替え作業は、正しい手順を知らないとメチャクチャ苦労します。

本記事ではSTORK19からSWELLへテーマ乗り換えを経験した内容を画像付きで解説します。

ちなみにSWELLへの移行作業には乗り換えサポートプラグインが提供されています。STORK19用はありませんが、STORK用はあります。運用状況によってはSTORK用のテーマ乗り換えサポートプラグインが利用できるので、プラグインを使った移行方法についても紹介します。

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

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

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

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

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

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

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

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

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

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

何かあった場合に復旧するための準備として、サイトのバックアップを取得しましょう。とは言え、テーマをSWELLに切り替えただけでデータがデータベースから消えることはありません。

かんた

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

WordPressにはバックアップ系のプラグインが数多く配布されています。「これじゃないとダメ」という話ではありませんので、普段使っているプラグインがあれば、移行前にバックアップを取得しましょう。

大事なポイントは、復旧方法を知っているプラグインを使うことです。

バックアップファイルの使い方が分からないプラグインは避けましょう。

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

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

Googleアナリティクスを利用している人向けの作業です。アナリティクスのコードはSWELLに移設する必要があります。テーマ切り替え前にSTORK19で設定しているコードをコピーします。

操作内容

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

アクセス解説コード・headタグ」をクリック↓

「アクセス解説コード・headタグ」→「Google Analyticsタグ」をクリック↓

Google Analyticsタグ」をクリック↓

→「Google Analyticsタグ」をクリック↓

GoogleAnalytics解析コード」にあるコードをメモ帳にコピペ↓

「GoogleAnalytics解析コード」にあるコードをメモ帳にコピペ↓

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

独自CSSを追加していない場合には、このステップは不要です。

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

操作内容

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

カスタマイズをクリック

追加CSS」をクリック↓

カスタマイザーの追加CSS

表示されるCSSコードをコピーし、メモ帳に貼り付けましょう。

CSSをコピー

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

STORK19からSWELLへの移行手順

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

テーマ乗り換えサポートプラグイン

SWELLにはSTORK用のテーマ乗り換えサポートプラグインがあります。試してみたところ、STORK19からSWELLへの移行作業にも利用できました。ただし、STORK19をクラシックエディターで運用していた場合に限ります。

定番の「吹き出し」を例にします。

次の画像は、STORK19で設定した吹き出しです↓

STORK19で設定した吹き出し
STORK19有効時の吹き出し

次の画像はSTORKテーマ乗り換えサポートプラグインを有効化し、SWELLに切り替えた後の吹き出しです↓

SWELLにテーマを切り替えた後の吹き出し

ふきだしの装飾はSWELL用に変換されて表示されます。同じように、STORK19で設定した次の装飾もSWELLに切り替えた後でも表示されました。

乗り換えプラグインで変換できた装飾の一例

  1. 関連記事:[kanren]
  2. 補足説明:[aside]
  3. 注意説明:[aside type=”warning”]
  4. シンプルな枠:[aside type=”boader”]
  5. ボックス:[box]
  6. カラム:[colwrap]

STORKとSTORK19で利用できるショートコードは共通しています。そのため、STORK用のテーマ乗り換えサポートプラグインはSTORK19で利用できます。クラシックエディター環境で利用している人はぜひ活用しましょう。

SWELLの購入

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

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

かんた

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

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

操作内容

公式サイトにアクセス↓

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

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

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

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

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

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

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

SWELLを購入する手順
かんた

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製品ダウンロード部分の「乗り換えサポートプラグイン」にある「STORK用」をクリック↓

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

SWELLのアップロード

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

操作内容

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

テーマをアップロード

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

かんた

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

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

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

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

操作内容

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

プラグインを追加

新規追加」をクリック↓

プラグインを追加

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

SWELLを有効化

操作内容

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

テーマを有効化

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

SWELLを有効化

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

ユーザー認証

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

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

操作内容

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

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

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

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

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

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

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

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

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

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

リンクをクリック

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

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

確認メールについて

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

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

このステップは任意です
All in One SEOプラグインを利用している人で、そのままAll in One SEOプラグインを継続利用する人はスキップしてください。

SEO SIMPLE PACKはSWELL開発者さんが公開しているMeta Title、Meta Descriptionを管理するプラグインです。プラグインを有効化すると各ページのmetaまわりの設定が行えるようになります。

SEO SIMPLE PACKプラグインのインストール方法を紹介します。

操作内容

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

プラグインを追加

新規追加」をクリック↓

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

プラグインを検索

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

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

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

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

SEO SIMPLE PACKプラグインを使う場合に必要な手順です。

アクセス解析用のコードを設定するステップです。

操作内容

SEO PACK」をクリック↓

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

ふきだしの登録

SWELLでは事前にふきだしを登録しておき、ブロックエディター上から呼び出して使うという仕様になっています。ひんぱんに利用するふきだしを登録しておくことで執筆作業がスピードアップします。

操作内容

ふきだし」をクリック↓

ふきだしをクリック

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

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

ふきだしの画像、ふきだしの向きなどを自由に登録しておきましょう。

Meta データの移設

この工程は任意です。
STORK19利用時にAll in One SEOプラグインなどでmetaデータを管理している人で、そのままAll in One SEOを使い続ける人はこの作業は必要ありません。

All in One SEOプラグインで設定していたmetaデータをSEO SIMPLE PACKプラグイン環境に移設する作業手順についてです。

操作内容

次のコードの「サイト名」を自分のサイト名に変更し、SWELL子テーマのfuncstion.phpに貼り付けます↓

/**
 * SSPの上書き設定がなく、AIO-SEOの上書き設定があれば後者を出力
 */
add_filter('ssp_output_title', function($ssp_title) {

    $aio_meta = get_post_meta(get_the_ID(), '_aioseo_title', true);
    $ssp_meta = get_post_meta(get_the_ID(), 'ssp_meta_title', true);
    if ( empty( $ssp_meta ) && $aio_meta ) {
        return $aio_meta . ' | サイト名';  //ここはサイトに合わせて編集してください。
    }
    return $ssp_title;

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

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

});
add_filter('ssp_output_robots', function($ssp_robots) {

    $aio_meta = '';
    $aio_noindex = get_post_meta(get_the_ID(), '_aioseo_noindex', true);
    $aio_nofollow = get_post_meta(get_the_ID(), '_aioseo_nofollow', true);
    $ssp_meta = get_post_meta(get_the_ID(), 'ssp_meta_robots', true);

    if ( $aio_noindex === 'on' && $aio_nofollow === 'on' ) {
        $aio_meta = 'noindex,nofollow';
    } elseif ( $aio_noindex === 'on' ) {
        $aio_meta = 'noindex';
    } elseif ( $aio_nofollow === 'on' ) {
        $aio_meta = 'nofollow';
    }

    if ( empty( $ssp_meta ) && $aio_meta ) {
        return $aio_meta;
    }
    return $ssp_robots;

});

独自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画像サイズを大きくする設定

記事のリライト

エディターで投稿をリライトするステップです。記事数が多い人ほど、過酷な作業です。。

STORK19独自の装飾機能はSWELLでは表示されません。エディターから投稿を1つずつ修正していきましょう。

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

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

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

リライト作業が完了したタイミング以降は、不要なSTORK19のファイルを読み込む必要はありません。

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

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

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

STORK19のテーマファイルはいつでも販売元のオープンケージのサイトからダウンロードできます。削除した後に必要になっても繰り返しダウンロードすることができます。テーマ乗り換えサポートプラグインもSWELLの会員サイトからいつでもダウンロードできますので安心して削除してください。

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

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

STORK19からSWELLへの移行作業に関するFAQです。

SWELLを安く購入する方法は?

次の記事で解説しています。

STORK19専用のテーマ乗り換えサポートプラグインは無いの?

本記事を執筆時にはありません。

最新情報は、公式サイトの「テーマ乗り換えサポートプラグイン一覧」をチェックしてください。

SWELL公式サイトにあるデモサイトのようにする方法は?

デモサイトの着せ替えデータが無料で配布されています。

配布はSWELL購入者限定です。マイページにログインし、着せ替えのデザインデータをダウンロードし、自分のサイトに読み込ませましょう。

SWELLを使ったサイトで、参考になるデザインを紹介してほしい

SWELLを使ったサイトの事例集は次の記事にまとめてあります。

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

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

まとめ

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

サイト運営途中でWordPressテーマを別のテーマに変更するのはちょっと怖いと感じる人も多いと思います。正直テーマを切り替えるだけであれば、それほど難しいことではありません。問題はなんと言ってもリライトにかかる時間です。

記事数が多い人ほど、どうしても装飾を手直しするのに時間がかかります。

STORK19をクラシック環境で運営していた場合に限り、STORK用のテーマ乗り換えサポートプラグインが利用できますので乗り換えサポートプラグインを活用しましょう。

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

各テーマのバージョン

  • SWELL:バージョン 2.7.2.1
  • STORK19:バージョン 3.17.2

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

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