初心者テーマの切り替えって簡単なの？
切り替えに必要な作業を知りたい？
初心者でもできるの？
そんな疑問に答えます。
運営しているWordPressサイトでテーマを切り替えるのは正直ちょっと面倒ですよね？初めてテーマを切り替える人にとっては、どんな作業をすれば良いか分からないのが当然です。
ボクはLightningからSWELLにテーマを切り替えた経験があります。この記事では経験談をもとにテーマ切り替え作業の手順とその方法をシェアします。
かんたちなみに、移行対象のテーマはSWELLです。
【事前準備】WordPressテーマ切り替え前にやるべきこと
WordPressテーマをLightningからSWELLに切り替え前の作業です。Lightningは無料のものでも、G3環境のものでも作業自体は同じです。
テーマ切り替え前の事前準備
- Googleアナリティクスのコードをコピー
- 独自CSSコードのコピー
かんたそれぞれの作業を解説します。
【事前作業①】Googleアナリティクスのコードをコピー
サイトのアクセス記録をGoogleアナリティクスで管理しているユーザー向けの作業です。テーマ切り替え前にダッシュボードでGoogleアナリティクスのコードをコピーします。
Lightningの推奨プラグイン「VK All in One Expansion Unit」を使っている場合の手順を紹介します。
VK All in One Expansion Unitプラグイン以外の方法でGoogleアナリティクコードを管理している場合でも、Googleアナリティクスコードをメモ帳にコピーしておきましょう。
「ExUnit」をクリック↓
Google Analyticsの「設定」をクリック↓
Google Analytics設定のコードをメモ帳にコピペ↓
【事前作業②】独自CSSコードのコピー
カスタマイザーに設定している独自CSSコードをメモする作業です。独自CSSを追加していない運用なら、この作業は不要です。
「外観」→「カスタマイズ」をクリック↓
「追加CSS」をクリック↓
表示されるCSSコードをコピーし、メモ帳に貼り付ける↓
LightningからSWELLへのテーマ切り替え作業手順
LightningからSWELLに切り替える方法をステップごとに解説していきます。
WordPressテーマ「SWELL」の購入手続き
SWELLを購入するステップです。
Lightningは無料でダウンロードできるWordPressテーマですが、SWELLは有料テーマです。
利用するには購入手続きが必要です。
SWELLは買い切りタイプの有料テーマです。
最初に支払うだけで、定期的に課金されるサブスクタイプではありません。
SWELLの購入方法を画像付きで紹介します。
公式サイトにアクセス↓
利用規約を確認し、「利用規約に同意します」にチェックを入れる↓
「SWELLを購入する」をクリック↓
カードでの支払いページで必要事項を入力し、
「\17,600支払う」をクリック↓
メールアドレスについて
購入時に利用するメールアドレスは、会員登録にも利用します。入力ミスのないよう気を付けましょう。
SWELL会員登録作業
SWELLの公式サイト上から会員登録を行います。会員登録には料金がかかりません。SWELLのテーマ購入後は、必ず会員登録しましょう！
会員登録する理由とメリット
- 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のテーマファイルをアップロード
ダウンロードしたSWELLのテーマファイルをアップロードします。
「外観」→「テーマ」をクリック↓
「新規追加」をクリックし、ダウンロードしたSWELLのテーマファイルを選択↓
かんた子テーマを利用する場合は合わせて子テーマをアップロードしましょう。
SWELLのテーマ有効化作業
テーマをLightningから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表示されたら、「今すぐインストール」をクリック↓
かんたインストールが完了したらプラグインを有効化してください。
Googleアナリティクスコードの設定作業
Googleアナリティクスのコードを設定するステップです。先ほど紹介したSEO SIMPLE PACKプラグイン有効化した環境での設定方法を解説します。
「SEO PACK」をクリック↓
「“Tracking ID” for UA」にアナリティクスのコードを貼り付ける↓
設定が反映されているか確認したい人は、Googleアナリティクスにログインしリアルタイムユーザーを確認しつつ自分でサイトにアクセスしてみましょう。
かんたリアルタイムユーザーの数が動いていれば設定作業は完了です。
ふきだしの登録作業
記事の定番装飾「ふきだし」についてです。Lightningだと「吹き出し」、SWELLだと平仮名で「ふきだし」という名称です。
SWELLは事前にふきだしを登録しておくことができます。エディター上でふきだし画像を都度設定する必要がなくなるので、登録しておくと作業効率が上がります。
かんたふきだしの登録方法を紹介します↓
「ふきだし」をクリック↓
「新規ふきだしの追加」をクリック↓
ふきだしの画像、ふきだしの向きなどを自由に登録しておきましょう。
事前登録できるふきだしの数
SWELLで事前登録できるふきだしの数に上限はありません。必要なだけ登録しておきましょう。
独自CSSコードの移設作業
Lightningで利用していた独自CSSをSWELLに移設して使いたい人向けの作業です。
WordPressの共通機能としてカスタマイザー内に「追加CSS」というオプションがあります。追加CSSに独自のカスタマイズコードを追加することで、サイト全体にCSSを読み込ませることができます。
SWELLではカスタマイザー以外に独自CSSを管理できる「カスタム書式」という機能があります。
設置場所
- SWELLカスタム書式
- カスタマイザー内の「追加CSS」
かんたカスタム書式は、ものすご～く便利な機能なので、詳しく解説します。
SWELLカスタム書式について
WordPressで独自のCSSコードを追加する場合にはカスタマイザー内の追加CSSにコードを記載するのが一般的ですがSWELLのカスタム書式と標準の追加CSSの違いは、エディターでの読み込みです。
SWELLカスタム書式に記載したコードはフロントだけでなく、エディターにも読み込まれます。
| SWELLカスタム書式 | 追加CSS | |
|---|---|---|
| フロント | 読み込まれる | 読み込まれる |
| エディター | 読み込まれる | 読み込まれない |
かんたエディターにも反映させたいコードはSWELLカスタム書式に書くのがおススメです。
SWELLカスタム書式を利用する方法です↓
「SWELL設定」→「エディター設定」をクリック↓
「カスタム書式」をクリック↓
「カスタム書式用CSS」に独自CSSコードを追加↓
カスタマイザー内の追加CSSについて
Lightning同様にSWELLでもカスタマイザー内に追加CSSオプションがあります。エディターに読み込ませる必要のないヘッダーやフッターなどののCSSは追加CSSに入力しましょう。
かんたカスタマイザー内の追加CSSに、コードを追加する方法を紹介します↓
「外観」→「カスタマイズ」をクリック↓
「追加CSS」をクリック↓
コードをコピー↓
Font Awesomeの設定作業
Lightningだと標準的に有効化されているFont Awesomeについてです。SWELLでは高速化の観点からFont Awesomeの読み込みに関しては標準的に無効になっています。
かんた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」を選択。
プラグインの無効化
テーマをSWELLに切り替え後、不要になったプラグインは停止しましょう。全プラグインではありませんが、一般的に有効化しているプラグインはサイトのリソースを消費します。サイトのパフォーマンスに影響がでますので、利用していないにも関わらず有効化しているだけのプラグインは無効化しましょう。
主に次のようなプラグインはSWELLでは必須ではありません。
高速化系の補助プラグイン
SWELLには高速化の設定機能が充実しています。キャッシュプラグイン、遅延読み込みといった機能のあるプラグインは必須ではありません。高速化のスキルと知識のある人は、SWELLの高速化機能とプラグインを組み合わせて運営しても構いません。
あまり高速化の専門知識がない場合はプラグインを使わず、SWELLの高速化オプションを優先的に活用しましょう。
SEO関連プラグイン
Meta周りの設定に関しては、SWELL開発者さんが提供しているSEO SIMPLE PACKをおススメします。機能が重複するSEO系のプラグインは不要です。
エディター補助プラグイン
エディター補助系のプラグインもSWELLでは必須ではありません。SWELLはブロックエディター対応テーマです。Classic EditorやClassic Editorの拡張プラグインは不要です。
かんた自分のサイト運営にあわせて見直してください。
ページのリライト作業
エディターで投稿をリライトするステップです。エディターでページを開き表示がおかしくなっている装飾をSWELLの装飾に変更していきましょう。
デザインの調整
サイトのデザインを調整するステップです。カスタマイザーから自由にサイトデザインを調整しましょう！
テーマ切り替えに関するFAQ
SWELLを無料でダウンロードして利用する方法はありますか？
ありません。SWELLは有料テーマです。セールやセルフバックに関しては次の記事で解説しています。
LightningからSWELLへのテーマ乗り換えサポートプラグインは無いの？
コーポレートサイトの参考になるデザインをまとめているサイトは？
SWELLを使ったサイトの事例集は次の記事にまとめてあります。
まとめ
WordPressテーマをLightningからSWELLに切り替える方法について解説しました。
テーマは管理画面上から切り替えるだけで即デザインがSWELLに切り替わます。切り替えはそれほど難しくありませんが記事やページ数が多く、Lightningのカスタムブロックを多用しているサイトではリライトで時間がかかります。
この記事が参考になれば幸いです。
本記事で紹介したLightning、SWELL、その他関連プラグインは次の通りです。記事執筆時に利用できる最新バージョンです。今後のバージョンアップで機能の名称や仕様、操作画面が変更される場合がありますのでご注意ください。
バージョン情報
| 移行前 | 移行後 | |
|---|---|---|
| テーマ | Lightning（15.4.0） | SWELL（2.7.2.1） |
| プラグイン | VK All in One Expansion Unit（9.85.0.1） VK Blocks（1.48.1.1） VK Block Patterns（1.25.6 ） | SEO SIMPLE PACK（3.1.2） |