今回は、WordPressで有名な無料テーマ「Lightning(ライトニング)」の使い方とオプションプラグイン「VK All in one Expansion Unit (略してVK EXUnit)」と合わせて説明していきます。
■WordPress Lightningでホームページを作成する方法1。基本操作編
WordPress Lightningでホームページを作成する方法2。Lightningオプションプラグイン編。
もくじ
Lightning(ライトニングとは)
| 項目 | 内容 |
|---|---|
| テーマ名 | Lightning（ライトニング） 公式サイトはこちら |
| オススメ度 | 【総合:5】スタンダードなビジネスホームページ向き
|
| コメント | 多くの人が利用しているWordPressの無料テーマです。Lightningを例にしたWordPressの使い方参考書も出版されており、本に書いてある通りに進めるとスタンダートなホームページが作れてしまう、初心者におすすめのワードプレス無料テーマです。 |
(※)【2019年度】タイプ別WordPressおすすめ無料テーマ8選をご紹介の記事より抜粋
「Lightning」は、株式会社ベクターが開発しているWordPressで人気の無料テーマです。利用者が多いので、カスタマイズ情報や使い方もネットで調べるとたくさんヒットします。
Lightningを題材にした本が出版されており、本に書いてある通りに進めるとスタンダートなホームページが作れてしまう、初心者におすすめのワードプレス無料テーマです。
また、無料のオプションプラグイン「VK All in One Expansion Unit (略してVK ExUnit)」が非常に優れていて、EXUnitと連携することで、ホームページの表現とできることがかなり広がります。
より高機能なサイトを作りたい方には、有料の拡張プラグイン「Lightning G3 Pro Unit(旧Lightning Pro)」が販売されているのでおすすめです。
以降、Lightningをインストールした後の前提で説明を進めていきます。
合わせて読みたい記事
こちらの記事「【2019年度版 WordPress使い方総まとめ】ワードプレスの使い方を徹底解説」に、Lightningをベースに、テーマのインストール方法や固定ページや投稿の使い方など基本機能を説明していますので、WrdPressの使い方の基本を知りたい方は合わせてお読みください。
Lightningの基本的な使い方
カスタマイザーの設定は、外観＞カスタマイズ、または、トップページを開いた状態で「カスタマイズ」のどちらかから行うことができます。
■外観＞カスタマイズから、テーマカスタマイザーを開く
■トップページ上部のバーの「カスタマイズ」から、テーマカスタマイザーを開く
トップページスライドショーを変更する
Lightningの場合は、「Lightning トップページスライドショー」からスライドショーの設定変更ができます。
実際に変更してみましょう。下記のようにスライドショーの画像を変更して「公開」ボタンを押せば完了です。
メインカラー変更する
つづいて、メインカラーを変更してみましょう。「Lightning デザイン設定」を選択します。
早速色を変更してみましょう。ここでは、緑系統から赤系統の色に変更しました。
ロゴを変更する
同様に、「Lightning デザイン設定」から、ロゴの変更もできます。
1カラム(サイドバーあり・なし)を設定する
Lightningレイアウト設定から、トップページを1カラムに変更することもできます。カスタマイズ＞Lightningレイアウト設定を選択します。
トップページを1カラム(サブセクション無し)を選択して後悔します。また、トップページ意外にも固定ページや投稿ページなど各テンプレート・表示画面ごとにカラムの設定が可能です。
- 2カラム・・・サイドバーありで表示されます。
- 1カラム・・・サイドバーなしで1カラムになります。本来あったサイドバーはメインコンテンツの下側に1カラム表示で配置されます。
- 1カラム(サブセクション無し)・・・サイドバーなしで1カラムになります。本来あったサイドバーは表示されません。
また、固定ページごとにカラムの設定も可能です。固定ページの編集画面のLightning デザイン設定から、ページごとにカラムの設定ができます。
ここでは割愛しますが、そのほかにも色々な設定ができますので、ぜひ試してみてください。
テーマカスタマイザーに関する詳細な説明は、「WordPress テーマカスタマイザーの使い方を徹底解説」をご参照ください。
VK All in one Expansion Unit (VK EXUnit)の使い方
VK All in One Expansion Unit(VK EXUnit)は、Lightningのオプションプラグインです。無料ですので、Lightningを利用する場合は導入しておきましょう。
WordPress Lightningでホームページを作成する方法2。Lightningオプションプラグイン編。
VK EXUnitには、ホームページを作成する際によく使う便利な機能がまとめられています。具体的には例えば、以下のような機能があります。
EX Unitの主な機能抜粋
- 子ページインデックス表示機能
- お問い合わせ先情報表示
- コールトゥアクション(CTA)表示
- 独自のウィジェットアイテム
- カスタム投稿タイプマネージャー
(※)詳細はVK All in One Expansion Unit 公式サイトをご覧ください。
VK EXUnitをインストール・有効化する
プラグイン＞新規追加を選択します。
VK All in One Expansion Unitを今すぐインストール＆有効化します。
インストール後はダッシュボード上部に「EXUnit」という項目が追加されていますのでここで設定を行なっていきます。
Exunit＞有効化設定から、各機能を有効化する
まずExunitの各機能の有効化設定を先に行います。Exunit＞有効化設定を選択してください。
機能一覧が表示されます。
必要でない機能のチェックを外し、必要な機能にチェックを入れます。ここでは下記のようにチェックを入れて更新しておきましょう。
(※)上記は、2020年4月時点バージョン9.15.5.0の画面です。
つぎに、VK EXUnit＞メイン設定を選択します。
有効化した機能に対する設定ができますので、ここで必要な情報を入力していきます。
VKExunitのSNS設定
VKExunitでソーシャルメディア連携の機能を有効化していると「follow me」や「SNSボタン」が表示されます。
SNS系のボタン表示は下記のメイン設定から行うことができます。また、All in one SEO Packのソーシャルメディア機能と併用している場合は、OGP系の設定をはずしておきましょう。
VKExunitのウィジェット機能を利用する
今回ご紹介したLightningオプションプラグインを導入すると、様々な便利なウィジェットが利用できるようになります。
下記にあるとVK_〇〇と書いてあるのがEXUnit導入により新たに追加されたウィジェットです。
ここでは下記のウィジェットについてご紹介します。
- VK_最新情報で最新記事一覧を表示する
- VK_お問い合わせ情報でお問い合わせ情報を表示する
- VK_PR BlockでPRエリアを作成する
- VK_プロフィールでプロフィールを表示する
- VK_FB Page PluginでFBページを表示する
- LTG_全幅見出しを表示する
本手順の前提条件
事前に、VKExUnitの有効化設定でウィジェットにチェックが入っていることを確認してください。
VK_最新情報で最新記事一覧を表示する
最新記事をサイドバーに表示する例です。外観＞ウィジェットからVK_最新記事を選択してサイドバーに設置します。
通常の投稿一覧の場合はそのままでOKです。通常自動保存されます。
(投稿IDをカスタム投稿用のIDに変更するとカスタム投稿タイプ一覧が表示されます)
トップページを見ると、最新の投稿記事一覧が表示されました。以上で設定は完了です。
VK_お問い合わせ情報でお問い合わせ情報を表示する
お問い合わせ情報をサイドバーに表示してみましょう。まずは、VK_EXUnitのお問い合わせ情報に必要情報を入力しておいてください。
外観＞ウィジェットからVK_お問い合わせ情報を選択してサイドバーに設置します。
VK_お問い合わせ情報をサイドバーに配置します。
サイドバーにお問い合わせ情報が表示されました。以上で設定は完了です。
また、任意の固定ページの記事下に、お問い合わせ情報のチェック欄があります。チェックを入れると固定ページの下部に問い合わせ情報が表示されます。
お問い合わせ情報が表示されるようになります。
HTMLサイトマップ設定、CalToAction、広告の挿入についてはここでは割愛します。
さらに詳しく機能をご覧になりたい方はVK All in One Expansion Unit 公式サイトをご覧ください。
VK_プロフィールで表示する
ここでは、プロフィールをフッターに掲載してみましょう。外観＞ウィジェットからVK_プロフィールをフッターエリア1に配置します。
タイトル・画像、本文、その他必要項目の設定を行います。
プロフィールがヘッダーエリア1に表示されました。以上で設定は完了です。
VK_FB Page PluginでFBページを表示する
VK_FBPagePluginをフッターウィジェットエリア2に配置します。
FacebookページのURLを入力して保存ボタンを押下します。
(※)個人のFacebookアカウントのURLではなく、FacebookページのURLですのでご注意ください。
Facebookページがフッターエリア2に表示されました。以上で設定は完了です。
VK EXUnitでGoogle Analyticsを設定する
VK EXUnitでGoogle Analyticsを設定することができます。
下記のGoogle Anlaytics入力欄にトラッキングコードを入力します(※)。
Google Analyticsのトラッキングコードの取得方法は「https://webst8.com/blog/wordpress-google-analytics」をご参照ください
(応用)VK ExUnitでカスタム投稿タイプを作成する
(補足)カスタム投稿タイプとカスタムタクソノミー(カスタム分類)
WordPressでは、通常の「投稿」以外にもカスタム投稿タイプといって「ニュース用ブログ」、「商品一覧用ブログ」など複数のブログタイプを作成することができます。
■カスタムタクソノミー(カスタム分類)の例 「WEBST8動物園」
また、投稿における「カテゴリー」や「タグ」の「カスタム投稿タイプ版」のことをカスタムタクソノミー(カスタム分類)と言い、こちらも作成することもできます。
■カスタムタクソノミー(カスタム分類)の例 「WEBST8動物園」
合わせて読みたい記事
カスタム投稿タイプ・カスタムタクソノミー(カスタム分類)に関する詳細は「WordPress カスタム投稿タイプとカスタムタクソノミー(カスタム分類)を徹底解説」を合わせてお読みください。
VK Exunitでのカスタム投稿タイプ作成手順
VK Exunitを利用すると、簡単にカスタム投稿タイプが作成できますので、複数のブログを運用したい人はぜひ利用してみてください。
■WordPressテーマLightningでカスタム投稿・カスタム分類を作成する方法(解説動画)
本手順の前提条件
「VK All in one Expansion Unit」をインストール・有効化してください。
また、ExUnitの有効化設定でカスタム投稿タイプマネージャーにチェックが入っていることを確認します。チェックが外れている場合はチェックを入れます。
管理メニュー＞カスタム投稿タイプ設定＞新規追加を選択します。
ここでは、カスタム投稿タイプ「お知らせ」を新規作成します。下記のように入力してみましょう。
■上記で入力した設定内容
| 項目 | 意味 |
|---|---|
| 投稿タイプ名 | 新たに作成するカスタム投稿のブログ名 例)お知らせ |
| 投稿タイプID | カスタム投稿のID名 例)info |
| 有効化する項目 | 有効化する機能 通常全てにチェックを入れればOK |
| REST APIに出力する | ブロックエディター利用時にはチェックを入れればOK |
| カスタム分類 | ニュースでカテゴリやタグを利用する場合に入力します 例)お知らせ用カテゴリ、お知らせ用タグ |
つぎに管理メニュー＞設定＞パーマリンク設定を選択します。
設定＞パーマリンク
何もせず保存すればOKです(何も設定はしないのですが、カスタム投稿タイプ追加時に必要なおまじない操作です。)
管理メニューにカスタム投稿タイプ「お知らせ」が表示されているので、早速新規追加してみましょう、
お知らせ用の記事編集画面が表示されます。いくつか記事を追加してみましょう。
(※補足)クラシックエディターを利用している場合の編集画面
■お知らせ一覧ページ
メニューバーにカスタム投稿の一覧を表示する
外観＞メニューから、カスタムリンクでお知らせ一覧をメニューに追加することもできます。
外観＞メニューから、カスタムリンクでお知らせを追加
関連 メニューバーの追加方法について
WordPressでメニューバーにメニューを追加する方法については「WordPress メニューバー(ナビゲーション)の作り方を徹底解説」をご参照ください。
メニューバーにお知らせが追加されました。
ウィジェットとしてカスタム投稿の一覧を表示する
ウィジェットとして、お知らせ一覧を埋め込むこともできます。外観＞ウィジェットからVK_最新記事を選択してトップページコンテンツエリア上部に設定してみましょう。
関連 ウィジェットの使い方について
WordPressでウィジェットを追加する方法については「初心者でもわかるWordPressウィジェットの使い方を徹底解説/」をご参照ください。
投稿ID「post」をさきほど作成したニュース用の投稿ID「info」に変更します。その他必要に応じて設定を変更してください。
トップページを確認すると、作成したカスタム投稿タイプ「お知らせ」が表示されていることが確認できます。以上で設定は完了です。
様々なブロックを提供「VK Blocks / VK Block Patterns」を使う
VK Blocks および VK Block Patternは、ブロックエディターで利用できるLightning用のプラグインです。
■VK Blocks
■VK Block Patterns
合わせて読みたい記事
ここでは割愛しますが、ブロックエディターの使い方を詳しく知りたい方は「【2023年版】WordPressブロックエディターの使い方を徹底解説」を合わせてご参照ください。
VK Blocks
VK Blocksを利用すると、ホームページ作成でよく使う独自のブロックを利用することができます。
■Lightning オプションプラグイン VK Blocksのデモ(動画解説版)
このほかにも便利なブロックがいくつもあります。ここでは割愛しますが、VK Blocksの使い方を「WordPressテーマ Lightning【VK Blocks】の使い方」に詳しく掲載していますので、あわせてご参考ください。
VK Block Patterns
VK Block Patternsを利用すると、ホームページ作成でよく使うブロックのパターンを利用することができます。
【補足】Ligntningの拡張プラグイン「Go Pro Unit」
Lightningを利用してホームページを作るときに「もうちょっとデザインを変更したい」といった要望もあるかと思います。
Lightningの有料の拡張プラグインがいくつかリリースされており、それらを利用するとさらにハイクオリティーなホームページを作成することができます。
Lightningの拡張プラグインで一番おすすめなのが、Go Pro Unit(旧Lightning Pro)です。
「Go Pro Unit(旧Lightning Pro)」は無料の人気テーマ「Lightning」を大きく機能拡張するためのプラグインです。
Go Pro Unitを導入すると、無料版Lightningよりもさらに高機能で、品質の高いビジネス系ホームページが簡単に構築できます。これから新規でホームページを作る方にも、すでにLightningを利用している方にもおすすめです。
LightningとGo Pro Unit(旧Lightning Pro)の主な機能の違いとしては下記の通りです。
| 機能 | Lightning | Lightning Pro | 備考 |
|---|---|---|---|
| アーカイブページ機能 | × | ◯ | 投稿(カスタム投稿)のアーカイブページを表示変更できる機能 |
| ページヘッダー機能 | × | ◯ | 固定ページや投稿のヘッダー部分に任意の画像を設定できる機能 |
| スマホ時固定ナビ機能 | × | ◯ | スマートフォン表示で下部に固定メニューバーを表示する機能 |
| (デフォルトの)見出しデザイン変更機能 | × | ◯ | 見出しのデザインタイプを変更する機能 |
| ヘッダー上部設定 | × | ◯ | ヘッダーの最上部にボタンや電話番号を表示する機能 |
| フォント切り替え機能 | × | ◯ | フォントタイプをゴシックや明朝体など変更する機能 |
| フッターコピーライトカスタマイズ機能 | × | ◯ | フッターのコピーライト表記を任意の文言に変更する機能 |
| Google Tag Manager連携機能 | × | ◯ | GoogleタグマネージャーのIDを設定する機能 |
| VK Blocks | ブロックエディター利用時に利用できるLightning用ブロック。Proは無料版以上の機能が提供されている。詳細は以下の通り | ||
| ◯ | ◯ | スタッフ。スタッフ紹介をする際に便利なレイアウトのブロック。 | |
| ◯ | ◯ | ふき出し。漫画のような吹き出しを作るブロック。 | |
| ◯ | ◯ | 見出し用のブロック。 | |
| ◯ | ◯ | アラート。警告や注意・お知らせなどに利用できる背景枠のあるブロック。 | |
| ◯ | ◯ | ボタン。ボタンに利用できるブロック。 | |
| ◯ | ◯ | 質問と回答。Q＆Aなどに利用できるブロック。 | |
| ◯ | ◯ | フロー。手順などをフローを示す際に使えるブロック。 | |
| ◯ | ◯ | PR Blocks。三つの丸アイコン(写真)と文言をセットで表示できるブロック。 | |
| ◯ | ◯ | PR Content。写真と画像を横並びに表示できるブロック。 | |
| × | ◯ | 【Pro機能】投稿リスト機能。投稿・カスタム投稿を好きなデザインで一覧表示することができるブロック。 | |
| × | ◯ | 【Pro機能】カード。カードのようなレイアウトを利用できるブロック。 | |
| × | ◯ | 【Pro機能】子ページリスト。固定ページの子ページを一覧表示することができるブロック。 | |
| × | ◯ | 【Pro機能】目次。見出しから目次を自動生成・表示することができるブロック。 | |
| × | ◯ | 【Pro機能】ステップ。手順のようなステップ表示する際に便利なブロック。 | |
| × | ◯ | 【Pro機能】タイムライン。沿革などのような表示する際に便利なブロック。 | |
| VK Blocks レイアウト | ブロックエディター利用時に利用できるLightning用ブロック。Proは無料版以上の機能が提供されている。詳細は以下の通り | ||
| ◯ | ◯ | レスポンシブスペーサー。ブラウザサイズに合わせた高さ(余白)を設定するブロック | |
| × | ◯ | 【Pro機能】Outer。全幅を設定するブロック | |
| LTG Media Posts BS4 | × | ◯ | 任意の投稿一覧(カスタム投稿タイプ対応)をウィジェットとして挿入する機能 |
| 旧機能(現在非推奨) | △ | ◯ |
Lightning Pro バージョン1シリーズの際に主に使われていた機能。現在2.0シリーズでは上述に記載した各種機能で代替されているため非推奨となっている。 例えば下記のような機能が主にあります。
|
(※注)2020年4月時点で確認した内容です。
追加機能の更新や仕様変更などのケースもありますので最新の正確な情報はLightning Pro(ライトニング プロ)よりご確認ください。
■無料版Lightningのレイアウト
またページヘッダー機能を使うと、固定ページや投稿のヘッダーに任意の画像を設定することができます。
■Lightning Proのページヘッダー機能
■無料版Lightningのページヘッダー
合わせて読みたい記事
Lightning Proの使った感想や機能については「【Lightning G3 Pro】無料版の違いやデメリットを解説」を合わせてご覧ください。
また、Lightning Proの具体的な使い方を「人気のWordPressテーマLightning Proの使い方を徹底解説」に記載していますので合わせてご参照いただければ幸いです。
まとめ
今回はワードプレスで有名な無料テーマ「Lightning(ライトニング)」のオプションプラグインのインストールと設定について説明しました。
使い方の詳細や最新情報は公式サイト「VK All in One Expansion Unit - WordPressでのサイト構築が飛躍的に楽になる多機能統合型プラグイン」に掲載されていますので下記を参照しながら、設定にチャレンジしてみてください。
また、さらに高機能・魅力的なホームページを作りたい場合、有料の拡張プラグイン「Lightning G3 Pro Unit(旧Lightning Pro)」を利用することでさらにできることが広がります。
Go Pro Unit(旧Lightning Pro)の使い方を説明した記事を「人気のWordPressテーマLightning Proの使い方を徹底解説」でご紹介していますので使い方がわからない方は合わせてご覧ください。
今回は以上になります。最後までご覧いただきありがとうございました。
個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。
YouTubeチャンネル開設しました！
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。
ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。
」の使い方とオプションプラグイン「VK All in one Expansion Unit (略してVK EXUnit)){kind=link}