初心者SANGOからSWELLにテーマを切り替えたい…
移行作業した人のブログを読みたい…
レイアウトって崩れるか心配….
そんな悩みに答えます。
本記事ではSANGOからSWELLにテーマを移行する手順と注意事項をテーマ切り替え経験者の目線で解説します。
【基礎知識】SANGO専用テーマ乗り換えサポートプラグイン
WordPressテーマを切り替える作業は正直いって大変です。
ですが、SANGOからSWELLにテーマへの移行作業は、それほどハードルは高くありません。
理由はSANGO専用のテーマ乗り換えサポートプラグインを、SWELL開発会社が無料で提供しているからです。
テーマ切り替え作業で一番の問題はレイアウト崩れを解消する地味なリライト作業です。技術的に難しいことは特にありません。
とにかくリライト。
SANGOで使っていた装飾をSWELLの装飾に切り替えるという作業が必要です。
テーマ乗り換えサポートプラグインはSANGOの装飾をSWELLでも表示する効果があります。レイアウト崩れを気にすることなく移行作業が行なるのでぜひ活用しましょう。
SANGO乗り換えサポートプラグインについて
WordPressテーマの切り替え作業をすると、次のような問題が発生します。
発生するトラブルの一例
- 記事のレイアウトが変になる
- プログラムコードが表示される
- 元テーマの装飾が消える
かんたSANGOのテーマ乗り換えサポートプラグインを活用すると移行時のレイアウト崩れを最小に限定できます。
SANGOからSWELLへテーマを切り替える移行手順
SANGOからSWELLにテーマを切り替え作業の手順についてです。
まずは全体の流れです↓
全体の流れ
- 最新版のSWELLを公式サイトからダウンロードする
- SANGO乗り換えサポートプラグインを有効化
- アナリティクス＆アドセンス広告コードのコピー
- テーマをSWELLに切り替える
- デザイン崩れを修正
- プラグインの整理
- Meta titleとdescriptionの移設
- アナリティクスの設定
- 記事のリライト
- SANGO乗り換えサポートプラグインを停止・削除する
- SANGOのテーマを削除する
かんた作業のステップをそれぞれ解説していきます！
テーマ移行手順①：最新版のSWELLを公式サイトからダウンロードする
まずは最新版のSWELLを更新サイトからダウンロードしましょう。
SWELLを購入してない場合は次の記事で購入方法を解説しています。
かんたこの段階ではまだSWELLを有効化しません。
テーマ移行手順②：SANGO乗り換えサポートプラグインを有効化
SANGO乗り換えサポートプラグインを有効化するステップです。
乗り換えサポートプラグインは有効化するだけです。プラグインでの設定はありません。
テーマ移行手順③：アナリティクス＆アドセンス広告コードのコピー
「SWELLにテーマ切り替え後、アクセスが0になった！」。
たまにこういったツイートを見かけます。Googleアナリティクスコードの移設を忘れていることが原因です。アクセス解析にGooglアナリティクスを利用している人は、忘れず作業しましょう。
かんたアドセンス広告のコードも一緒にコピーしておきましょう！
アナリティクスのコードをコピー
「外観」→「カスタマイズ」→「基本設定」→「アクセス解析設定」と進み、「Google AnalyticsのトラッキングID」をコピーして、メモ帳などのアプリに貼り付けておきます。
アドセンス広告のコードをコピー
カスタマイズ画面から「基本設定→」「 高度な設定」と進み、アドセンス広告のコードをメモ帳などにコピーしておきましょう。
かんたこの場所以外にコードを設定している場合は、個別にコピーしておきましょう。
テーマ移行手順④：テーマをSWELLに切り替える
WordPressサイト上でテーマをSANGOからSWELLに切り替えるステップです。
テーマからSWELLを有効化をクリック。
この段階ではSANGOのテーマは削除せず、そのままにしておきます。
テーマ移行手順⑤：デザイン崩れを修正
テーマを切り替えるとあれこれ試したくなると思いますがいったん保留。
まずは各記事をチェックしてデザインや表示が変になっている箇所を修正していきます。
SANGO乗り換えサポートプラグインを有効化していても、独自のカスタマイズをしていた場所などは変な表示になる可能性があります。
チェックポイント
- ショートコードなどのプログラムコードがそのまま表示されていないか？
- 装飾が乱れていないか？
- 装飾が消えていないか？
かんた後ほど全記事をリライトすることになりますが、まずは目に付く点のみを優先的に修正しましょう。
テーマ移行手順⑥：プラグインの整理
SANGOで使っていたプラグインでSWELL移行後に不要になるものを無効化して削除しましょう。
SANGOで必須だったClassic Editorプラグインですが、SWELLでは必要ありません。SWELLはブロックエディター環境でSWELLオリジナルの装飾機能が使えます。
かんたClassic Editorプラグインや、クラシックエディターを拡張する系のプラグインは削除しましょう！
不要なプラグインを停止後は、SWELL環境で利用するプラグインをインストールしましょう。
SWELLには「これは絶対いれないとダメ」というプラグインはありません。
個人的には以下のプラグインについては公式サイトでも推奨しているので入れておくべきだと思います。
推奨プラグイン
SEO SIMPLE PACKはmeta周りの設定をするためのプラグインです。
同じような機能を持つプラグインとしてはAll in One SEOのほうが有名です。SEO SIMPLE PACKはSWELL開発者さんが公開している無料のプラグインで、SWELLとの相性も抜群です。
All in One SEOは機能が豊富ですが、正直いってブログ運営で使わない機能を含んでいます。もともとの開発言語が英語。日本語化されていますが、ちょっと微妙な表現で初心者には分かりにくい点があります。
SEO SIMPLE PACKはSWELL開発者さんが作ったものなので、プラグインページの用語や説明も読みやすく理解しやすいのがメリット。
かんたブログ運営に適した機能があることからAll in One SEOよりおすすめです。
非推奨プラグイン
- Classic Editor
- Gutenberg
- Flying Scripts
- Autoptimize
- Async JavasScript
非推奨プラグインは、設定次第でSWELLと相性が悪く不具合を発生する可能性を含んでいます。
「ネットで紹介されているから….」といった理由で、どんな効果があるか分からずインストールするのはやめましょう。
テーマ移行手順⑦：Meta titleとdescriptionの移設
Meta titleとdescriptionは検索結果に表示される情報です。
SANGOのMeta titleとdescriptionは独自カスタムフィールドに保存されているので、SWELLに切り替えただけでは反映されません。
SEO SIMPLE PACKを使って管理する場合には移設作業が必要です。
保存先のカスタムフィールド
| SANGO | SWELL | |
|---|---|---|
| meta title | sng_title | ssp_meta_title |
| meta description | sng_meta_description | ssp_meta_description |
記事数が少ない場合は手動でコツコツ変更しても構いませんが、記事数が多い場合は一括変換したほうが楽です。
カスタムフィールドはデータベースに保存されています。データベースを直接操作するか、プラグインでデータベースにアクセスしまとめて変更することが可能です。
本記事では無料のDatabase My Adminプラグインを使う方法を紹介します。
Database My AdminプラグインはWordPresssプラグインディレクトリーに登録されています。WordPressサイト上で「プラグイン」→「新規追加」と進み、Database My Adminと検索するとヒットします。
Database My Adminプラグインを有効化した後、次のステップに進んでください。
Meta titleを移設する方法
ダッシュボード左手の「Database Admin」をクリック↓
Select Databaseから対象のデータベースを選択↓
2つデータベースが表示されている場合はどちらかいずれかのデータベースをクリックし、次のページで表示される「tables:」の中身を確認します。
「wp」などのプレフィックスが付いている方です。
「SELECT * FROM」と表示されている入力フォーム部分を選択し、表示されている「SELECT * FROM」を消してカラにします↓
次のコマンドを入力し、フォーム下部の「Excute」をクリックします。
update wp_postmeta set meta_key = 'ssp_meta_title' where meta_key = 'sng_title'画面右上に「Success」と表示されれば作業完了です。
Meta descriptionを移設する方法
やり方はMeta descriptionの移行方法は、Meta titleとほぼ同じです。コマンドのみ違います。
Database Adminからアクセスし、次のコマンドを実行しましょう↓
update wp_postmeta set meta_key = 'ssp_meta_description' where meta_key = 'sng_meta_description'テーマ移行手順⑧：アナリティクスの設定
Googleアクセス解析コードの設置作業です。
ダッシュボード左手のメニュー「SEO PACK」→「Googleアナリティクス」と進み、「トラッキングID」にコードを入力します。
「設定を保存する」をクリックし、設定を保存します。
テーマ移行手順⑨：記事のリライト
リライト、つまり修正作業です。SANGOからSWELLに切り替えた後、テーマ乗り換えサポートプラグインの効果で装飾が普通に表示されている場合でもこの作業が必要です。
記事内にあるSANGOの装飾を削除するか、SWELLの装飾機能に置き換えましょう。記事数が多い場合やSANGOで装飾を多用していると時間がかかります。
かんた地道にコツコツ作業しましょう。
テーマ移行手順⑩：SANGO乗り換えサポートプラグインを停止・削除する
記事のリライトが完了したらSANGO乗り換えサポートプラグインを停止します。
SANGO乗り換えサポートプラグインは、SANGOの装飾コードを残しつつSWELL用に表示を変換する役割です。
SANGOの装飾がSWELLの装飾に完全に変換されるわけではありません。
プラグインを有効化したままだとページの読み込みスピードが低下します、SWELLへの移行完了後は無効化するのがおすすめです。
かんたSWELL公式サイトの引用です↓
2つのテーマ機能を共存させる形になるため、サイトが重くなる可能性があります。全記事をリライトした後にプラグインを無効化することをオススメします。
引用元：SWELL公式サイト
SANGO乗り換えサポートプラグインを停止した後に記事の表示を確認し、表示ズレなどの問題がなければプラグインを削除しましょう。
テーマ移行手順⑪：SANGOを削除する
SWELLへの移行が完全に終了した段階でSANGOのテーマは削除して構いません。
WordPressは有効化しているテーマ以外を残しておくと、サイトヘルスで「停止中のテーマを削除してください」と表示されます。
「また使うかも？」という人も心配いりません。
SANGOのテーマファイルは購入サイトから最新版を繰り返しダウンロードできます。
【備考】SANGOからSWELLへの移行後の各種設定について
テーマの以降後、または並行して行う設定作業です。
ふきだしの登録
ブログ記事の装飾機能、「ふきだし」を使う人向けの設定です。
かんたこれがふきだしです！
SWELLのふきだしは事前登録し、投稿内で呼び出すことができる仕組みになっています。
ふきだしの登録は、メニューの「ふきだし」 →「新規ふきだし追加」と進みます。
各種設定を行います。
設定項目
- ふきだしのタイトル
- 画像
- アイコン名（アイコンの下に表示される名前）
- アイコンの枠
- ふきだしの形
- ふきだしの向き
- ふきだしの線
- ふきだしの色
必要事項を入力後は、「登録」をクリックし設定を保存すれば作業完了です。
かんたふきだしに登録できる数量に制限はありませんので好きなだけ登録しましょう！
Font Awesomeを使えるようにする
SWELLでFont Awesomeは初期設定で読み込まれません。
外部からの不必要なファイルの読み込みをしないことでページ読み込み速度をあげることが可能なので、Font Awesomeを使わない人はこのステップは不要です。
Font Awesomeを有効化するの手順についてです。
SWELL設定→「Font Awesome」と進み、以下いずれかを選択します。
- CSSで読み込む
- JSで読み込む
バージョンはお好みで「V6」または「V5」を選択しましょう。
「変更を保存」をクリックし設定を保存します。
jQueryの設定
jQueryを使った独自カスタマイズを予定している向けの設定です。
「SWELL設定」→「jQuery」タブと進み、jQueryの読み込みにチェックを入れましょう。
WordPressプラグインの中には「jQueryを強制的に読み込む」にチェックを入れておかないと、正常に動作しないものがあります。
独自CSSの管理方法
独自のCSSを追加する場合についてです。
SANGOを利用した時、カスタマイザーの「追加CSS」に独自のコードを入力していますよね？SWELLでも、カスタマイザーの追加CSSに入力しても反映されますが別のオプションが用意されています。
「SWELL設定」→「エディター設定」→「カスタム書式」にある「カスタム書式用CSS」です。このカスタム書式用CSSに入力したコードは、フロントだけでなくエディター側にも表示される仕様です↓
| オプション | 反映される場所 |
|---|---|
| 追加CSS | フロントのみ |
| カスタム書式用CSS | フロントと、エディター |
追加した独自CSSがエディター側にも表示されるので、わざわざページを確認する手間が不要になります。
SWELLの子テーマ
SWELLの子テーマは、SWELL公式サイト上にあります。
会員サイトにログイン後、「マイページ」のSWELL製品ダウンロード内にある「子テーマ」からzip形式の子テーマをダウンロードできます。
WordPressの子テーマは、SWELLに限らず必須ではありません。子テーマは、テーマフォルダ内にあるPHPテンプレートファイルをカスタマイズする人向けです。
カスタマイザーなどの管理画面から設定するだけといったカスタマイズであれば、利用する必要はありません。
以下のカスタマイズだけなら子テーマは要りません
- プラグインをいくつか入れたい
- カスタマイザーからオプションを選択してデザインを作りたい
- CSSをいくつか修正したい
OGPの設定
OGPはTwitterなどのSNSに記事のURLが投稿された時に表示される情報のことです。
OGPに関しては何も設定しなくても記事で設定したアイキャッチ画像が表示されますが、設定し忘れたさいに表示させるデフォルト画像と、SNSのタイムラインに表示されるが画像サイズの変更方法を紹介します。
デフォルト画像の設定方法
デフォルト画像は、固定ページや投稿記事にアイキャッチ画像が未設定の時に表示される画像です。
「SEO PACK」→「OGP設定」と進み「基本設定」で画像を設定します。
設定後、「設定を保存する」をクリックし保存します。
OGP画像の表示サイズ変更方法
「SEO PACK」→「OGP設定」と進み「Twitter」タブを選択します。
カードタイプから任意の設定を選択します。
| 設定オプション | 内容 |
|---|---|
| summary | デフォルト（129×129）設定 |
| summary_large_image | 表示サイズを最大化（504×264）する設定 |
かんた「大きい方が目立つ！」僕は「summary_large_image」をおすすめします！
テーマ切り替えに関するFAQ
SANGOからSWELLへの移行に関するFAQです。
記事の修正ってどれくらい時間がかかるの？
記事に利用している装飾次第です。
装飾の数が多ければ修正にかかる時間が増えます。
1記事あたり5分~15分程度は目安として見積もっておきましょう。
SANGOテーマ切り替えサポートプラグインって無料？ダウンロード方法は？
SANGOテーマ切り替えサポートプラグインは無料です。
SWELL公式サイトからダウンロードできます。
SWELLのアフィリエイトはどこから参加できますか？
SWELLの公式サイト上にアフィリエイトプログラムへの参加リンクがあります。ASPはもしもアフィリエイトです。
まとめ
WordPressテーマをSANGOからSWELLに移行する方法を解説しました。
一般的にテーマの切り替え作業はものすごく手間がかかります。
切り替え元のテーマの装飾機能の手直しが必要なため、次のようなケースではとにかく時間がかかります。
移行に時間がかかるケース
- 記事数が多い
- テーマ固有の装飾機能を多様している記事数が多い
乗り換えサポートプラグインがあるので、SANGOからSWELLへテーマ切り替えに関してはSANGOからSWELL以外のテーマに移行するよりも楽です。
それでも、SANGOの装飾が完璧に切り替わるわけではないのでリライトが必要になってくる点に注意しならがら移行作業を計画しましょう。