ワードプレステーマ Lightning(ライトニング) のVK Exunitの使い方

Lightning VKEXunitの使い方
ホームページの作り方に関する記事一覧はこちらをご参照ください。
【ここだけ見れば作れちゃう!】初心者向けホームページの作り方まとめ
 

今回はワードプレスの有名無料テーマ「Lightning(ライトニング)」のオプションプラグイン「VK Ex Unit」と「Lightning Advanced Unit」のインストールと設定方法について説明します。
 

前提条件

ワードプレスのテーマ「Lightning」をインストール・有効化していること。
ワードプレステーマ lightning

 

【メルマガ登録はこちら!!】
ワードプレスの便利な使い方情報をGET

WordPress 自分でホームページ・ブログを作成したい個人事業主のためのWebスクール・教室 ウェブストエイト

 

 

Lightningをオリジナリティあふれるデザインにするならオプションデザインスキンがオススメ!

Lightningをベースに和風なデザインや親しみやすいデザインに簡単に変更でき、便利な追加機能も多数あります。詳細はこちら

lightning-jpnstyleを利用したオリジナルデモサイト
Lightning オプション和風デザインスキン JPNStyle 拡張ウィジェット Media Posts プレビュー

 

Lightningオプションプラグインを導入する

Lightningオプションプラグインについて

まずは下記の2つのLightningオプションプラグインを導入します。通常、両方2つともインストールすればOKです。

  • VK All in One Expansion Unit
  • Lightning Advanced Unit

 

VK All in One Expansion Unit
多くのウェブサイトで使う機能を実装し、機能個別で有効/無効を制御出来るようにした多機能プラグイン

以下のような機能(抜粋)があります。

  • PR Block
  • 子ページインデックス表示機能
  • お問い合わせ先情報表示
  • コールトゥアクション(CTA)表示
  • 独自のウィジェットアイテム
  • HTMLサイトマップ出力

(※)詳細はVK All in One Expansion Unit 公式サイトをご覧ください。

Lightning Advanced Unit
Ligthning固有の主に見た目のデザインに関する機能拡張を実装したプラグイン

 

▲▲目次に戻る▲▲

Lightningオプションプラグインストール

まずLightningの2つのオプションプラグインをインストールしていきます。
 

ダッシュボード上部に推奨プラグインのインストールリンクがありますので、リンクをクリックします。
lightning プラグインの設定

下記の手順で2つのプラグインをインストールします。
Lightning VKEXUnitのインストール

戻るを選択します。
Lightning VKEXUnitのインストール後戻る

下記の手順で2つのプラグインを有効化します。
Lightning VKEXUnitの有効化

ダッシュボードへ戻るを選択します。
lightning プラグインの設定8

インストール後はダッシュボード上部に「VK Unit」という項目が追加されていますのでここで設定を行なっていきます。
Lightningプラグイン VK ExUnit
 

【PR】個人事業主のHPにオススメ!無料テーマLightningの拡張デザインスキン

和風デザインならこちら!

親しみやすいデザインならこちら!

 

▲▲目次に戻る▲▲

Lightning プラグインの設定

VK Exunitの機能有効化設定

まずVK Exunitの各機能の有効化設定を先に行います。VK Exunit>有効化設定を選択してください。
lightning プラグインの設定9

機能一覧が表示されます。
vkexunit 機能一覧画面

必要でない機能のチェックを外し、必要な機能にチェックを入れます。ここでは下記のようにチェックを入れて更新しておきましょう。
lightning vkexunitの機能有効化
 

▲▲目次に戻る▲▲

VK ExUnit メイン設定

VK EXUnit>メイン設定を選択します。
lightning VK EXUnit>メイン設定

有効化した機能に対する設定ができますので、ここで必要な情報を入力していきます。
lightning EXunit メイン設定

VKExunitのSNS設定

VKExunitでソーシャルメディア連携の機能を有効化していると「follow me」や「SNSボタン」が表示されます。
各ページに表示されるSNSボタン

