【WordPress】Lightningテーマの使い方ガイド

【WordPress】Lightningテーマの使い方ガイドWordPress

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テーマ】」をどうぞ。

【WordPress】ExUnitの使い方を解説【Lightningテーマ】
WordPressでLightningテーマを使用しており、Lightning推奨プラグイン「VK All in One Expansion Unit(ExUnit)」をインストールした方向け。 Lightningテーマをインストール...
VK Blocksのインストール

同じ要領で、もう1つの推奨プラグイン、「VK Blocks」もインストールして有効化します。

 

Vk Blocksに関する詳しい情報は公式サイトの
VK Blocks | 事業案内 | 株式会社ベクトル」というページを参考にして下さい。

VK Block Patternsのインストール

推奨プラグインを2つインストールすると、「VK Block Patterns」という推奨プラグインをインストールするよう表示されます。

すぐに使うことは無いかもしれませんが、こちらもインストールして有効化しておきましょう。

追加でインストール必須のプラグイン

Lightningテーマの必須プラグインだけでも機能的には十分だと思いますが、サイトの機能やセキュリティを強化するため、併せて、プラグインをインストールしましょう。

 

追加でインストールすべきプラグインは「Lightningテーマのインストール後に追加必須のプラグイン7+8選」という記事で紹介していますので、是非どうぞ。

Lightningテーマのインストール後に追加必須のプラグイン7+8選
WordPressにLightningテーマをインストールしており、Lightning推奨プラグインと併せて追加するべきプラグインの情報をお探しの方向け。 Lightningテーマには「VK All in One Expansion ...

 

以上でLightningテーマを使う準備は整いました。
次のパートでは、LightningテーマでWebサイトを作る方法を解説します。

 

LightningテーマでWebサイトを作る方法

LightningテーマでWebサイトを作る方法を下記の流れで解説します。

  • トップページの作り方
  • タイトルをロゴ画像に変更
  • メニューの設置
  • ウィジェットの設置

上記のとおりです。

トップページの作り方

Webサイトの顔となるトップページを作り方を下記の流れで解説します。

  • ヘッダー画像の設定
  • パターンを使ってトップページを作る

  • 3PRエリアの設定

上記の順に解説します。

ヘッダー画像の設定

ヘッダー画像を設定すると、いっきにオリジナルのサイトっぽくなりますので、まずはヘッダー画像を設定しましょう。

【WordPress】ヘッダー画像を設定する方法【Lightningテーマ】

【WordPress】ヘッダー画像を設定する方法【Lightningテーマ】
WordPressのLightningテーマを使用しており、トップページヘッダー画像の設定方法をお探しの方向け。 ヘッダー画像はWebサイトの第一印象を表す大事な部分ですので、見栄えの良い画像を入れるとそれだけでユーザーに与える印象が...

 

ヘッダー画像を設定したいけど、肝心の画像を用意していないという方は、下記記事で画像素材サイトと画像編集ツールを紹介していますので、是非参考にしてください。

 

ちなみに、ヘッダーに画像ではなく動画を表示したいという方は、有料ではありますが、「VK Video Block Pro」というプラグインを導入すればヘッダーに動画を設定できるようになります。

パターンを使ってトップページを作る

Lightningテーマにはトップページのデザインパターン(テンプレート)が用意されていますので、パターンを選択するだけで、簡単にトップページが作れるようになっています。

手順は下記のとおりです。

  • 固定ページの新規作成
  • パターンの選択
  • トップページの公開
  • 作成した固定ページをトップページに表示する

上記の順に解説します。

固定ページの新規作成

まずは固定ページを新規作成します。

固定ページの詳しい使い方を「【WordPress】固定ページの作り方・使い方を図解入りで解説」という記事で解説していますので、不慣れな方は是非参考にしてください。

 

固定ページ編集画面が表示されたら、「+」アイコンをクリックしてブロックメニューを開きます。

パターンの選択

ブロックメニューを開いたら、パターンタブを選択します。

すると、下図のようにパターンが表示されます。

プルダウンメニューを開くと分かると思いますが、Lightningテーマには様々なパターンが用意されています。

ひとまず、トップページを作るという趣旨なので、トップページ用のパターンを選択します。

この時、プルダウンメニューからパターンを選択しても良いのですが、デザインが見にくいので、メニューの右にある「参照」をクリックします。

