初心者ブログテーマをAFFINGER6からSWELLに変えたい…
AFFINGER5の乗り換えサポートプラグインって、使えるの？
移行作業ってどれくらい時間かかるの？
そんなお悩みに答えます。
運用しているサイトのWordPressテーマの切り替え作業は、正しい手順を知らないとメチャクチャ苦労します。
ちなみにSWELLへの移行作業には乗り換えサポートプラグインが提供されています。
AFFINGER6専用ではありませんが、AFFINGER5用はあります。「これAFFINGER6からの移行に使えるの？」って疑問を持ったので、試しに乗り換えサポートプラグインを使いながらテーマを切り替えてみました。
じっさいにテーマAFFINGER6からSWELLに切り替えてみて「ここは初見殺し」だなと感じた点があります。本記事ではAFFINGER6からSWELLへテーマ乗り換えを経験した内容を、画像付きでシェアします。
テーマ切り替えの事前準備
今回の切り替え対象テーマはAFFINGER6からSWELLです。
テーマ切り替え前の事前準備
- バックアップ
- アナリティクスのコードをコピー
- サーチコンソールタグのコピー
- 独自CSSコードのコピー
かんたそれぞれの作業を解説します。
【事前作業①】バックアップ
何かあった場合に復旧するための準備として、ブログのバックアップを取得しましょう。とは言え、テーマをSWELLに切り替えただけでアップロード済みの画像やデータがデータベースから消えることはありません。
かんた過剰に心配する必要はありません。
WordPressには無料や有料のバックアップ系のプラグインが数多く配布されています。レンタルサーバーが標準機能で提供しているサービスもあります。
このステップの目的は復旧方法を確保することです。
「この方法以外はNG」という話ではありません。普段使っているプラグインやレンタルサーバーのサービスを使える場合は特に何もする必要はありません。
大事なポイントは、復旧方法を知っているかどうか？
バックアップはできるけど、いざという時に復旧方法が分からないものは避けてください。
どのバックアッププラグインを使っていいか分からないという人にはAll-in-One WP Migrationプラグインをおススメします。
ボタンをポチッと押すとバックアップが作成できて、ポチっとするとバックアップファイルを読み込んでサイトを復旧できる初心者にも優しい作りになっています。
ちなみに無料版はバックアップの上限があります（512MB）。バックアップデータを作成するさい、「メディアライブラリをエクスポートしない (ファイル) 」チェックを入れるとファイルサイズをかなり小さくすることができます↓
かんたそれでも上限を超える場合は有料版を購入するか、別の無料バックアッププラグインを利用してください。
【事前作業②】アナリティクスのコードをコピー
Googleアナリティクスを利用している人向けの作業です。アナリティクスのコードはSWELLに移設する必要があります。テーマ切り替え前にAFFINGER6で設定しているコードをコピーします。
「AFFINGER 管理」をクリック↓
「Google・広告 / AMP」をクリック↓
「アナリティクスコード」にあるコードをメモ帳にコピペ↓
【事前作業③】サーチコンソールタグのコピー
「AFFINGER 管理」をクリック↓
「Google・広告 / AMP」をクリック↓
「サーチコンソールHTMLタグ」にあるコードをメモ帳にコピー↓
【事前作業④】独自CSSコードのコピー
カスタマイザーに設定している独自CSSコードをメモする作業です。
「外観」→「カスタマイズ」をクリック↓
「追加CSS」をクリック↓
表示されるCSSコードをコピーし、メモ帳に貼り付けましょう。
AFFINGER6からSWELLへのテーマ切り替え作業手順
WordPressテーマをAFFINGER6からSWELLに切り替える方法をステップごとに解説していきます。
テーマ乗り換えサポートプラグイン
SWELLにはAFFINGER5用のテーマ乗り換えサポートプラグインがあります。試してみたところ、Affinger6からSWELLへの移行作業にも利用できました。
定番の「吹き出し」を例にします。
次の画像は、AFFINGER6を有効化したサイトで作成した吹き出しです↓
次の画像はAFFINGER5テーマ乗り換えサポートプラグインを有効化し、SWELLに切り替えた後の吹き出しです↓
バッチリ切り替えプラグインの効果が出ていました。クラシック環境で作った吹き出しでも、ブロックエディター環境で作成した吹き出しも同様に変換されることを確認しました。
とは言え、AFFINGER6の装飾全てが変換されるわけではありませんでした。変換されないものはリライトしなければなりません。
SWELLの購入手続き
SWELLを購入するステップです。
WordPressテーマなどのソフトウェアはごくまれに不正に転売されています。SWELLはユーザー認証が導入されているテーマです。SWELL公式サイト以外でSWELLを入手した場合、ユーザー認証ができずテーマのアップデートができません。
かんたテーマは公式サイトから購入しましょう。
公式サイトにアクセス↓
利用規約を確認し、「利用規約に同意します」にチェックを入れる↓
「SWELLを購入する」をクリック↓
カードでの支払いページで必要事項を入力し、
「\17,600支払う」をクリック↓
かんたSWELLの購入手順は、次の記事で解説しています。
SWELL会員登録作業
SWELLの会員登録を行うステップです。テーマ購入後は、必ず会員登録しましょう！
会員登録する理由とメリット
- SWELLのテーマをダウンロードできる
- SWELLの子テーマをダウンロードできる
- ユーザー認証をすることができる
- テーマ切り替えサポートプラグインをダウンロードできる
- 着せかえデザインデータがダウンロードできる
- フォーラムに質問や要望を投稿できる
- オンラインコミュニティーに参加できる
かんた会員登録する手順を解説します。
会員登録ページにアクセス。
「ユーザー名」、「メールアドレス」、「パスワード」を入力↓
メールアドレスはSWELL購入時に入力したメールアドレスのみ有効です。
それ以外のメールアドレスで会員登録することはできません。
利用規約を確認してチェックを入れた後、「登録する」をクリック↓
SWELLのテーマファイルをダウンロード
SWELLのテーマファイルをダウンロードするステップです。
マイページにアクセスし、ログインします↓
ページを下にスクロールします。
SWELL製品ダウンロード部分の「SWELL 本体最新版」にある「swell-＊-＊-＊.zip」をクリック↓
テーマの「＊」について
swell-＊-＊-＊.zipの「＊」部分はバージョン情報です。
画像とは異なる表記になっている場合がありますが、気にする必要はありません。
子テーマを利用する場合は「子テーマ」にある「swell_child.zip」をダウンロード↓
テーマファイル、子テーマファイルはzip形式のまま保存しておきます。解凍せず、そのままアップロードして使います。
MacでSafariを使っている場合の注意点
zip形式のファイルをダウンロードすると自動的に解凍されて中身が表示されることがあります。
テーマファイルのダウンロード時にZipファイルが自動解凍されないようSafariで設定を解除するか、Google Chromeなど別のブラウザでテーマファイルをダウンロードしてください。
テーマ乗り換えサポートプラグインをダウンロード
マイページにアクセスし、ログインします↓
ページを下にスクロールします。
SWELL製品ダウンロード部分の「乗り換えサポートプラグイン」にある「AFFINGER5用」をクリック↓
プラグインは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まわりの設定が行えるようになります。
AFFINGER6は、記事のMeta titleとdescriptionをテーマ内部のオプションで設定する仕様です↓
AFFINGER6で設定していたmeta設定は別のWordPressテーマに切り替えると出力されなくなります。SEO SIMPLE PACKプラグインを使うことで、SWELL切り替え後にAFFINGER6の設定をそのまま利用できるようになります。
SEO SIMPLE PACKプラグインのインストール方法を紹介します。
「プラグイン」をクリック↓
「新規追加」をクリック↓
「SEO SIMPLE PACK」でキーワード検索↓
SEO SIMPLE PACK表示されたら、「今すぐインストール」をクリック↓
かんたインストールが完了したらプラグインを有効化してください。
Googleアナリティクスコードの設定作業
アクセス解析用のコードを設定するステップです。
「SEO PACK」をクリック↓
「“Tracking ID” for UA」にアナリティクスのコードを貼り付ける↓
設定が反映されているか確認したい人は、Googleアナリティクスにログインしリアルタイムユーザーを確認しつつ自分でサイトにアクセスしてみましょう。
かんたリアルタイムユーザーの数が動いていれば設定作業は完了です。
Googleサーチコンソールの設定作業
サーチコンソールは、検索キーワード、インデックス状況などを確認できる便利なツールです。AFFINGER6で利用していない人は、テーマ切り替えを機に導入しましょう。
「SEO PACK」をクリック↓
「ウェブマスターツール」をクリック↓
「Googleサーチコンソールの認証コード」に事前作業でコピーしたコードを貼り付ける↓
ふきだしの登録作業
AFFINGER6の「会話」に相当する機能についてです。SWELLでは「ふきだし」という名前になります。
SWELLは事前にふきだしを登録しておき、ブロックエディター上から呼び出して使うという仕様になっています。ひんぱんに利用するふきだしを登録しておくことで執筆作業がスピードアップしますので、リライト開始前に登録しておきましょう。
「ふきだし」をクリック↓
「新規ふきだしの追加」をクリック↓
ふきだしの画像、ふきだしの向きなどを自由に登録しておきましょう。
Metaデータの引継ぎ作業
AFFINGER6で設定したMeta title、descriptionをSEO SIMPLE PACKプラグインに引き継ぐ作業です。ちまたでは「AFFINGER6からテーマを切り替えるとdescriptionが消える」なんて言われていますが、データベースから消えることはありません。
Metaデータの名前
| AFFINGER6 | SEO SIMPLE PACK | |
|---|---|---|
| Meta title | st_titlewords | ssp_meta_title |
| Meta descrption | st_description | ssp_meta_description |
Meta titleの引継ぎ作業
AFFINGER6で「titleタグ」を利用している人向けの作業です↓
かんたtitleタグを利用せず、記事のタイトルをそのまま使っている場合はこのステップは飛ばしてください。
AFFINGER6の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();
$affinger_meta_atnak = get_post_meta( $post_id, 'st_titlewords', true );
$ssp_meta = get_post_meta( $post_id, 'ssp_meta_title', true );
if ( empty( $ssp_meta ) && $affinger_meta_atnak ) {
return $affinger_meta_atnak;
}
return $ssp_title;
});SWELL子テーマを有効化していない環境であれば、Code Snippetsプラグインでコードを追加しても構いません。
上記フィルターフックを追加するとAFFINGER6のtitleタグで設定した内容がMeta titleとしてHTMLに出力されます。
エディター下部に表示されるSEO SIMPLE PACK設定の「このページのタイトルタグ」はカラのままですが、この状態で問題ありません↓
設定を変更したい場合はこのページのタイトルタグに入力してください。以後、入力した値がHTMLと編集画面に表示されるようになります。
ssp_output_titleフィルターフックはデータベースに保存してあるmetaデータを置換するわけではありません。先ほど紹介したコードはAFFINGER6のtitleタグの有無をチェックし、SEO SIMPLE PACKのタイトルが未入力であればAFFINGER6のtitleタグを表示するという役割です。
紛らわく感じる場合やスッキリした管理を目指したい場合は、データベース上でAFFINGER6のtitleタグキー（st_titlewords）をSEO SIMPLE PACKのキー（ssp_meta_title）に置換する方法がおススメです。
レンタルサーバーの提供しているphpMyAdminツールや、Database My Adminプラグインのいずれかでデータベースでの作業が必要になります。
以下、プラグインを使う方法を紹介します。
「プラグイン」→「新規追加」、
「Database My Admin」を検索、プラグインをインストールし有効化↓
「Database Admin」をクリック↓
WordPressで利用しているデータベースを選択↓
自分が使っているデータベースが不明な場合
表示されているどちらかのデータベースをクリックし、その中の「tables:」を確認↓
「wp_posts」などが表示されているデータベースが対象です。
先頭の「wp_」はWordPressインストール時に設定した接頭語です。クイックインストールなど、レンタルサーバーの自動インストール機能を利用した人は自動的に割り当てられています。
入力フォーム部分を選択↓
次のクエリを入力↓
update wp_postmeta set meta_key = 'ssp_meta_title' where meta_key = 'st_titlewords'「Excute」をクリック↓
画面上部に「Success」と表示されたら作業完了です。
Meta descriptionの引継ぎ作業
先ほどのMeta titleと同様の作業です。
AFFINGER6のメタデスクリプションを利用していた人向けの作業です↓
AFFINGER6のメタデスクリプションをSEO SIMPLE PACKプラグインに引き継ぐには「ssp_output_description」フィルターフックを使います↓
SWELL子テーマのfunctions.phpに貼り付ける↓
add_filter('ssp_output_description', function($ssp_description) {
$affinger_meta_atnak = get_post_meta(get_the_ID(), 'st_description', true);
$ssp_meta = get_post_meta(get_the_ID(), 'ssp_meta_description', true);
if ( empty( $ssp_meta ) && $affinger_meta_atnak ) {
return $affinger_meta_atnak;
}
return $ssp_description;
});SWELL子テーマを有効化していない環境であれば、Code Snippetsプラグインでコードを追加しても構いません。
上記フィルターフックを追加するとAFFINGER6のtitleタグで設定した内容がMeta descriptionとしてHTMLに出力されます。
SEO SIMPLE PACK設定の「このページのディスクリプション」はカラのままですが、この状態で問題ありません↓
ディスクリプションを編集したい場合は、表示したい内容を入力しましょう。以後、入力した内容がMeta descriptionとしてHTMLに表示されるようになります。
Meta title同様にフィルターフックを使わずデータを置換する方法についてです。
「プラグイン」→「新規追加」、
「Database My Admin」を検索、プラグインをインストールし有効化↓
「Database Admin」をクリック↓
WordPressで利用しているデータベースを選択↓
自分が使っているデータベースが不明な場合
表示されているどちらかのデータベースをクリックし、その中の「tables:」を確認↓
「wp_posts」などが表示されているデータベースが対象です。
先頭の「wp_」はWordPressインストール時に設定した接頭語です。クイックインストールなど、レンタルサーバーの自動インストール機能を利用した人は自動的に割り当てられています。
入力フォームを選択↓
次のクエリを入力↓
update wp_postmeta set meta_key = 'ssp_meta_description' where meta_key = 'st_description'「Excute」をクリック↓
画面上部に「Success」と表示されたら作業完了です。
独自CSSコードの移設作業
「AFFINGER6で独自CSSを書いていたけど、SWELLに移設して使いたい！」って人向けの作業です。まず、大前提ですが、AFFINGER6と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」をクリック↓
コードをコピー↓
Font Awesomeの設定作業
「SWELL設定」をクリック↓
「Font Awesome」タブを選択↓
Font Awesome読み込み設定オプションを選択↓
jQueryの設定作業
独自カスタマイズでjQueryのコードを書いている人や、jQueryの読み込みが必要なプラグインを利用しているといったケースでのみ必要な作業です。
「SWELL設定」をクリック↓
「jQuery」タブをクリック↓
jQueryの読み込みオプションを選択↓
読み込むファイルが増えるとサイトパフォーマンスが低下します。
「jQueryが必要か分からない」という人は、本作業は行わないのが無難です。
OGPの設定作業
TwitterやFacebookなどのSNSでシェアされた際の表示形式を指定するOGPの設定です。
SEO SIMPLE PACKプラグイン有効時の手順を解説します。
左側のメニューから「SEO PACK」→「OGP設定」をクリック、
OGPタグの基本設定から「画像を選択」をクリックし、任意の画像をアップロード↓
左側のメニューから「SEO PACK」→「OGP設定」をクリック、
「Twitter」を選択、カードタイプで「summary_large_image」を選択。
ASPの管理コードを設置する作業
アフィリエイトブログを運営していると、ASPから「このコードをhead内に追加して」といった指示を受けることがあります。SWELLにはテンプレートファイルを編集しなくも、コードをhead内に追加するオプションがあります。
ASP指定のコードをhead内に設置する方法を紹介します。
「外観」→「カスタマイズ」をクリック↓
「高度な設定」をクリック↓
「headタグ終了直前に出力するコード」にコードを設置↓
設定が反映されない場合
カスタマイザーの設定を有効化する場合は、保存オプションで「公開」を選択しましょう。「下書き」では設定が反映されません。
カスタマイザー内に設定したコードはLPカスタム投稿を除く、全てのページで表示されます。
特定のページだけで指定のコードを表示したい場合は、wp_headフックを使いましょう。例えばis_single()の条件を付けると記事ページだけで表示させることができます↓
サンプルコード
function kanta_sample(){
if ( is_single() ) {
echo 'コード';
}
}
add_action( 'wp_head', 'kanta_sample' );不必要なコードを読み込ませたくない人はwp_headフックを活用してください。
プラグインの整理
AFFINGER6運営時に利用していたプラグインの整理をしましょう。AFFINGER6では必要だったけど、SWELLでは不要なものを無効化し削除するステップです。
主に次のようなプラグインはSWELLでは必須ではありません。
高速化系の補助プラグイン
SWELLには高速化の設定機能が充実しています。キャッシュプラグイン、遅延読み込みといった機能のあるプラグインは必須ではありません。高速化のスキルと知識のある人は、SWELLの高速化機能とプラグインを組み合わせて運営しても構いません。
あまり高速化の専門知識がない場合はプラグインを使わず、SWELLの高速化オプションを優先的に活用しましょう。
SEO関連プラグイン
Meta周りの設定に関しては、SWELL開発者さんが提供しているSEO SIMPLE PACKをおススメします。機能が重複するSEO系のプラグインは不要です。
エディター補助プラグイン
エディター補助系のプラグインもSWELLでは必須ではありません。SWELLはブロックエディター対応テーマです。Classic EditorやClassic Editorの拡張プラグインは不要です。
目次生成プラグイン
SWELLのテーマ内に目次自動生成機能があります。目次生成プラグインは機能が重複するので不要です。
かんた自分のサイト運営にあわせて見直してください。
頻繁に使い回すパーツの登録作業
ブログ執筆時にを効率的に作業を進めたいなら「ブログパーツ」を登録しましょう。ブログパーツはSWELLの独自ブロックの1つです。繰り返し利用する画像や文章を事前登録し、呼び出して使うことができます。
AFFINGER6にはブログパーツに相当する機能はありませんので、具体例を紹介します。以下の画像は、当ブログ記事の先頭に表示させている著者プロフィールです↓
このパーツはブログパーツに登録しており、いつでも好きな場所に表示させることができます。
ブログパーツの優れている点はメンテナス性です。例えば、僕のプロフィールだと「IT業界歴22年」と表記しています。これを23年に変する場合、ブログパーツ管理ページ上で変更するだけで、このブログパーツを埋め込んでいる全てのページで一括変更できる仕組みです。
ブログパーツを使わず全ページに著者情報を手入力していたら、直すのはものすごく大変ですよね？
ブログパーツは著者プロフィール以外にもアフィリエイトリンクを管理するといった用途にも使えます。アフィリエイトリンクって、英文字や記号を含むので覚えているのは不可能。わざわざASPにログインして、リンクをコピーするのって面倒です。
かんたブログパーツで管理しておけば大幅な時短になり、ミスも起きません。
ブログパーツの登録方法を紹介します↓
「ブログパーツ」→「新規追加」をクリック↓
エディターが開くので、自由にパーツを作りましょう↓
ブログパーツが表示されない場合
「SWELL設定」→「機能停止」、「ブログパーツを停止」のチェックを外す。
SWELLER’Sオンラインコミュニティーへの参加
SWELLにはSWELL公式のユーザーコミュニティーがあります。ユーザー間での情報共有、サイト運営などの雑談を行えるクローズな環境です。
参加費や月額料金といった費用は一切ありません。オンラインタイプでアプリなどのインストールも不要なので気軽に参加しましょう。
オンラインコミュニティーへの参加方法を紹介します。
オンラインコミュニティーはAFFINGERにはないサービスなので、少しとまどうかもしれません。SWELL開発者さんも積極的にコメントしているので、「どんなやり取りをしているかな～」といった程度でのぞいてみてください。
記事のリライト作業
エディターで投稿をリライトするステップです。エディターでページを開き、AFFINGER6固有の装飾をSWELLの装飾に変更していきましょう。
最終的にすべての装飾を置き換える必要がありますが、記事数に応じて次のようにリライトを進めるのがおススメです。
リライトの進め方
| 記事数 | |
|---|---|
| 少ない（30記事未満） | 1記事ずつ完全にリライトする。 |
| 多い（30記事以上） | 表示されない装飾、表示が一部おかしくなっているものだけ優先的にリライトする。（正常に表示されているものは優先度低めで後回し）。 |
テーマ乗り換えサポートプラグインを有効化すると、装飾の一部は正常に表示されます。記事数が多い場合は、無事に変換されている装飾は後回しにして、表示が一切されなくなっている装飾などを優先するとテーマ切り替えのダメージを抑えることができます。
乗り換えサポートプラグインの停止
記事のリライトが完了したら、テーマ乗り換えサポートプラグインを停止しましょう。テーマ乗り換えサポートプラグインは移管中にAFFINGER6のファイルを読み込んでいるためパフォーマンスに影響が出ます。
かんたリライト作業が完了したら、不要なAFFINGER6のファイルを読み込む必要はありません。
乗り換えサポートプラグイン停止後は、キャッシュをクリアし全ページのチェックです。大事なことなので、もう一度言いいます。
キャッシュをクリア！
キャッシュをクリアしないと、プラグイン有効時のページが表示される可能性があります。十分な確認ができないので、必ずキャッシュをクリアした後に全ページを確認しましょう。
乗り換えサポートプラグインとAFFINGER6の削除
AFFINGER6とテーマ乗り換えサポートプラグインを削除しましょう。
WordPressは有効化していないテーマとプラグインがあると、ダッシュボードのサイトヘルス上で警告が表示されます。
テーマ切り替えに関するFAQ
AFFINGER6からSWELLへの移行作業に関するFAQです。
SWELLを安く購入する方法は？
次の記事で解説しています。
AFFINGER6専用のテーマ乗り換えサポートプラグインは無いの？
SWELL公式サイトにあるデモサイトのようにする方法は？
デモサイトの着せ替えデータが無料で配布されています。
配布はSWELL購入者限定です。マイページにログインし、着せ替えのデザインデータをダウンロードし、自分のサイトに読み込ませましょう。
SWELLを使ったサイトで、参考になるデザインを紹介してほしい
SWELLを使ったサイトの事例集は次の記事にまとめてあります。
SWELLにはアフィリエイトがあると聞きましたが、どこから参加できますか？
もしもアフィリエイトが取り扱いASPです。
テーマ切り替えにかかる時間はどれくらい？
テーマを切り替えるだけなら数秒です。
記事のリライトに時間がかかるため、記事数の多いサイトほど移行に時間がかかります。装飾の数にもよりますが、1記事あたり15分程度は見積もっておきましょう。
テーマ切り替え時のトラブル対応について
AFFINGER6からSWELLへの移行作業で、次のようなトラブルが発生した場合の対応方法についてです。
トラブルの一例
- サイトが真っ白になった
- ダッシュボードにログインできない
- カスタマイザーで設定時に保存できない
SWELLの要件にあった環境かをチェックする
AFFINGER6からSWELLへのテーマ切り替え後、サイトが真っ白になってしまうようなケースはSWELLの動作環境を満たしていないのがほとんどの原因です。
以下、SWELLが動作する推奨環境です。
| PHP | PHP 7.3 以上 |
| WordPress | WordPress 5.9 以上 (推奨：6.1 ~) |
バージョンアップする場合はPHPが先です。WordPress本体にも推奨のPHPがあるため、推奨未満のPHPバージョンだとWordPressが表示されなくなるなど不具合が発生します。
PHPのバージョンアップ方法
PHPのバージョンアップはレンタルサーバーのコントロールパネルで行います。基本的にボタンをポチポチするだけです。プログラムコードの編集などはありませんので、初心者の人でもPHPのバージョンアップは簡単です。
以下、代表的なレンタルサーバー各社のマニュアルです。
公式マニュアル
プラグインが干渉している
サイトで有効化しているプラグインが原因でサイトに不具合が発生することがあります。対処方法として、どのプラグインがトラブルの原因になっているかを特定する必要があります。
トラブルの元となるプラグインを特定するため、次の流れでプラグインを１つづつ停止します。
作業の流れ
- プラグインを停止
- キャッシュをクリア
- 表示・動作を確認する
プラグインを全て同時に停止してしまうと、どのプラグインがトラブルの原因かを特定することはできません。１つずつ順番に停止して確認してください。
逆の流れですべてプラグインを停止して、１つづつ有効化するといった流れでも構いません。
問題のプラグインを特定した後についてです。どうしてもプラグインを利用したい場合、プラグインの最新バージョンがないかチェックしましょう。
最新バージョンのプラグイン利用しても使えない場合、SWELLとの相性が悪いのか、その他のプラグインが干渉している可能性があります。
かんたデフォルトテーマに切り替えて正常に動作するかチェックしてみてください。
WAFの影響
カスタマイザーで設定を保存しようすると「何かうまくいかなかったようです。」と表示されるケースについてです。テーマをSWELLに切り替え後、アドセンスやアナリティクスのコードをカスタマイザーに貼り付けようとすると発生することがあります。
主な原因は次の通りです。
エラーの原因
- レンタルサーバーのWAF
- セキュリティー系のプラグイン
WAF（Web Application Firewall）は簡単に説明するとセキュリティー機能のことです。不正なアクセスを察知し、ハッキングなどからサイトを守ってくれるありがたい存在。エックスサーバーや、ConoHa WINGなど共有レンタルサーバーだと標準的に有効化されている機能です。
カスタマイザーにコードを貼ると、WAFが「攻撃されている」と誤検知してしまうことが原因でカスタマイザーでの作業ができないことがあります。
SWELLのサポートフォーラムを見ていると、WAFの誤検知に関する投稿をチラホラ見かけます。特にConoHa WINGを利用しているユーザーさんが多いなという印象です。
WAFを一時的に無効化するか、チューニングすることで改善します。
以下、レンタルサーバー会社のWAF関連マニュアルです。
公式マニュアル
レンタルサーバーによりけりですが、WAFは切り替えの設定から反映まで10分以上かかることがあります。お名前.comでは反映に数時間かかります。
正直ちょっとした作業をするのに、数時間も待ちたくありません。ですが、面倒だからと言ってWAFを無効化しっぱなしの状態はセキュリティー上望ましくありません。一時的にWAFを無効化した場合は、有効化することを忘れないよう注意しましょう。
かんた基本的にWAFを有効化した状態で運営することをおススメします。
SWELLサポートフォーラムを活用する
テーマ切り替え後になんらかのトラブルが発生した場合の対応アプローチをいくつか紹介しました。どうしても自分ひとりで解決できない場合は、SWELLのサポートフォーラムを利用しましょう。
AFFINGERにはサポートはありませんが、SWELLにはサポートフォーラムがあります。過去のトラブル事例を読むことができるので、自己解決のヒントが見つかるかもしれません。
それでも解決できない場合は、トラブルの内容をフォーラムに投稿しましょう。
サポートフォームでの相談は無料です。サポート範囲内のことであればテーマ開発者さん他、有志のメンバーから回答をもらえます。
SWELLのサポートフォーラムに投稿する方法を紹介します。
マイページからログイン↓
「SWELLに関する質問」をクリック↓
「トピックを追加」をクリック↓
必要事項を入力↓
問題が確認できるページのURL
URLの記載があると、SWELLテーマ開発者さんや有志のメンバーはサイトを直接確認することができます。URLを入力するとトラブル解決が早くなる可能性が高まります。
「トピックを追加」をクリック↓
以上でトピックが投稿されます。
まとめ
WordPressテーマをAFFINGER6からSWELLに切り替える手順を解説しました。
サイト運営途中でWordPressテーマを別のテーマに変更するのはちょっと怖いと感じる人も多いと思います。正直テーマを切り替えるだけであれば、それほど難しいことではありません。
テーマ切り替えで一番ネックになるのが、リライトにかかる時間です。
記事数が多い人ほど、どうしても装飾を手直しするのに時間がかかります。
AFFINGER6からSWELLへの切り替え作業については、テーマ乗り換えサポートプラグインを使うことで、テーマ切り替え中でも装飾が表示されます。すべての装飾が表示されるわけではありませんが、移行期間中のダメージを最小限に抑えることができるので何もないよりは使った方が良いでしょう。
かんた本記事が皆さんのお役に立てば幸いです。
SWELLとAFFINGER6は本記事執筆時に利用可能な下記最新バージョンで検証しています。
各テーマのバージョン
- SWELL：バージョン 2.7.2.1
- AFFINGER6：バージョン 20221122
異なるバージョンについては、キャプチャ画像や解説の内容が違うケースがありますのでご注意ください。