SNS系のボタン表示は下記のメイン設定から行うことができます。また、All in one SEO Packのソーシャルメディア機能と併用している場合は、OGP系の設定をはずしておきましょう。
VK ExunitのSNS設定
 

特定の固定ページでお問い合わせ情報を掲載する

VK Exunitを利用して特定のページでお問い合わせ情報を掲載してみましょう。
 

まずはメイン設定で必要なお問い合わせ情報を入力します。
lightning VK EXUnit>メイン設定で必要な情報を入力
 

任意の固定ページの記事下で、お問い合わせ情報にチェックを入れます。
任意のページで表示したい機能にチェックを入れます。ここではお問い合わせ情報
 

お問い合わせ情報が表示されるようになります。
お問い合わせ情報が本文下部に表示されました。
 

HTMLサイトマップ設定、CalToAction、広告の挿入についてはここでは割愛します。
さらに詳しく機能をご覧になりたい方はVK All in One Expansion Unit 公式サイトをご覧ください。
 

▲▲目次に戻る▲▲

VKExunitのウィジェット機能を利用する

今回ご紹介したLightningオプションプラグインを導入すると、様々な便利なウィジェットが利用できるようになります。
 

下記にある、LTG_〇〇とVK_〇〇と書いてあるのがightningオプションプラグイン導入により新たに追加されたウィジェットです。
VK Exunit ウィジェット機能
 

ここでは下記のウィジェットについてご紹介します。

  • VK_最新情報で最新記事一覧を表示する
  • VK_お問い合わせ情報でお問い合わせ情報を表示する
  • VK_PR BlockでPRエリアを作成する
  • VK_プロフィールでプロフィールを表示する
  • VK_FB Page PluginでFBページを表示する
  • LTG_全幅見出しを表示する

 

本手順の前提条件

事前に、VKExUnitの有効化設定でウィジェットにチェックが入っていることを確認してください。
VK EXunit ウィジェット機能

 

VK_最新情報で最新記事一覧を表示する

最新記事をサイドバーに表示する例です。外観>ウィジェットからVK_最新記事を選択してサイドバーに設置します。
VK_最新記事
 

通常の投稿一覧の場合はそのままでOKです。通常自動保存されます。
VK Exunitをサイドバーに配置
(投稿IDをカスタム投稿用のIDに変更するとカスタム投稿タイプ一覧が表示されます)
 

トップページを見ると、最新の投稿記事一覧が表示されました。以上で設定は完了です。
サイドバーに投稿記事一覧が表示されました
 

▲▲目次に戻る▲▲

VK_お問い合わせ情報でお問い合わせ情報を表示する

お問い合わせ情報をサイドバーに表示してみましょう。まずは、VK_EXUnitのお問い合わせ情報に必要情報を入力しておいてください。
lightning VK EXUnit>メイン設定で必要な情報を入力
 

外観>ウィジェットからVK_お問い合わせ情報を選択してサイドバーに設置します。
VK_お問い合わせ情報
 

VK_お問い合わせ情報をサイドバーに配置します。
VK_お問い合わせ情報をサイドバーに配置
 

サイドバーにお問い合わせ情報が表示されました。以上で設定は完了です。
サイドバーにお問い合わせ情報が表示されました
 

▲▲目次に戻る▲▲

VK_PR BlockでPRエリアを作成する

VK_PR Blockをトップページコンテンツエリア上部に配置します。
VK_PR Blockをトップページコンテンツエリア上部に配置します。
 

タイトル・本文・画像・リンクなどPR Blockの設定を行います。
タイトル・本文・画像・リンクなどPR Blockの設定を行います。
 

トップページにPRブロックが表示されました。
トップページにPRブロックが表示されました
 

▲▲目次に戻る▲▲

VK_プロフィールで表示する

