初心者JINからSWELLにテーマ変更しようかな?
テーマの変更って簡単かな？
移行した人の経験談を知りたい…
そんな悩みに答えます。
WordPressテーマの変更って、正直ちょっと怖いですよね？テーマ切り替え作業中にトラブルが発生したらサイトが表示されなくなるって口コミをよく見かけます。
僕はWeb制作を仕事にしています。JINからSWELLにテーマを変更した経験も当然あります。本記事ではWeb制作のプロがJINからSWELLにテーマを移行する手順と注意事項を解説します。
テーマ切り替え作業をミスなしでスムーズに行いたい人はぜひ最後までお読みください。
【基礎知識】JIN専用テーマ乗り換えサポートプラグイン
JINからSWELLにテーマを切りかる作業は、それほど難しくありません。
理由は、乗り換えサポート用プラグインがあるからです。
テーマ切り替え作業で一番のポイントはレイアウト崩れを解消するリライト作業です。JINからSWELLに乗り換えるさい専用のプラグインがあるので、あまりレイアウト崩れを気にすることなく移行作業が行なえます。
JIN乗り換えサポートプラグインについて
テーマ乗り換えサポートプラグインは、SWELLの開発者さんが作成した無料プラグインです。
JINからSWELLにテーマを切り替えるときにトラブルが発生するリスクを最小化してくれる効果があります。
WordPressテーマの移行作業をすると、次のような問題が発生します。
移行作業時に発生するトラブルの一例
- 記事の装飾が消える
- サイトのレイアウトが崩れる
- 意味不明なエラーが表示される
かんたテーマ乗り換えサポートプラグインを使うとこれらのトラブルのリスクを減らすことができます。
JINからSWELLへテーマを切り替える移行手順
ここから実践です。JINからSWELLにテーマを切り替え作業の手順についてです。
まずは全体の流れです↓
移行作業全体の流れ
- 最新版のSWELLを公式サイトからダウンロードする
- JIN用乗り換えサポートプラグインを有効化
- アナリティクス＆アドセンス広告コードのコピー
- テーマをSWELLに切り替える
- デザイン崩れを修正
- プラグインの整理
- Meta titleとdescriptionの移設
- アナリティクスの設定
- 記事のリライト
- JIN乗り換えサポートプラグインを停止・削除する
- JINのテーマを削除する
かんた作業のステップをそれぞれ解説していきます！
テーマ移行手順①：最新版のSWELLを公式サイトからダウンロードする
まずは最新バージョンのSWELLを公式サイトからダウンロードします。
SWELLを購入してない場合は、次の記事で購入方法を解説しています。
かんたまだSWELLを有効化しないでください。
テーマ移行手順②：JIN乗り換えサポートプラグインを有効化
JIN用乗り換えサポートプラグインを有効化するステップです。
SWELL公式サイトからプラグインをダウンロードし、ダッシュボード上で有効化します。
乗り換えサポートプラグインは有効化するだけです。
かんたプラグインでの追加設定はありません。
テーマ移行手順③：アナリティクス＆アドセンス広告コードのコピー
アクセス解析ツールとしてGoogleアナリティクスを利用している人向けの作業です。
サイト移行後もGoogleアナリティクスでデータを記録したい場合は、アナリティクスのコードをコピーしておきましょう。同様にGoogleアドセンスを利用している人も、このステップでコードをコピーしてください。
コピーするもの
- Googleアナリティクスのコード
- Googleアドセンスのコード
かんたテキスト形式でコピペできるようにしましょう！
Googleアナリティクスのコードをコピー
ダッシュボード上の「外観」→「カスタマイズ」→「基本設定」→「アクセス解析設定」と進み、「Google AnalyticsのトラッキングID」をコピーします。
Googleアドセンス広告のコードをコピー
カスタマイズ画面から「基本設定→」「 高度な設定」と進み、アドセンス広告のコードをメモ帳などにコピーしておきましょう。
かんたこの場所以外にコードを設定している場合は、個別にコピーしておきましょう。
テーマ移行手順④：テーマをSWELLに切り替える
WordPressテーマをJINからSWELLに切り替えるステップです。
ダッシュボード上で、SWELLを有効化します。テンプレートファイルの編集を予定している場合は、このタイミングでSWELLの子テーマを有効化してください。
ほとんどのケースで子テーマは不要です。PHPのテンプレートファイルを編集する知識とスキルがある人のみ子テーマを有効化してください。
「何それ？」って人は子テーマ化する必要はありません。
テーマ移行手順⑤：デザイン崩れを修正
テーマを切り替えるとサイトがSWELLに切り替わります。
テンション上がってあれこれ編集したくなると思いますが、この段階では我慢です。
まずは各ページをチェックして、デザインが変になっている箇所を地道に修正していきます。ページ数が多い場合、すべてリライトするには時間がかかります。
この段階では、ものすごく表示が変になっているページを優先的に修正しましょう。
確認ポイント
- ショートコードがそのまま表示されていないか？
- 吹き出しやボックスなどの装飾が変になっていないか？
- 装飾が消えていないか？
JIN用乗り換えサポートプラグインを有効化しても、表示がおかしくなる場合があります。
かんたまずは目に付く点のみを優先的に修正しましょう。
テーマ移行手順⑥：プラグインの整理
JINで使っていたプラグインを整理します。
SWELLにテーマ変更後、不要になるものを無効化して削除しましょう。
削除するプラグインは人次第です。
例えば、SWELLではブロックエディターでページを編集したいといった人は、Classic Editorプラグインを不要になります。
かんたClassic Editorプラグインや、クラシックエディターを拡張する系のプラグインは削除しましょう！
そのほかだと、目次を生成するRich Table Of ContentsプラグインもSWELLでは不要です。SWELLはテーマの目次を自動生成する機能が付いています。
不要なプラグインを停止後は、SWELL環境で利用するプラグインをインストールしましょう。
個人的には以下のプラグインについては公式サイトでも推奨しているので入れておくべきだと思います。
推奨プラグイン
SEO SIMPLE PACKはmeta周りの設定をするためのプラグインです。
| meta要素 | 説明 |
|---|---|
| meta title | 検索エンジンに表示されるタイトル部分を指定するタグ |
| meta description | 検索エンジンに表示される説明を指定するタグ |
SEO SIMPLE PACKはSWELL開発者さんが公開している無料のプラグインです。
SWELLとの相性も抜群です。
かんたブログ運営に適した機能があることからAll in One SEOよりおすすめです。
非推奨プラグイン
- Classic Editor
- Gutenberg
- Flying Scripts
- Autoptimize
- Async JavasScript
非推奨プラグインは、プラグインの設定次第でSWELLと相性が悪く不具合を発生する可能性を含んでいます。
「ネットで紹介されているから….」といった理由で、どんな効果があるか分からずインストールするのはやめましょう。
テーマ移行手順⑦：Meta titleとdescriptionの移設
このステップでは、Meta titleとdescriptionの移行方法について解説します。
解説の対象は、JINのMeta titleとdescriptionを使っていたユーザーです。All in One SEOプラグインやその他のプラグインでMeta titleとdescription情報を管理していたユーザーは、有効化しているプラグインをそのまま使い移行作業は必要ありません。
Meta titleとdescriptionはブロガーにとっても、コーポレートサイト運営者にってもお馴染みですね。
JINのMeta titleとdescriptionはテーマ固有の独自カスタムフィールドに保存されています。テーマをSWELLに切り替えただけでは反映されませんので切り替えの作業をしましょう。
SEO SIMPLE PACKを使ってMeta titleとdescription管理する場合には移設作業が必要です。
保存先のカスタムフィールド
| JIN | SWELL | |
|---|---|---|
| meta title | jin_seotitle | ssp_meta_title |
| meta description | post_desc | ssp_meta_description |
※SWELLはSEO SIMPLE PACKプラグイン有効化時
記事数が少ないサイトでは、手動でコツコツ変更しても構いません。
かんた記事数が多い場合、まとめて変更したほうが時短できます。
meta情報のカスタムフィールドはデータベースを直接操作するか、プラグインでデータベースにアクセスしまとめて変更できます。
本記事では無料の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 = 'jin_seotitle'画面右上に「Success」と表示されれば作業完了です。
Meta descriptionを移設する方法
Meta descriptionの移行方法は、Meta titleとほぼ同じです。コマンドのみ違います。
Database Adminからアクセスし、次のコマンドを実行しましょう↓
update wp_postmeta set meta_key = 'ssp_meta_description' where meta_key = 'post_desc'テーマ移行手順⑧：アナリティクスの設定
Googleアクセス解析コードの設置作業です。
ダッシュボード左手のメニュー「SEO PACK」→「Googleアナリティクス」と進み、「トラッキングID」にコードを入力します。
「設定を保存する」をクリックし、設定を保存します。
テーマ移行手順⑨：記事のリライト
記事のリライト作業を行うステップです。
JIN用テーマ乗り換えサポートプラグインの効果で装飾が普通に表示されている人も多いかと思います。
具体的な作業についてです。
リライト作業の内容
- JINの装飾機能を消す
- 装飾をSWELLの機能に置き換える
記事にあるJINの装飾を削除するか、SWELLの装飾機能に置き換えましょう。
例えば、吹き出しをすべてSWELLの吹き出し機能に置き換えるといった内容です。
ページ数が多いサイトや、JINの装飾をたくさん使っているとリライトに時間がかかります。リライト作業にかかる時間ですが、1記事あたり、15分から30分程度が目安です。
かんた地道にコツコツ作業しましょう。
テーマ移行手順⑩：JIN用乗り換えサポートプラグインを停止・削除する
記事のリライトが完了したらJIN用乗り換えサポートプラグインを停止します。
プラグインを停止後にサイト全体をチェックします。表示が崩れていたり、エラーやショートコードが表示されていないか入念にチェックしてください。
不具合を発見したら、テーマ乗り換えプラグインを有効化してリライト作業を行います。リライト作業が完了したら、ふたたびプラグインを指定してサイト全体をチェックしましょう。
かんたこの繰り返しです。
JIN用乗り換えサポートプラグインは、JINの装飾コードを残しつつSWELL用に表示を変換する役割です。
プラグインを有効化したままだとページの読み込みスピードが低下します、SWELLへの移行完了後は無効化するのがおすすめです。
2つのテーマ機能を共存させる形になるため、サイトが重くなる可能性があります。全記事をリライトした後にプラグインを無効化することをオススメします。
引用元：SWELL公式サイト
JIN用乗り換えサポートプラグインを停止した後に記事の表示を確認し、表示ズレなどの問題がなければプラグインを削除しましょう。
テーマ移行手順⑪：JINを削除する
SWELLへの移行作業が完了したタイミング移行に、JINのテーマは削除します。
WordPressは有効化しているテーマ以外を残しておくと、サイトヘルスで「停止中のテーマを削除してください」と表示されます。
JINのテーマは公式サイトから繰り返しダウンロードできるので、わざわざPCに保存する必要はありません。もし心配な場合は、PCにダウンロードして保存した後にダッシュボード上から削除しましょう。
【備考】JINからSWELLへの移行後の各種設定について
SWELL固有の設定です。テーマの移行後にしてもかまいませんが、一部の設定はテーマ移行作業と合わせて行ったほうが良いでしょう。
例えば、吹き出しです。
SWELLでは吹き出しを事前に登録し、エディター上で呼び出す仕組みです。移行作業の一環として吹き出しを置き換えるケースでは、事前に吹き出し登録をしておくのがおススメです。
吹き出しの事前登録
吹き出しはキャラクターがセリフを話すような装飾です。
ブログだと定番の装飾機能ですよね？
かんたこれが吹き出しです！
吹き出しの登録は、ダッシュボード左手メニューの「ふきだし」 →「新規ふきだし追加」と進みます。
各種設定を行います。
設定項目
- ふきだしのタイトル
- 画像
- アイコン名（アイコンの下に表示される名前）
- アイコンの枠
- ふきだしの形
- ふきだしの向き
- ふきだしの線
- ふきだしの色
必要事項を入力後は、「登録」をクリックし設定を保存すれば作業完了です。
かんたふきだしに登録できる数量に制限はありませんので好きなだけ登録しましょう！
【任意】Font Awesomeを使えるようにする
Font AwesomeはWebサイトで使えるアイコンのことです。
SWELの初期設定でFont Awesomeは読み込まれません。
外部からの不必要なファイルの読み込みをしないことでページ読み込み速度をあげることが可能なので、Font Awesomeを使わない人はこのステップは不要です。
Font Awesomeを有効化するの手順について解説します。
SWELL設定→「Font Awesome」と進み、以下いずれかを選択します。
- CSSで読み込む
- JSで読み込む
バージョンはお好みで「V6」または「V5」を選択しましょう。
V6の方が新バージョンです。僕はシンプルなV5が好きです。完全に好みの問題なので、Font Awesome公式サイトを確認して使いたいデザインを確認しつつバージョンを決めてください。
「変更を保存」をクリックし設定を保存します。
かんた以上の設定で、Font Awesomeが利用可能になりました。
【任意】jQueryの設定
jQueryを使った独自カスタマイズを予定している向けの設定です。
「よく分からない…」という人は、この設定はお勧めしません。jQueryの読み込みオプションを有効化すると、読み込むファイルが増えます。少しでもサイトを高層化したい場合に、使わないファイルは読み込むべきではありません。
jQueryの読み込みを有効化する手順についてです。
「SWELL設定」→「jQuery」タブと進み、jQueryの読み込みにチェックを入れましょう。
WordPressプラグインの中には「jQueryを強制的に読み込む」にチェックを入れておかないと、正常に動作しないものがあります。
【任意】独自CSSの管理方法
フォントや色のちょっとした調整などで、独自のCSSコードを追加するユーザー向けの解説です。
WordPressの一般的な方法として、独自のCSSはカスタマイザーの「追加CSS」コードを入力していますよね？JINもこのパターンで独自CSSを管理している人が多いと思います。
SWELLでも、カスタマイザーの追加CSSに入力しても反映されますが別のオプションが用意されています。
ダッシュボード上で「SWELL設定」→「エディター設定」→「カスタム書式」と進みます。ページを下にスクロールすると「カスタム書式用CSS」という入力エリアがあります。
このカスタム書式用CSSに入力したコードは、フロントだけでなくエディター側にも表示される仕様です↓
| オプション | 反映される場所 |
|---|---|
| 追加CSS | フロントのみ |
| カスタム書式用CSS（SWELL固有の機能） | フロントと、エディター |
追加した独自CSSがエディター側にも表示されるので、わざわざページを確認する手間が不要になります。
レイアウト系の装飾はカスタマイザー内の追加CSSに入力し、エディターにも反映させるCSSはカスタム書式に入力すると運用しやすくなります。
かんたかなり便利な機能です。
【任意】SWELLの子テーマ
SWELLの子テーマは、SWELL公式サイトからダウンロードできます。
子テーマのダウンロードはSWELL購入者限定です。
SWELLの会員サイトにログイン後、「マイページ」をクリックし、SWELL製品ダウンロード内にある「子テーマ」をクリックしましょう。
WordPressの子テーマは、SWELLに限らず必須ではありません。子テーマは、テーマフォルダ内にあるPHPテンプレートファイルをカスタマイズする上級者向けです。
「もしかしたら独自カスタマイズするかも？」という人は子テーマ化しておきましょう。
後から子テーマを有効化すると、カスタマイザーで設定した一部の設定は子テーマに継承されません。
例えば独自CSSです。元のテーマで設定していた独自CSSは、子テーマ化した場合にカスタマイザー上から消えてしまいます。
「難しいカスタマイズはしない」「カスタマイザーから設定するだけ」といった使い方をするケースでは、子テーマは不要です。
以下のカスタマイズだけなら子テーマは要りません
- プラグインをいくつか入れたい
- カスタマイザーからオプションを選択してデザインを作りたい
- 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
JINからSWELLへの移行に関するFAQです。
記事の修正ってどれくらい時間がかかるの？
記事に利用している装飾次第です。
装飾の数が多ければ修正にかかる時間が増えます。
1記事あたり15分~30分程度は目安として見積もっておきましょう。
テーマ切り替えサポートプラグインって無料？ダウンロード方法は？
テーマ切り替えサポートプラグインは無料です。
SWELL公式サイトからダウンロードできます。
SWELLのアフィリエイトはどこから参加できますか？
SWELLの公式サイト上にアフィリエイトプログラムへの参加リンクがあります。ASPはもしもアフィリエイトです。
まとめ
WordPressテーマをJINからSWELLに移行する方法を解説しました。
一般的にテーマの切り替え作業はものすごく手間がかかります。
切り替え元のテーマの装飾機能の手直しが必要なため、次のようなケースではとにかく時間がかかります。
移行に時間がかかるケース
- 記事数が多い
- テーマ固有の装飾機能を多様している記事数が多い
乗り換えサポートプラグインがあるので、JINからSWELLへテーマ切り替えに関してはJINからSWELL以外のテーマに移行するよりも楽です。
それでも、JINの装飾が完璧に切り替わるわけではないのでリライトが必要になってくる点に注意しならがら移行作業を計画しましょう。