【2023年】LighthingからSWELLへの移行手順と作業方法を解説

【2023年】LighthingからSWELLへの移行手順と作業方法を解説
初心者

テーマの切り替えって簡単なの?
切り替えに必要な作業を知りたい?
初心者でもできるの?

そんな疑問に答えます。

運営しているWordPressサイトでテーマを切り替えるのは正直ちょっと面倒ですよね?初めてテーマを切り替える人にとっては、どんな作業をすれば良いか分からないのが当然です。

ボクはLightningからSWELLにテーマを切り替えた経験があります。この記事では経験談をもとにテーマ切り替え作業の手順とその方法をシェアします。

かんた

ちなみに、移行対象のテーマはSWELL(スウェル)です。

海外エンジニアが開発した類似のテーマがありますが、国産のSWELLです。

公式 WordPressテーマ「SWELL」をダウンロード

この記事を書いた人
  • IT業界22年のベテラン エンジニア
  • WordPressで企業サイトの構築しています
  • 取り扱いWordPressテーマは300個オーバー
SWELLマニアの かんた です
目次

【事前準備】WordPressテーマ切り替え前にやるべきこと

【事前準備】WordPressテーマ切り替え前にやるべきこと

WordPressテーマをLightningからSWELLに切り替え前の作業です。

テーマ切り替え前の事前準備

  1. Googleアナリティクスのコードをコピー
  2. 独自CSSコードのコピー
かんた

それぞれの作業を解説します。

【事前作業①】Googleアナリティクスのコードをコピー

この作業は任意です。

サイトのアクセス記録をGoogleアナリティクスで管理しているユーザー向けの作業です。テーマ切り替え前にダッシュボードでGoogleアナリティクスのコードをコピーします。

Lightningの推奨プラグイン「VK All in One Expansion Unit」を使っている場合の手順を紹介します。

VK All in One Expansion Unitプラグイン以外の方法でGoogleアナリティクコードを管理している場合でも、Googleアナリティクスコードをメモ帳にコピーしておきましょう。

操作内容

ExUnit」をクリック↓

「ExUnit」をクリック↓

Google Analyticsの「設定」をクリック↓

Google Analyticsの「設定」をクリック↓

Google Analytics設定のコードをメモ帳にコピペ↓

Google Analyticsのコードをメモ帳にコピペ↓

【事前作業②】独自CSSコードのコピー

この作業は任意です。

カスタマイザーに設定している独自CSSコードをメモする作業です。独自CSSを追加していない運用なら、この作業は不要です。

操作内容

外観」→「カスタマイズ」をクリック↓

「外観」→「カスタマイズ」をクリック↓

追加CSS」をクリック↓

カスタマイザーの追加CSS

表示されるCSSコードをコピーし、メモ帳に貼り付ける↓

CSSをコピー

LightningからSWELLへのテーマ切り替え作業手順

LightningからSWELLへのテーマ切り替え作業手順

テーマをLightningからSWELLに切り替える方法をステップごとに解説していきます。

WordPressテーマ「SWELL」の購入手続き

SWELLを購入するステップです。

Lightningは無料でダウンロードできるWordPressテーマですが、SWELLは有料テーマです。利用するには購入手続きが必要です。

SWELLは買い切りタイプの有料テーマです。
最初に支払うだけで、定期的に課金されるサブスクタイプではありません。

公式 WordPressテーマ「SWELL」をダウンロード

SWELLの購入方法を画像付きで紹介します。

操作内容

公式サイトにアクセス↓

SWELLのテーマ購入画面
出典:SWELL公式ページ

利用規約を確認し、「利用規約に同意します」にチェックを入れる↓

利用規約を確認するにチェックを入れる
出典:SWELL公式ページ

SWELLを購入する」をクリック↓

SWELLを購入するボタンをクリック

カードでの支払いページで必要事項を入力し、

\17,600支払う」をクリック↓

SWELLを購入する手順

メールアドレスについて

購入時に利用するメールアドレスは、会員登録にも利用します。入力ミスのないよう気を付けましょう。

SWELL会員登録作業

SWELLの公式サイト上から会員登録を行います。会員登録には料金がかかりません。SWELLのテーマ購入後は、必ず会員登録しましょう!

会員登録する理由とメリット

  1. SWELLの最新バージョンテーマをダウンロードできる
  2. SWELLの子テーマをダウンロードできる
  3. ユーザー認証をすることができる
  4. テーマ切り替えサポートプラグインをダウンロードできる
  5. 着せかえデザインデータがダウンロードできる
  6. フォーラムに質問や要望を投稿できる
  7. オンラインコミュニティーに参加できる