ここでは、プロフィールをフッターに掲載してみましょう。外観>ウィジェットからVK_プロフィールをフッターエリア1に配置します。
VK_プロフィールをフッターエリア1に配置します
 

タイトル・画像、本文、その他必要項目の設定を行います。
VK_プロフィールの設定を行います
 

プロフィールがヘッダーエリア1に表示されました。以上で設定は完了です。
プロフィールがヘッダーエリア1に表示されました
 

▲▲目次に戻る▲▲

VK_FB Page PluginでFBページを表示する

VK_FBPagePluginをフッターウィジェットエリア2に配置します。
VK_FBPagePluginをフッターウィジェットエリア2に配置
 

FacebookページのURLを入力して保存ボタンを押下します。
(※)個人のFacebookアカウントのURLではなく、FacebookページのURLですのでご注意ください。
VK_FBPagePluginの設定。FacebookページのURLを入力して保存ボタンを押下します
 

Facebookページがフッターエリア2に表示されました。以上で設定は完了です。
Facebookページがフッターエリア2に表示されました
 

▲▲目次に戻る▲▲

LTG_全幅見出しを表示する

LTG_全幅見出しはトップページを1カラムレイアウトで設定する場合に設定可能な項目です。
(トップページにサイドバーを表示させる場合は本項目は設定はできません。)

 

前提条件

事前にトップページを1カラム設定にしておいてください。

上部のカスタマイズボタンを押下します。
WordPressカスタマイズ
 

Lightningデザイン設定を押下します。
Lightningデザイン設定
 

「トップページを1カラムにする」にチェックを入れます。
Lightningデザイン設定 1カラム設定にチェック

 

外観>ウィジェットからLGT_全幅見出しをトップページコンテンツエリア上部に配置します。
Lightning 全幅見出し設定 トップページ上部に配置
 

LTG_全幅見出しの設定を行います。タイトルと画像は必ず設定して保存します。
LTG_全幅見出し設定
 

トップページ上部に全幅見出しが表示されたことを確認します。以上で設定は完了です。

 

▲▲目次に戻る▲▲

VKExunitでカスタム投稿タイプを作成する

ワードプレスでは、通常の「投稿」以外にもカスタム投稿タイプといって「ニュース用ブログ」、「商品一覧用ブログ」など複数のブログタイプを作成することができます。
 

VK Exunitを利用すると、簡単にカスタム投稿タイプが作成できますので、複数のブログを運用したい人はぜひ利用してみてください。

本手順の前提条件

事前に、VKExUnitの有効化設定でカスタム投稿タイプマネージャーにチェックが入っていることを確認してください。
VK EXunit カスタム投稿マネージャーの有効化設定

 

管理メニュー>カスタム投稿タイプ>新規追加を選択します。
カスタム投稿タイプ>新規作成
 

ここでは、カスタム投稿タイプ「ニュース」を新規作成します。
投稿タイプ名:任意のブログ名(例. ニュース)
投稿ID:投稿タイプ名に対応する任意のID名(例. news)
有効化する項目:通常全てにチェックを入れます
カスタム分類:ニュースでカテゴリやタグを利用する場合に入力します(ニュース専用のカテゴリやニュース専用のタグが使えます)
カスタム投稿タイプニュースを新規作成
 

管理メニューにカスタム投稿タイプ「ニュース」が表示されました。
カスタム投稿タイプ>ニュースが管理画面に表示されました
 

つぎに管理メニュー>設定>パーマリンク設定を選択します。
管理画面>設定>パーマリンク設定を選択します
 

ここでは、何もせず保存すればOKです(何も設定はしないのですが、カスタム投稿タイプ追加時に必要なおまじない操作です。)
パーマリンク設定で何もせずそのまま保存します
 

管理メニューのニュースで新規追加してみましょう。ニュース>新規追加を選択します。
カスタム投稿タイプ>ニュースが管理画面に表示されました
 

