WordPressのLightningテーマの使い方や設定に関する網羅的な情報をお探しの方向け。
Lightningテーマは、集客機能やSEO機能など、有料テーマ並みの機能を実装している無料で使える高機能なテーマです。
Lightningテーマを使えば企業サイトや店舗、サロン、旅館、クリニックなどのサイト作成はもちろん、メディアや個人のブログまで、幅広い用途で使えます。
この記事では、Lightningテーマのインストールから、おすすめプラグイン、ページの作り方、集客機能など、Lightningテーマを使ったサイトの作り方を解説します。
「テーマをインストールしたはいいけど、その先、どうやってサイトを作れば良いのか？」とお悩みの方は、是非、本記事を参考にサイトを作ってみて下さい。
目次
Lightningテーマを使う準備
最初に、Lightningテーマを使う準備を始めましょう。手順は下記のとおりです。
- Lightningテーマのインストール
- 推奨プラグインのインストール
上記のとおりです。
Lightningテーマのインストール
まずはLightningテーマをインストールします。
テーマ追加画面の検索窓に「Lightning」と入力すると、Lightningテーマが出現しますので「インストール」をクリックします。
インストールが完了したら「有効化」をクリックします。
Lightningが有効化されました。試しに、「サイトを表示」をクリックしてみます。
Lightningテーマのデザインが反映されました。
これで、テーマのインストールは完了です。続いて、プラグインをインストールします。
推奨プラグインのインストール
テーマをインストールしたら、テーマ推奨プラグインを2つインストールします。
- VK All in One Expansion Unit（ExUnit） → 集客機能、SEO機能の強化
- VK Blocks → ブロックエディタの機能強化（吹き出し、FAQ、スタッフ紹介、ボタンなど）
Lightningテーマでサイト作りを行う上で、必要不可欠です。テーマをインストールしたら必ずインストールしましょう。
推奨プラグインをインストールする手順
Lightningテーマをインストールすると、画面上部に推奨プラグインをインストールする案内が表示されます。
「プラグインのインストールを開始」をクリックします。
VK All in One Expansion Unit（ExUnit）のインストール
「インストール」をクリックします。
インストールが完了したら、「必須プラグインのインストール画面に戻る」をクリックします。
プラグインを有効化します。
以上でVK All in One Expansion Unit（ExUnit）のインストールは完了です。
なお、ExUnitの使い方に関する詳しい情報は「【WordPress】ExUnitの使い方を解説【Lightningテーマ】」をどうぞ。
VK Blocksのインストール
同じ要領で、もう1つの推奨プラグイン、「VK Blocks」もインストールして有効化します。
Vk Blocksに関する詳しい情報は公式サイトの
「VK Blocks | 事業案内 | 株式会社ベクトル」というページを参考にして下さい。
VK Block Patternsのインストール
推奨プラグインを2つインストールすると、「VK Block Patterns」という推奨プラグインをインストールするよう表示されます。
すぐに使うことは無いかもしれませんが、こちらもインストールして有効化しておきましょう。
追加でインストール必須のプラグイン
Lightningテーマの必須プラグインだけでも機能的には十分だと思いますが、サイトの機能やセキュリティを強化するため、併せて、プラグインをインストールしましょう。
追加でインストールすべきプラグインは「Lightningテーマのインストール後に追加必須のプラグイン7＋8選」という記事で紹介していますので、是非どうぞ。
以上でLightningテーマを使う準備は整いました。
次のパートでは、LightningテーマでWebサイトを作る方法を解説します。
LightningテーマでWebサイトを作る方法
LightningテーマでWebサイトを作る方法を下記の流れで解説します。
- トップページの作り方
- タイトルをロゴ画像に変更
- メニューの設置
- ウィジェットの設置
上記のとおりです。
トップページの作り方
Webサイトの顔となるトップページを作り方を下記の流れで解説します。
- ヘッダー画像の設定
-
パターンを使ってトップページを作る
- 3PRエリアの設定
上記の順に解説します。
ヘッダー画像の設定
ヘッダー画像を設定すると、いっきにオリジナルのサイトっぽくなりますので、まずはヘッダー画像を設定しましょう。
【WordPress】ヘッダー画像を設定する方法【Lightningテーマ】
ヘッダー画像を設定したいけど、肝心の画像を用意していないという方は、下記記事で画像素材サイトと画像編集ツールを紹介していますので、是非参考にしてください。
ちなみに、ヘッダーに画像ではなく動画を表示したいという方は、有料ではありますが、「VK Video Block Pro」というプラグインを導入すればヘッダーに動画を設定できるようになります。
パターンを使ってトップページを作る
Lightningテーマにはトップページのデザインパターン（テンプレート）が用意されていますので、パターンを選択するだけで、簡単にトップページが作れるようになっています。
手順は下記のとおりです。
- 固定ページの新規作成
- パターンの選択
- トップページの公開
- 作成した固定ページをトップページに表示する
上記の順に解説します。
固定ページの新規作成
まずは固定ページを新規作成します。
固定ページ編集画面が表示されたら、「＋」アイコンをクリックしてブロックメニューを開きます。
パターンの選択
ブロックメニューを開いたら、パターンタブを選択します。
すると、下図のようにパターンが表示されます。
プルダウンメニューを開くと分かると思いますが、Lightningテーマには様々なパターンが用意されています。
この時、プルダウンメニューからパターンを選択しても良いのですが、デザインが見にくいので、メニューの右にある「参照」をクリックします。
すると下図のようにパターンが見やすくなります。
ちなみに、無料版のLightningでは、トップページのパターンが下記2種類用意されていますので、お好みのパターンを選択してください。
- サービス案内 Free 01
- トップページ 無料版 01（スタータートップ）
ちなみに、今回は「トップページ 無料版 01（スタータートップ）」を選択します。
①メニューの「ページ_トップページ/LP」を選択し、②パターンを選択します。
下図のようにトップページのパターンを挿入できます。
あとはテキストを編集するだけです。
トップページの公開
テキストを編集したらページを公開するのですが、その前にタイトルやパーマリンクを変更しておきます。
①まずは管理しやすいようなタイトル名に変更し、②URLスラッグを半角英字で入力し（表示されないので「home」とかでOKです）、③最後に「公開」ボタンをクリックします。
以上でトップページの作成は完了です。
作成した固定ページをトップページに表示する
続いて、作成した固定ページをトップページに表示するよう設定します。
ダッシュボード＞設定＞表示設定 を選択します。
下図画面が表示されたら、①ホームページの表示を「固定ページ」を選択し、②ホームページのプルダウンメニューで、先程作成した「トップページ」を選択します。
③最後に「変更を保存」をクリックします。
トップページにアクセスすると、下図のようにトップページが表示されるようになります。
以上でトップページの作成は完了です。
本記事では、トップページ用のパターンを1つだけ選択しましたが、組み合わせ次第でいろいろなデザインを作れますので、色々試してみてください。
サイト全体のデザイン設定
ExUnitのカスタマイザーを使えば、サイト全体のデザイン（サイトカラー）の変更はもちろん、ヘッダー画像、ロゴ画像の変更など、サイトの表示を確認しながら設定できます。
【WordPress】外観のカスタマイズの使い方【Lightningテーマ】
3PRエリアの設定
Lightningテーマは、「3PR」と呼ばれる、以下の場所にコンテンツをアピールできる機能があります。
- トップページのヘッダー画像下部
- サイドバー・フッター
- 固定ページ・投稿
3PRを使って、Webサイトに訪問してきたユーザーにアピールしたいコンテンツを設定しましょう。
下層ページの作成
トップページを作ったら、次は下層ページを作っていきます。
Webサイトに必要なページ構成が決まっている方は、これからページ作りに着手していきます。
もしまだ必要なページが何も決まっていない方は、まずは最低限必要となるページをリストアップしてからページを作りましょう。
ちなみに、「【Webサイト】ページ構成（サイトマップ）の考え方を解説【サンプルあり】」という記事でページ構成の考え方を解説していますので、どのようなページを作れば良いのか思いつかないという方は、是非参考にしてください。
パターンを使ってページを作成
ページ構成が決まっている方はページを作成していくのですが、ここでも、デザインパターンを使うことで、簡単にページが作れます。
例えば、下記ページを作る場合、デザインパターンを使えばテキストと画像を編集するだけで簡単に作れます。
- 会社案内ページ
- サービス（商品）案内ページ
- よくある質問ページ
会社案内ページ
トップページを作成した時と同じ要領で、ブロックメニューを開き、パターンタブを選択し、「参照」をクリックします。
デザインパターンの「ページ_会社案内」を選択します。
会社案内のデザインが反映されますので、テキストと画像を編集するだけで会社案内ページを作成できます。
ページの編集後、タイトル名の変更とパーマリンクの変更をお忘れなく。
会社案内の地図を変更する方法
会社案内のデザインが反映されると、アクセスという項目にGoogleマップが表示されます。
不要な方は削除してもOKですが、Googleマップを表示させたい場合、マップ情報を編集する必要があります。
初期では名古屋駅に設定されてますので、ご自身の事業所情報に変更しましょう。
①どこでも良いので地図をクリックすると地図上部に編集メニューが表示されますので、②「HTML」を選択します。
下図のようにGoogleマップのHTMLが表示されますので、ご自身の事業所のマップ情報に差し替えます。
ちなみに、マップ情報の取得方法は「GoogleマップをWebサイトに埋め込む方法【最短ルートの表示も解説】」という記事で解説していますので、是非どうぞ。
サービス（商品）案内ページ
続いて、サービス案内ページを作成します。
ブロックメニューのパターンタブを選択し、「参照」をクリックします。
デザインパターンの「ページ_サービス紹介」を選択します。
サービス紹介のデザインが反映されますので、テキストや画像を編集します。
よくある質問ページ
よくある質問のデザインも用意されていますので、パターンから「セクション_よくある質問」を選択します。
よくある質問のデザインが反映されますので、テキストを編集するだけでページが作れます。
ちなみに、「よくある質問」のパターンは、FAQのブロックが3つしか用意されていませんので、必要に応じて、FAQブロックを追加してください。
また、FAQブロックは見た目を変更できるスタイルがいくつか用意されていますので、必要に応じて変更してみてください。詳しい使い方は下記公式サイトを参考にしてください。
公式サイト：FAQ | 事業案内 | 株式会社ベクトル
Pro版（有料）は開閉も可能
LightningのPro版「Vektor Passport」を購入すると、FAQの開閉機能（アコーディオン）が使えるようになります。
無料版でも問題ないと思いますが、
- 見た目にこだわりたい
- 質問数が多く、答えを隠さないとページが長くなってしまう
といった方は、Vektor Passportがおすすめです。
業種にあったパターンを使いたい方向け
Lightningテーマで用意されているパターンは、基本的にシンプルなビジネスサイト向けのパターンばかりなので、企業サイトを作る分には問題ありませんが、お店やクリニック等のサイトにはマッチしてないと思います。
そのような時は、「VK パターンライブラリ（VK Pattern Library）」でパターンを探してみてください。
Lightningテーマの開発会社「ベクトル」さんがコピペで使えるパターンを公開してますので、簡単にプロが作ったようなページが作れます。
手順は下記のとおりです。
- VK パターンライブラリに移動
- パターンを探す
- 使用するパターンをコピーする
- ページに貼り付ける
上記の順に解説します。
VK Pattern Libraryに移動
まずはVK Pattern Libraryに移動します。
ページ作成画面上部（投稿・固定ページ共通）の「VK Pattern Library」という項目をクリックします。
パターンを探す
下図VK Pattern Libraryに移動しますので、必要なパターンを探します。
なお、パターンはLightningのPro版「Vektor Passport」と混ざって表示されますので、無料版のパターンを探したい方は、①使用プロダクトで「VK Blocks」を選択し、②「検索」をクリックします。
下図のように無料で使えるパターンが表示されます。
17種類のパターンが用意されていますので、この中から使いたいパターンを探してください。
使用するパターンをコピーする
使いたいパターンが決まったら、データをコピーします。
試しに、カフェ特徴というパターンをコピーします。
データをコピーしたら、ページ作成画面に戻ります。
ページに貼り付ける
先程コピーしたデータを貼り付けます。
下図のようにデザインが反映されますので、後は、テキストと画像を編集するだけです。
このように、パターンを使えば簡単にページが作れますので、是非、お試しください。
タイトルをロゴ画像に変更
初期状態ではサイトタイトルがテキストで表示されていますので、ロゴ画像に変更する方法を解説します。
手順は下記のとおりです。
- 手順①：カスタマイザーの表示
- 手順②：Lightningデザイン設定を選択
- 手順③：ヘッダーロゴ画像の設定
- 手順④：ロゴ画像のアップロード
上記のとおりです。
手順①：カスタマイザーの表示
最初に、カスタマイザーを表示させます。
ちなみに、カスタマーザーを表示させる場所は2つあります。
- ダッシュボード左側メニュー
- Webサイト上部のツールバー
上記のとおりです。
ダッシュボード左側メニュー
ダッシュボード＞外観＞カスタマイズ を選択します。
カスタマイズをクリックすると、カスタマイザーが表示されます。
Webサイト上部のツールバー
2つ目の場所は、Webサイト上部のツールバーです。
どちらでも良いので、まずはカスタマイザーを表示させます。
手順②：Lightningデザイン設定を選択
カスタマーザーのメニュー中ほどにある「Lightningデザイン設定」を選択します。
手順③：ヘッダーロゴ画像の設定
Lightningデザイン設定が表示されますので、ヘッダーロゴ画像という項目の「画像を選択」をクリックします。
手順④：ロゴ画像のアップロード
「画像を選択」をクリックすると、メディア追加画面に切り替わりますので、予め用意しているロゴ画像をアップロードします。
アップロードが完了したらロゴ画像を選択し、「画像を選択」をクリックします。
下図のようにロゴ画像がプレビューで表示されたら、「公開」をクリックします。
トップページを確認すると、ロゴ画像に変更されているのが確認できます。
以上でタイトルをロゴ画像に変更する方法は完了です。
ちなみに、ロゴ画像のご用意が無い方は「【無料】ロゴ作成ツールおすすめ5選【サイト・ブログデザインUP】」という記事でロゴ作成ツールを紹介していますので、是非どうぞ。
メニューの設置
ある程度トップページの形を作ったら、ヘッダー部分にメニューを設置しましょう。
メニューの作り方は「【WordPress】ナビゲーションメニューの作り方【メニュー追加・階層】」をどうぞ。
ウィジェットの設置
サイドバーやフッターにウィジェットを設置しましょう。
サイドバーに新着記事を表示する方法
WordPressは標準でサイドバーに新着記事を表示させる機能がありますが、設定項目が少なく、サムネイルも表示されないので非常にシンプルです。
Lightningテーマの機能を使うと、サムネイル画像はもちろん、日付の表示や表示したい記事タイプなど、様々な設定が可能です。
フッターのウィジェット
フッターにウィジェットを設置しましょう。
Lightningテーマの集客機能の使い方
Lightningテーマの集客機能の使い方を解説します。
- CTA機能
上記のとおりです。
CTA機能
LightningテーマはCTA機能を実装しています。
CTAを設置することで、コンテンツを読み終わったユーザーに対して、資料請求やサンプル請求ページへの移動を促したり、ランディングページやメルマガ登録ページへの誘導を促しやすくなります。
Lightningテーマのカスタマイズ
最後に、Lightningテーマのカスタマイズ方法を4つ紹介します。
- Lightning有料版
- フッターのコピーライトの削除方法
- カスタム投稿タイプ
- 投稿者情報の表示
上記のとおりです。
Lightning有料版
Lightningの有料版を導入すると、ノーコードでデザインをカスタマイズできます。
また、業種別にコンテンツデータ（有料）が用意されてますので、データを使えばテキストと画像を変えるだけで簡単にイメージどおりのサイトが作れるようになります。
フッターのコピーライトの削除方法
ライトニングテーマはフッターにコピーライトが表示されていますが、コピーライトは削除してもOKです。
このことは、公式サイトのFAQにも書かれています（テーマ作成者さんに対する感謝の念が堪えません）。
ですので、コピーライトを消したいという方は削除しましょう。
カスタム投稿タイプ
Lightningテーマは標準でカスタム投稿タイプを実装しています。
カスタム投稿タイプを使うことで、通常のブログ記事とは別に、商品情報や製品ポートフォリオ、製品導入事例、更新情報などを管理できるようになります。
なお、カスタム投稿は全ての投稿に日付が表示されるようになっていますので、日付の表示をしたくないという方は、以下の記事でカスタマイズ方法を紹介していますので、是非参考にして下さい。
投稿者情報の表示
記事下に投稿者情報を表示したい場合、「VK Post Author Display」というプラグインを使うと、投稿者情報の表示が可能になります。
ちなみに「VK Post Author Display」は「Lightningテーマ」の開発会社が作られたもので、テーマ同様、無償で配布されてます。
詳しくは下記記事をどうぞ。
まとめ
以上、WordPressのLightningテーマの使い方や設定方法を解説しました。
Lightningテーマを使えば、企業サイトはもちろん、店舗、サロン、クリニックなどのビジネスサイトを、初心者の方でもプロが作ったようなサイトを自作できるようになります。
設定方法を見ながら手を動かせば作れるようになりますので、是非、サイト運営にチャレンジしてみて下さい。
Lightningの無料版では物足りないという方は、有料版がおすすめです。「Lightning有料版でノーコードカスタマイズ【デザイン強化】」という記事でも解説しているとおり、マウス操作でデザインカスタマイズができるようになります。
ヘッダーデザインの変更や、動きのあるページ（アニメーション効果）もブロックエディタで簡単に挿入できます。
プロの業者が作ったようなカスタマイズが可能になりますので、無料版の使い方をマスターしたら、導入を検討してみて下さい。