すると下図のようにパターンが見やすくなります。

ちなみに、無料版のLightningでは、トップページのパターンが下記2種類用意されていますので、お好みのパターンを選択してください。

  • サービス案内 Free 01
  • トップページ 無料版 01(スタータートップ)

ちなみに、今回は「トップページ 無料版 01(スタータートップ)」を選択します。

①メニューの「ページ_トップページ/LP」を選択し、②パターンを選択します。

下図のようにトップページのパターンを挿入できます。

あとはテキストを編集するだけです。

トップページの公開

テキストを編集したらページを公開するのですが、その前にタイトルやパーマリンクを変更しておきます。

タイトル名はトップページに表示されませんので、管理しやすいようなページ名に変更すればOKです。

①まずは管理しやすいようなタイトル名に変更し、②URLスラッグを半角英字で入力し(表示されないので「home」とかでOKです)、③最後に「公開」ボタンをクリックします。

以上でトップページの作成は完了です。

作成した固定ページをトップページに表示する

続いて、作成した固定ページをトップページに表示するよう設定します。

ダッシュボード>設定>表示設定 を選択します。

下図画面が表示されたら、①ホームページの表示を「固定ページ」を選択し、②ホームページのプルダウンメニューで、先程作成した「トップページ」を選択します。

③最後に「変更を保存」をクリックします。

トップページにアクセスすると、下図のようにトップページが表示されるようになります。

以上でトップページの作成は完了です。

本記事では、トップページ用のパターンを1つだけ選択しましたが、組み合わせ次第でいろいろなデザインを作れますので、色々試してみてください。

サイト全体のデザイン設定

ExUnitのカスタマイザーを使えば、サイト全体のデザイン(サイトカラー)の変更はもちろん、ヘッダー画像、ロゴ画像の変更など、サイトの表示を確認しながら設定できます。

【WordPress】外観のカスタマイズの使い方【Lightningテーマ】

【WordPress】外観のカスタマイズの使い方【Lightningテーマ】
WordPressにLightningテーマをインストールしていて、外観のカスタマイズの使い方をお探しの方向け。 Webサイトの外観をカスタマイズする場合、通常、HTMLやCSS、PHP等の知識が必要となりますが、WordPressは...

3PRエリアの設定

Lightningテーマは、「3PR」と呼ばれる、以下の場所にコンテンツをアピールできる機能があります。

  • トップページのヘッダー画像下部
  • サイドバー・フッター
  • 固定ページ・投稿

3PRを使って、Webサイトに訪問してきたユーザーにアピールしたいコンテンツを設定しましょう。

【WordPress】Lightningの3PRエリアの設定方法
Lightningテーマの3PRの設定方法をお探しの方向け。 Lightningテーマには、「3PR」と呼ばれるユーザーにPRしたいコンテンツを表示できる機能があります。 この記事では、Lightningテーマの3PRの設定方法を解...

下層ページの作成

トップページを作ったら、次は下層ページを作っていきます。

下層ページとは、トップページから派生するページのことを指します(トップページ以外のぺージのこと)。
例えば、企業・店舗のサイトの場合、「事業内容」、「会社概要」、「お問い合わせ」などのページが下層ページになります。

 

Webサイトに必要なページ構成が決まっている方は、これからページ作りに着手していきます。

もしまだ必要なページが何も決まっていない方は、まずは最低限必要となるページをリストアップしてからページを作りましょう。

ちなみに、「【Webサイト】ページ構成(サイトマップ)の考え方を解説【サンプルあり】」という記事でページ構成の考え方を解説していますので、どのようなページを作れば良いのか思いつかないという方は、是非参考にしてください。

パターンを使ってページを作成

ページ構成が決まっている方はページを作成していくのですが、ここでも、デザインパターンを使うことで、簡単にページが作れます。

例えば、下記ページを作る場合、デザインパターンを使えばテキストと画像を編集するだけで簡単に作れます。

  • 会社案内ページ
  • サービス(商品)案内ページ
  • よくある質問ページ

会社案内ページ

トップページを作成した時と同じ要領で、ブロックメニューを開き、パターンタブを選択し、「参照」をクリックします。

隣のプルダウンメニューでもOKです

デザインパターンの「ページ_会社案内」を選択します。