ニュース用の記事編集画面が表示されます。いくつか記事を追加してみましょう。
カスタム投稿タイプニュースの記事追加画面
 

記事を追加してもそのままでは表示されません。別途、ニュース一覧を表示する設定を行います。いくつか方法はありますが、ここではウィジェットを例に説明します。外観>ウィジェットからVK_最新記事を選択してトップページコンテンツエリア上部に設定してみましょう。
ウィジェットでVK最新記事を追加
 

投稿ID「post」をさきほど作成したニュース用の投稿ID「news」に変更します。その他必要に応じて設定を変更してください。
ウィジェットでVK最新記事でカスタム投稿IDを入力します
 

トップページを確認すると、作成したカスタム投稿タイプ「ニュース」が表示されていることが確認できます。以上で設定は完了です。
トップページにカスタム投稿タイプ ニュース情報が表示されました
 

▲▲目次に戻る▲▲

Ligntningのおすすめオプションプラグイン

Lightningを利用してホームページを作るときに「もうちょっとデザインを変更したい!」といった要望もあるかと思います。
 

そういった方のためにLightningでは、デザインオプションを販売しております。ここでは、おすすめのLightningデザインオプションをご紹介します。
 

和風デザイン JPNSTYLE

Lightning 和風デザインスキン
 

和風をコンセプトとしたLightningのデザインオプションです。Lightningのテーマを利用している環境で、本プラグインを導入・有効化すると和風なデザインを簡単に設定することができます。
 

魅せる、和風サイトデザイン

今回ベクトルとしては初めての「和」をモチーフにしたデザインスキンをリリース!
ページ背景やタイトルアイコンの設定をしていただくことで簡単に和風サイトを構築できます。
また、ヘッダー画像を設定したり、ページ背景をデザインしたり…テンプレートデザインスキンでありながら個々のサイトに合わせたデザインに変更できる機能を付属させました。
和をイメージした WordPress Lightning 専用デザインスキン「JPNSTYLE」でオリジナルサイトの制作を楽しんでください!

Lightning JPNSTYLE ダウンロードはこちらからできます

追加で変更できる主な項目

  • ヘッダー・フッターの背景色を任意の色に変更できます。
  • コンテンツ部分の背景色を任意の色に変更できます。背景画像を設定することも可能です。
  • トップページ以外の固定ページや投稿ページのヘッダー部分に任意の画像を設定することができます。
  • 投稿一覧(アーカイブページ)の一覧表示形式を複数の形式から変更できます。
  • ウィジェットの配置エリアが増えます(トップページコンテンツエリア左・右・下部など)
  • ウィジェットにMedia Postが増えます(投稿の表示形式)


和風デザインのデモサイトはこちら
 lightning-jpnstyleを利用したオリジナルデモサイト

Lightning JPNSTYLE ダウンロードはこちらをクリック

 

設定画面(一例)

以下は和風デザインJPNSTYLEの設定項目例です。
 

■和風デザインスキンは、テーマとしてではなくプラグインとしてインストールします。
Lightning JPNStyle プラグイン画面
 

カスタマイズ画面を選択します。
Lightning オプション和風デザインスキン JPNStyle カスタマイズ
 

Jpnstyleを選択して公開ボタン押下後、更新ボタンを押下します。
Lightning オプション和風デザインスキン JPNStyle カスタマイズ デザイン設定
 

選択項目が増えています。カスタマイズ系は主にこちらから設定することができます。
Lightning オプション和風デザインスキン JPNStyle カスタマイズ項目
 

■アーカイブページの表示設定
Lightning オプション和風デザインスキン JPNStyle アーカイブページの設定
 

■ウィジェットでトップページコンテンツエリア左・右・下が追加されます。
Lightning オプション和風デザインスキン JPNStyle 拡張ウィジェット トップページコンテンツエリア
 

■ウィジェット画面では、Media Postsウィジェットが追加されています。Lightning オプション和風デザインスキン JPNStyle 拡張ウィジェット Media Posts
 