かんた

会員登録する手順を解説します。

操作内容

会員登録ページにアクセス。

ユーザー名」、「メールアドレス」、「パスワード」を入力↓

必要事項を入力↓

メールアドレスはSWELL購入時に入力したメールアドレスのみ有効です。
それ以外のメールアドレスで会員登録することはできません。

利用規約を確認してチェックを入れた後、「登録する」をクリック↓

会員登録する

SWELLのテーマファイルをダウンロード

SWELLのテーマファイルをダウンロードするステップです。

一部の有料テーマはダウンロード期限や、ダウンロード回数に制限がありますが、SWELLにはありません。会員登録済みのユーザーは、マイページからSWELLをいつでもダウンロードできます。

かんた

SWELLのテーマファイルをダウンロードする方法を紹介します↓

操作内容

マイページにアクセスし、ログインします↓

マイページにログイン

ページを下にスクロールします。

SWELL製品ダウンロード部分の「SWELL 本体最新版」にある「swell-*-*-*.zip」をクリック↓

SWELLテーマをダウンロード

テーマの「*」について
swell-*-*-*.zipの「*」部分はバージョン情報です。
画像とは異なる表記になっている場合がありますが、気にする必要はありません。

子テーマを利用する場合は「子テーマ」にある「swell_child.zip」をダウンロード↓

SWELL子テーマをダウンロード

テーマファイル、子テーマファイルはzip形式のまま保存しておきます。解凍せず、そのままアップロードして使います。

MacでSafariを使っている場合の注意点
zip形式のファイルをダウンロードすると自動的に解凍されて中身が表示されることがあります。
テーマファイルのダウンロード時にZipファイルが自動解凍されないようSafariで設定を解除するか、Google Chromeなど別のブラウザでテーマファイルをダウンロードしてください。

SWELLのテーマファイルをアップロード

ダウンロードしたSWELLのテーマファイルをアップロードします。

操作内容

外観」→「テーマ」をクリック↓

テーマをアップロード

新規追加」をクリックし、ダウンロードしたSWELLのテーマファイルを選択↓

かんた

子テーマを利用する場合は合わせて子テーマをアップロードしましょう。

SWELLのテーマ有効化作業

テーマをLightningからSWELLに切り替える作業です。SWELLを有効化すると、サイトがSWELLに切り替わります。

操作内容

外観」→「テーマ」をクリック↓

テーマを有効化

SWELLを選択し「有効化」をクリック↓

SWELLを有効化

子テーマを利用する場合は子テーマを有効化してください。

ユーザー認証作業

SWELLはユーザー認証システムが導入されているテーマです。
認証をしていないサイトではテーマのアップデートができません

かんた

ユーザー認証の設定手順を紹介します。

操作内容

ダッシュボードに表示される「SWELLのユーザー認証が完了していません。」をクリック↓

SWELLのユーザー認証が完了していません。」をクリック

メールアドレス」に、SWELL購入時に登録したメールアドレスを入力↓

SWELLのユーザー認証が完了していません。

※購入時に設定したメールアドレス以外は利用できません。

認証リクエストを送信」をクリック↓

「認証リクエストを送信」をクリック↓

登録したメールアドレスに、次の確認メールが届きます↓

  • 件名:SWELLのユーザー認証用URLを送付します。
  • 送信元ドメイン:swell-theme.com

メール内のリンクをクリック↓

リンクをクリック

認証が完了された旨が表示されます↓

認証が確認できたSWELLの画面

確認メールについて

メールは認証リクエストを送信直後に届きます。認証リクエストボタンをクリックし1分以上経過してもメールが届かない場合は迷惑メールフォルダを確認しましょう。

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を管理できる「カスタム書式」という機能があります。

設置場所

  1. SWELLカスタム書式
  2. カスタマイザー内の「追加CSS」
かんた

カスタム書式は、ものすご~く便利な機能なので、詳しく解説します。

SWELLカスタム書式について

WordPressで独自のCSSコードを追加する場合にはカスタマイザー内の追加CSSにコードを記載するのが一般的ですがSWELLのカスタム書式と標準の追加CSSの違いは、エディターでの読み込みです。

SWELLカスタム書式に記載したコードはフロントだけでなく、エディターにも読み込まれます。