会社案内のデザインが反映されますので、テキストと画像を編集するだけで会社案内ページを作成できます。

ページの編集後、タイトル名の変更とパーマリンクの変更をお忘れなく。

会社案内の地図を変更する方法

会社案内のデザインが反映されると、アクセスという項目にGoogleマップが表示されます。

不要な方は削除してもOKですが、Googleマップを表示させたい場合、マップ情報を編集する必要があります。

初期では名古屋駅に設定されてますので、ご自身の事業所情報に変更しましょう。

①どこでも良いので地図をクリックすると地図上部に編集メニューが表示されますので、②「HTML」を選択します。

下図のようにGoogleマップのHTMLが表示されますので、ご自身の事業所のマップ情報に差し替えます。

 

ちなみに、マップ情報の取得方法は「GoogleマップをWebサイトに埋め込む方法【最短ルートの表示も解説】」という記事で解説していますので、是非どうぞ。

サービス(商品)案内ページ

続いて、サービス案内ページを作成します。

ブロックメニューのパターンタブを選択し、「参照」をクリックします。

デザインパターンの「ページ_サービス紹介」を選択します。

サービス紹介のデザインが反映されますので、テキストや画像を編集します。

タイトル名・パーマリンクの変更をお忘れなく。

よくある質問ページ

よくある質問のデザインも用意されていますので、パターンから「セクション_よくある質問」を選択します。

よくある質問のデザインが反映されますので、テキストを編集するだけでページが作れます。

タイトル名・パーマリンクの変更をお忘れなく。

 

ちなみに、「よくある質問」のパターンは、FAQのブロックが3つしか用意されていませんので、必要に応じて、FAQブロックを追加してください。

推奨プラグインの「VK Blocks」を入れていると、FAQブロックを呼び出せます。

また、FAQブロックは見た目を変更できるスタイルがいくつか用意されていますので、必要に応じて変更してみてください。詳しい使い方は下記公式サイトを参考にしてください。

公式サイトFAQ | 事業案内 | 株式会社ベクトル

Pro版(有料)は開閉も可能

LightningのPro版「Lightning G3 Pro Unit」を購入すると、FAQの開閉機能(アコーディオン)が使えるようになります。

無料版でも問題ないと思いますが、

  • 見た目にこだわりたい
  • 質問数が多く、答えを隠さないとページが長くなってしまう

といった方は、Lightning G3 Pro Unitがおすすめです。

業種にあったパターンを使いたい方向け

Lightningテーマで用意されているパターンは、基本的にシンプルなビジネスサイト向けのパターンばかりなので、企業サイトを作る分には問題ありませんが、お店やクリニック等のサイトにはマッチしてないと思います。

そのような時は、「VK Pattern Library」でパターンを探してみてください。

Lightningテーマの開発会社「ベクトル」さんがコピペで使えるパターンを公開してますので、簡単にプロが作ったようなページが作れます。

手順は下記のとおりです。

  • VK Pattern Libraryに移動
  • パターンを探す
  • 使用するパターンをコピーする
  • ページに貼り付ける

上記の順に解説します。

VK Pattern Libraryに移動

まずはVK Pattern Libraryに移動します。

ページ作成画面上部(投稿・固定ページ共通)の「VK Pattern Library」という項目をクリックします。

パターンを探す

下図VK Pattern Libraryに移動しますので、必要なパターンを探します。

なお、パターンはLightningのPro版「Lightning G3 Pro Unit」と混ざって表示されますので、無料版のパターンを探したい方は、①使用プロダクトで「VK Blocks」を選択し、②「検索」をクリックします。

下図のように無料で使えるパターンが表示されます。

17種類のパターンが用意されていますので、この中から使いたいパターンを探してください。

使用するパターンをコピーする

使いたいパターンが決まったら、データをコピーします。

試しに、カフェ特徴というパターンをコピーします。

データをコピーしたら、ページ作成画面に戻ります。

ページに貼り付ける

先程コピーしたデータを貼り付けます。

下図のようにデザインが反映されますので、後は、テキストと画像を編集するだけです。

このように、パターンを使えば簡単にページが作れますので、是非、お試しください。

タイトルをロゴ画像に変更

初期状態ではサイトタイトルがテキストで表示されていますので、ロゴ画像に変更する方法を解説します。

