初心者WordPressテーマをSTORK19からSWELLに乗り換えたい….
正しい手順を知りたい…
STORKの乗り換えサポートプラグイン使えるのかな？
そんな疑問に答えます。
運用しているサイトのWordPressテーマの切り替え作業は、正しい手順を知らないとメチャクチャ苦労します。
本記事ではSTORK19からSWELLへテーマ乗り換えを経験した内容を画像付きで解説します。
ちなみにSWELLへの移行作業には乗り換えサポートプラグインが提供されています。STORK19用はありませんが、STORK用はあります。運用状況によってはSTORK用のテーマ乗り換えサポートプラグインが利用できるので、プラグインを使った移行方法についても紹介します。
テーマ切り替えの事前準備
今回の切り替え対象テーマはSTORK19からSWELLです。
テーマ切り替え前の事前準備
- バックアップ
- アナリティクスのコードをコピー
- 独自CSSコードのコピー
かんたそれぞれの作業を解説します。
【事前作業①】バックアップ
何かあった時のためにサイトのバックアップを取得しましょう。とは言え、テーマをSWELLに切り替えただけでデータがデータベースから消えることはありません。
かんた過剰に心配する必要はありません。
WordPressにはバックアップ系のプラグインが数多く配布されています。「これじゃないとダメ」という話ではありませんので、普段使っているプラグインがあれば、移行前にバックアップを取得しましょう。
大事なポイントは、復旧方法を知っているプラグインを使うことです。
バックアップファイルの使い方が分からないプラグインは避けましょう。
どのバックアッププラグインを使っていいか分からないという人にはAll-in-One WP Migrationプラグインをおススメします。無料版はバックアップの上限が512MBなので、これより大きなサイズをバックアップしたい場合は有料版を購入するか、別の無料バックアッププラグインを利用してください。
【事前作業②】アナリティクスのコードをコピー
Googleアナリティクスを利用している人向けの作業です。アナリティクスのコードはSWELLに移設する必要があります。テーマ切り替え前にSTORK19で設定しているコードをコピーします。
「外観」→「カスタマイズ」をクリック、
「アクセス解説コード・headタグ」をクリック↓
「Google Analyticsタグ」をクリック↓
「GoogleAnalytics解析コード」にあるコードをメモ帳にコピペ↓
【事前作業③】独自CSSコードのコピー
カスタマイザーに設定している独自CSSコードをメモする作業です。
「外観」→「カスタマイズ」をクリック↓
「追加CSS」をクリック↓
表示されるCSSコードをコピーし、メモ帳に貼り付けましょう。
STORK19からSWELLへのテーマ切り替え作業手順
テーマをSTORK19からSWELLに切り替える方法をステップごとに解説していきます。
テーマ乗り換えサポートプラグイン
SWELLにはSTORK用のテーマ乗り換えサポートプラグインがあります。試してみたところ、STORK19からSWELLへの移行作業にも利用できました。ただし、STORK19をクラシックエディターで運用していた場合に限ります。
定番の「吹き出し」を例にします。
次の画像は、STORK19で設定した吹き出しです↓
次の画像はSTORKテーマ乗り換えサポートプラグインを有効化し、SWELLに切り替えた後の吹き出しです↓
ふきだしの装飾はSWELL用に変換されて表示されます。同じように、STORK19で設定した次の装飾もSWELLに切り替えた後でも表示されました。
乗り換えプラグインで変換できた装飾の一例
- 関連記事：[kanren]
- 補足説明：[aside]
- 注意説明：[aside type=”warning”]
- シンプルな枠：[aside type=”boader”]
- ボックス：[box]
- カラム：[colwrap]
STORKとSTORK19で利用できるショートコードは共通しています。そのため、STORK用のテーマ乗り換えサポートプラグインはSTORK19で利用できます。クラシックエディター環境で利用している人はぜひ活用しましょう。
SWELLの購入
SWELLを購入するステップです。
WordPressテーマなどのソフトウェアはごくまれに不正に転売されています。SWELLはユーザー認証が導入されているテーマです。SWELL公式サイト以外でSWELLを入手した場合、ユーザー認証ができずテーマのアップデートができません。
かんたテーマは公式サイトから購入しましょう。
公式サイトにアクセス↓
利用規約を確認し、「利用規約に同意します」にチェックを入れる↓
「SWELLを購入する」をクリック↓
カードでの支払いページで必要事項を入力し、
「\17,600支払う」をクリック↓
かんたSWELLの購入手順は、次の記事で解説しています。
会員登録
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 SIMPLE PACK表示されたら、「今すぐインストール」をクリック↓
かんたインストールが完了したらプラグインを有効化してください。
アナリティクスコードの設定
アクセス解析用のコードを設定するステップです。
「SEO PACK」をクリック↓
「“Tracking ID” for UA」にアナリティクスのコードを貼り付ける↓
ふきだしの登録
SWELLでは事前にふきだしを登録しておき、ブロックエディター上から呼び出して使うという仕様になっています。ひんぱんに利用するふきだしを登録しておくことで執筆作業がスピードアップします。
「ふきだし」をクリック↓
「新規ふきだしの追加」をクリック↓
ふきだしの画像、ふきだしの向きなどを自由に登録しておきましょう。
Meta データの移設
All in One SEOプラグインで設定していたmetaデータをSEO SIMPLE PACKプラグイン環境に移設する作業手順についてです。
次のコードの「サイト名」を自分のサイト名に変更し、SWELL子テーマのfunction.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」をクリック↓
コードをコピー↓
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」を選択。
記事のリライト
エディターで投稿をリライトするステップです。記事数が多い人ほど、過酷な作業です。。
STORK19独自の装飾機能はSWELLでは表示されません。エディターから投稿を１つずつ修正していきましょう。
乗り換えサポートプラグインの停止
記事のリライトが完了したら、テーマ乗り換えサポートプラグインを停止しましょう。テーマ乗り換えサポートプラグインは移管中にSTORK19のファイルを読み込んでいるためパフォーマンスに影響が出ます。
リライト作業が完了したタイミング以降は、不要なSTORK19のファイルを読み込む必要はありません。
乗り換えサポートプラグインとSTORK19の削除
STORK19とテーマ乗り換えサポートプラグインを削除しましょう。
WordPressでは有効化していないテーマとプラグインがあると、ダッシュボードのサイトヘルス上で警告が表示されます。
STORK19のテーマファイルはいつでも販売元のオープンケージのサイトからダウンロードできます。削除した後に必要になっても繰り返しダウンロードすることができます。テーマ乗り換えサポートプラグインもSWELLの会員サイトからいつでもダウンロードできますので安心して削除してください。
テーマ切り替えに関する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
異なるバージョンについては、キャプチャ画像や解説の内容が違うケースがありますのでご注意ください。