Media Postsをウィジェットとして追加することで、投稿一覧を下記のようにビジュアライズに表示することができます。
Lightning オプション和風デザインスキン JPNStyle 拡張ウィジェット Media Posts プレビュー
 

このMedia Posts機能を利用すると、投稿一覧を綺麗に見せることができます。カスタム投稿タイプにも利用できて、ウィジェットで簡単に挿入できるのでとてもオススメです。

Lightning JPNSTYLE ダウンロードはこちらをクリック

(※)その他の詳細は公式サイトでご確認ください。
 

▲▲目次に戻る▲▲

親しみやすいデザイン PALE

Lightning Paleデザインスキン
 

「優しさ」や「安心感」のある親しみ易いデザイン

優しい質感の背景テクスチャとヘッダーナビゲーションのアイコン設置で、親しみ易くかわいらしいデザインスキンになります。

背景テクスチャとヘッダーナビゲーションのアイコンも数種類ございますので、サイトに合わせたものを簡単に設置できます。

保育関係・介護関係・小児科・歯科医院・ヘアサロン・ペットショップなど、安心感を与えたいサイトにオススメです。

 

Lightning Pale ダウンロードはこちらから
 

paleを使ったデモサイトはこちら
paleデモサイト

▲▲目次に戻る▲▲

エレガントで柔らかな印象のデザイン Charm

Lightning charmデザインスキン
 

「Charm」は、エレガントで柔らかな印象のデザインが特徴です。テーマ全体のフォントに「游ゴシック体」を適用し、アニメーションにはフェードやふんわりとした動きを採用しています。

ヘアサロン・エステサロン・ウェディングなど女性をターゲットとするようなサイトにオススメです。

 

Lightning Charm ダウンロードはこちらから
 

【メルマガ登録はこちら!!】
ワードプレスの便利な使い方情報をGET

WordPress 自分でホームページ・ブログを作成したい個人事業主のためのWebスクール・教室 ウェブストエイト

▲▲目次に戻る▲▲

まとめ

今回はワードプレスの有名無料テーマ「Lightning(ライトニング)」のオプションプラグインのインストールと設定について説明しました。

便利な機能がたくさんあります。使い方の詳細や最新情報は公式サイトに掲載されていますので下記を参照しながら、設定にチャレンジして見てください。

VK All in One Expansion Unit – WordPressでのサイト構築が飛躍的に楽になる多機能統合型プラグイン
 

ホームページの作り方に関する記事一覧はこちらをご参照ください。
【ここだけ見れば作れちゃう!】初心者向けホームページの作り方まとめ
 

今回は以上になります。最後までご覧いただきありがとうございました。
 

【メールマガジンにて限定情報配信】
WordPressやホームページ作成、SEO対策・ウェブ集客に関するウェブストエイトの独自ノウハウを読者限定で配信しています。まずはお気軽にご登録ください。

詳細はこちら

大阪の個別指導Webスクール
「WEBST8」

個人事業主様・経営者様・起業副業など
自分のビジネスのために
ホームページの作り方を
習得するスクール

\ 自分で作る選択を! /

詳しくはこちら

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ABOUTこの記事をかいた人

松本慶

【IT業界でシステムエンジニア歴8年現役Web系フリーランス】

1985年生まれ 立命館大学卒業。 某複合機メーカーで約8年間システムエンジニアとして大阪で勤務後、2016年秋に独立。

「一人一人が創意工夫で思い描く未来を!」 という想いもとに『自分でホームページを作成してWeb集客・売上拡大したい』個人事業主のためのWeb教室・スクール「ウェブストエイト(Webst8)を運営開始。
ウェブやマーケティングなどの覚えたノウハウを自分や周りの目標実現のツールとして使うことにやりがいを感じています。

メルマガ登録はこちら

個人事業主のためのWeb教室・スクール「ウェブストエイト」 ホームページ