手順は下記のとおりです。

  • 手順①:カスタマイザーの表示
  • 手順②:Lightningデザイン設定を選択
  • 手順③:ヘッダーロゴ画像の設定
  • 手順④:ロゴ画像のアップロード

上記のとおりです。

手順①:カスタマイザーの表示

最初に、カスタマイザーを表示させます。

ちなみに、カスタマーザーを表示させる場所は2つあります。

  • ダッシュボード左側メニュー
  • Webサイト上部のツールバー

上記のとおりです。

ダッシュボード左側メニュー

ダッシュボード>外観>カスタマイズ を選択します。

カスタマイズをクリックすると、カスタマイザーが表示されます。

Webサイト上部のツールバー

2つ目の場所は、Webサイト上部のツールバーです。

どちらでも良いので、まずはカスタマイザーを表示させます。

手順②:Lightningデザイン設定を選択

カスタマーザーのメニュー中ほどにある「Lightningデザイン設定」を選択します。

手順③:ヘッダーロゴ画像の設定

Lightningデザイン設定が表示されますので、ヘッダーロゴ画像という項目の「画像を選択」をクリックします。

手順④:ロゴ画像のアップロード

「画像を選択」をクリックすると、メディア追加画面に切り替わりますので、予め用意しているロゴ画像をアップロードします。

Lightningテーマに設置するロゴ画像の推奨サイズは「500px(幅) x 120px(高さ)」となっています。

アップロードが完了したらロゴ画像を選択し、「画像を選択」をクリックします。

下図のようにロゴ画像がプレビューで表示されたら、「公開」をクリックします。

トップページを確認すると、ロゴ画像に変更されているのが確認できます。

以上でタイトルをロゴ画像に変更する方法は完了です。

 

ちなみに、ロゴ画像のご用意が無い方は「【無料】ロゴ作成ツールおすすめ6選【サイト・ブログデザインUP】」という記事でロゴ作成ツールを紹介していますので、是非どうぞ。

メニューの設置

ある程度トップページの形を作ったら、ヘッダー部分にメニューを設置しましょう。

 

メニューの作り方は「【WordPress】ナビゲーションメニューの作り方【メニュー追加・階層】」をどうぞ。

【WordPress】ナビゲーションメニューの作り方【メニュー追加・階層】
WordPressでナビゲーションメニューの作り方をお探しの方向け。 Webサイトの上部にナビゲーションメニュー(案内メニュー)を設置することで、ユーザーは欲しい情報を探しやすくなりますので、Webサイトを作る時は必ず設置するようにし...

ウィジェットの設置

サイドバーやフッターにウィジェットを設置しましょう。

サイドバーに新着記事を表示する方法

WordPressは標準でサイドバーに新着記事を表示させる機能がありますが、設定項目が少なく、サムネイルも表示されないので非常にシンプルです。

Lightningテーマの機能を使うと、サムネイル画像はもちろん、日付の表示や表示したい記事タイプなど、様々な設定が可能です。

【WordPress】新着記事一覧をサイドバーに表示する方法【Lightning】
Lightningテーマをお使いの方で、新着記事一覧をサイドバーに表示する方法をお探しの方向け。 WordPressでは、新しい記事を投稿すると、新着記事一覧を自動で出力することができます。 この記事では、新着記事一覧をサイドバーに...

フッターのウィジェット

フッターにウィジェットを設置しましょう。

【WordPress】フッターにウィジェットを追加する方法【Lightning】
Lightningテーマを使っていて、フッターにウィジェットを追加する方法をお探しの方向け。 Lightningテーマでは、フッター部分にフッターナビゲーションやウィジェットを追加する事ができます。 この記事では、Lightning...

 

Lightningテーマの集客機能の使い方

Lightningテーマの集客機能の使い方を解説します。

  • CTA機能

上記のとおりです。

CTA機能

LightningテーマはCTA機能を実装しています。

CTAを設置することで、コンテンツを読み終わったユーザーに対して、資料請求やサンプル請求ページへの移動を促したり、ランディングページやメルマガ登録ページへの誘導を促しやすくなります。

【WordPress】LightningテーマのCTAを設置する方法【成約率アップ】
LightningテーマのCTAを設置する方法をお探しの方向け。 Lightningテーマ推奨プラグイン「ExUnit(VK All in One Expansion Unit)」、を使うとCTAを簡単に設定する事ができます。 この...

 