スクロールできます
SWELLカスタム書式追加CSS
フロント読み込まれる読み込まれる
エディター読み込まれる読み込まれない
CSS設置場所の違い
かんた

エディターにも反映させたいコードはSWELLカスタム書式に書くのがおススメです。

SWELLカスタム書式を利用する方法です↓

操作内容

SWELL設定」→「エディター設定」をクリック↓

カスタム書式」をクリック↓

「SWELL設定」→「エディター設定」をクリック↓

カスタム書式用CSS」に独自CSSコードを追加↓

カスタマイザー内の追加CSSについて

Lightning同様にSWELLでもカスタマイザー内に追加CSSオプションがあります。エディターに読み込ませる必要のないヘッダーやフッターなどののCSSは追加CSSに入力しましょう。

かんた

カスタマイザー内の追加CSSに、コードを追加する方法を紹介します↓

操作内容

外観」→「カスタマイズ」をクリック↓

カスタマイズをクリック

追加CSS」をクリック↓

追加CSS

コードをコピー↓

CSSをコピー

Font Awesomeの設定作業

この工程は任意です。

Lightningだと標準的に有効化されているFont Awesomeについてです。SWELLでは高速化の観点からFont Awesomeの読み込みに関しては標準的に無効になっています。

かんた

Font Awesomeアイコンを利用する場合は次の設定を行いましょう。

操作内容

SWELL設定」をクリック↓

「SWELL設定」をクリック

Font Awesome」タブを選択↓

「Font Awesome」タブを選択↓

Font Awesome読み込み設定オプションを選択↓

Font Awesomeの設定をする

jQueryの設定作業

この工程は任意です。

独自カスタマイズでjQueryのコードを書いている人や、jQueryの読み込みが必要なプラグインを利用しているといったケースでのみ必要な作業です。

操作内容

SWELL設定」をクリック↓

SWELL設定を選択

jQuery」タブをクリック↓

jQueryの読み込みオプションを選択↓

jQuery読み込みオプションを選択

読み込むファイルが増えるとサイトパフォーマンスが低下します。
jQueryが必要か分からない」という人は、本作業は行わないのが無難です。

OGPの設定作業

TwitterやFacebookなどのSNSでシェアされた際の表示形式を指定するOGPの設定です。

SEO SIMPLE PACKプラグイン有効時の手順を解説します。

操作内容

左側のメニューから「SEO PACK」→「OGP設定」をクリック、

OGPタグの基本設定から「画像を選択」をクリックし、任意の画像をアップロード↓

SWELLのトップページ用にOGP画像を設定する方法
操作内容

左側のメニューから「SEO PACK」→「OGP設定」をクリック、

Twitter」を選択、カードタイプで「summary_large_image」を選択。

TwitterのOGP画像サイズを大きくする設定

プラグインの無効化

テーマをSWELLに切り替え後、不要になったプラグインは停止しましょう。全プラグインではありませんが、一般的に有効化しているプラグインはサイトのリソースを消費します。サイトのパフォーマンスに影響がでますので、利用していないにも関わらず有効化しているだけのプラグインは無効化しましょう。

主に次のようなプラグインはSWELLでは必須ではありません。

高速化系の補助プラグイン

SWELLには高速化の設定機能が充実しています。キャッシュプラグイン、遅延読み込みといった機能のあるプラグインは必須ではありません。高速化のスキルと知識のある人は、SWELLの高速化機能とプラグインを組み合わせて運営しても構いません。

あまり高速化の専門知識がない場合はプラグインを使わず、SWELLの高速化オプションを優先的に活用しましょう。

SEO関連プラグイン

Meta周りの設定に関しては、SWELL開発者さんが提供しているSEO SIMPLE PACKをおススメします。機能が重複するSEO系のプラグインは不要です。

エディター補助プラグイン

エディター補助系のプラグインもSWELLでは必須ではありません。SWELLはブロックエディター対応テーマです。Classic EditorやClassic Editorの拡張プラグインは不要です。

かんた

自分のサイト運営にあわせて見直してください。

ページのリライト作業

エディターで投稿をリライトするステップです。エディターでページを開き表示がおかしくなっている装飾をSWELLの装飾に変更していきましょう。

デザインの調整

サイトのデザインを調整するステップです。カスタマイザーから自由にサイトデザインを調整しましょう!

テーマ切り替えに関するFAQ

Lightningから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)
テーマ、プラグインのバージョン情報
よかったらシェアしてね!
  • URLをコピーしました!
目次