Lightningテーマのカスタマイズ

最後に、Lightningテーマのカスタマイズ方法を4つ紹介します。

  • Lightning有料版
  • フッターのコピーライトの削除方法
  • カスタム投稿タイプ
  • 投稿者情報の表示

上記のとおりです。

Lightning有料版

Lightningの有料版を導入すると、ノンコードでデザインをカスタマイズできます。

また、業種別にコンテンツデータ(有料)が用意されてますので、データを使えばテキストと画像を変えるだけで簡単にイメージどおりのサイトが作れるようになります。

フッターのコピーライトの削除方法

ライトニングテーマはフッターにコピーライトが表示されていますが、コピーライトは削除してもOKです。

このことは、公式サイトのFAQにも書かれています(テーマ作成者さんに対する感謝の念が堪えません)。

 

ですので、コピーライトを消したいという方は削除しましょう。

【WordPress】Lightningテーマのコピーライトを削除する方法
Lightningテーマのコピーライトを削除する方法をお探しの方向け。 Lightningテーマはシンプルなデザインで使いやすく、Web集客に必要な機能も組み込まれており、無料とは思えないほど高機能なテーマです。 ただ、このテー...

カスタム投稿タイプ

Lightningテーマは標準でカスタム投稿タイプを実装しています。

カスタム投稿タイプを使うことで、通常のブログ記事とは別に、商品情報や製品ポートフォリオ、製品導入事例、更新情報などを管理できるようになります。

【WordPress】Lightningテーマのカスタム投稿タイプを実装する方法
Lightningテーマのカスタム投稿タイプの使い方をお探しの方向け。 WordPressでは「投稿」と「固定ページ」の2つの投稿タイプしか使用できません。 しかし、LightningテーマのExUnitの機能である「Custom ...

 

なお、カスタム投稿は全ての投稿に日付が表示されるようになっていますので、日付の表示をしたくないという方は、以下の記事でカスタマイズ方法を紹介していますので、是非参考にして下さい。

【Lightningテーマ】カスタム投稿の日付を非表示にする方法
WordPressは通常、「投稿」と「固定ページ」という2種類の投稿タイプがありますが、「Lightningテーマ」の推奨プラグインExUnitをインストールすると、カスタム投稿タイプを使う事ができます。 カスタム投稿は通常の投稿のように...

投稿者情報の表示

記事下に投稿者情報を表示したい場合、「VK Post Author Display」というプラグインを使うと、投稿者情報の表示が可能になります。

ちなみに「VK Post Author Display」は「Lightningテーマ」の開発会社が作られたもので、テーマ同様、無償で配布されてます。

詳しくは下記記事をどうぞ。

【WordPress】記事下に投稿者プロフィールを表示する「VK Post Author Display」
WordPressブログの記事下に、投稿者情報(執筆者プロフィール)を表示するプラグインをお探しの方向け。 ブログの記事下は、記事を最後まで読んだユーザーの目に留まりやすい場所なので、ここに投稿者プロフィールを表示することで、ユーザー...

 

まとめ

以上、WordPressのLightningテーマの使い方や設定方法を解説しました。

Lightningテーマを使えば、企業サイトはもちろん、店舗、サロン、クリニックなどのビジネスサイトを、初心者の方でもプロが作ったようなサイトを自作できるようになります。

設定方法を見ながら手を動かせば作れるようになりますので、是非、サイト運営にチャレンジしてみて下さい。

 

Lightningの無料版では物足りないという方は、有料版がおすすめです。「Lightning有料版でノンコードカスタマイズ【デザイン強化】」という記事でも解説しているとおり、マウス操作でデザインカスタマイズができるようになります。

ヘッダーデザインの変更や、動きのあるページ(アニメーション効果)もブロックエディタで簡単に挿入できます。

プロの業者が作ったようなカスタマイズが可能になりますので、無料版の使い方をマスターしたら、導入を検討してみて下さい。

制作業者が有料版Lightningを使って、サイト制作を行っているケースが結構あります。

 

 

人気記事【SEO】検索順位チェックツールおすすめ比較【無料試用あり】

トップへ戻る
タイトルとURLをコピーしました