【したいことが探せる】テーマLightning G3 使い方目的別ガイド
ワードプレスの人気テーマLghtiningは無料で始めることができて、後からでも有料版の拡張プラグインで機能を追加することが簡単にできます。
無料版でも必須プラグインAll in One Expansion UnitやVK Blocksを含めるとかなり高機能なので、どの機能がどこにあるのか時々わからなくなりますよね。そこで私自身の頭の整理も兼ねて目的別に使い方ガイドを作成しました。
前提として、必須プラグイン（All in One Expansion Unit（通称ExUnit）、VK Blocks、VK Block Patterns）はインストール・有効化した状態での使用方法です。
検証時（2022年1月16日現在）の各バージョンは以下の通り。
・テーマLightning ・・・14.13.6
・プラグインExUnit・・・9.70.0.0
記事内の構成がわかりやすいよう大見出しのみの目次を表記しておきます。
（詳細目次はこの下にあります。詳細目次が邪魔な場合は非表示ボタンをクリックしてください）
- サイトの基本情報を設定する
（サイトタイトル・キャッチフレーズ・ファビコン） - トップページの設定
（投稿一覧ページか固定ページかを選ぶ） - デザインスキンを使う場合
- サイト全体のデザイン
（レイアウト・背景画像・配色・フォント・ページトップボタンなど） - ナビゲーションの設定
- サイトマップの作成
- SNSシェアボタン
- ヘッダー部のデザイン
- サイドバーのデザイン
- 記事一覧・カテゴリー・アーカイブページのデザイン
- 各個別ページ（トップページ1stビュー・投稿・固定ページ）のデザイン
- 記事の作成
- ウィジェットでコンテンツを作成
- SEO関連の設定
- アクセス解析およびGoogleタグマネージャの設定
- 高速化設定
- アドセンス
- カスタムCSSの記述場所
全体の流れとしては以下の通りです。
| 概要 | 大見出しナンバー |
|---|---|
| サイト全体の設定・デザイン | ①～④ |
| ナビゲーション・リンク関連 | ⑤～⑦ |
| サイトの共通パーツ・ページのデザイン | ⑧～⑪ |
| コンテンツの作成 | ⑫⑬ |
| SEOや各種設定 | ⑭～⑰ |
| カスタムCSS記述場所 | ⑱ |
ちなみにテーマLightningと必須プラグインのインストール方法等は次の記事で紹介しています。合わせてご覧ください。
https://web-children.com/2021/10/25/lightning-theme-and-plug...また本記事は、無料版Lightningの使い方となっています。有料版であるLightning G3 Pro Unitについては、こちらの記事を参照ください。
- 1. サイト基本情報を設定する
（サイトタイトル・キャッチフレーズ・ファビコン） - 2. トップページの設定
（投稿一覧ページか固定ページかを選ぶ） - 3. デザインスキンを使う場合
- 4. サイト全体のデザイン
（レイアウト・配色・フォント・画像など） - 5. ナビゲーションの設定
- 6. サイトマップの作成
- 7. SNSシェアボタンの表示
- 8. ヘッダー部のデザイン
- 9. サイドバーのデザイン
- 10. 記事一覧・カテゴリー・アーカイブページのデザイン
- 11. 各個別ページ（投稿・固定ページ）のデザイン
- 12. カスタム投稿タイプの設定
- 13. ブロックエディターでメインコンテンツ（記事）を作成
- 14. ウィジェットでコンテンツを作成
- 15. 行動喚起（CTA）とサイト内回遊率アップの施策
- 16. SEO関連の設定
- 17. アクセス解析およびGoogleタグマネージャー設定
- 18. 高速化設定
- 19. アドセンス
- 20. カスタムCSSの記述場所
- 21. まとめ
サイト基本情報を設定する
（サイトタイトル・キャッチフレーズ・ファビコン）
外観＞カスタマイズ＞サイト基本情報
- ”サイトのタイトル”を入力
- ”キャッチフレーズ”を入力
- ”サイトアイコン”をアップロードして設定
（512×512px以上の正方形画像）
トップページの設定
（投稿一覧ページか固定ページかを選ぶ）
外観＞カスタマイズ＞ホームページ設定
または
設定＞表示設定
次のいずれかをサイトトップページとする
- 最新の投稿一覧
- 固定ページ
※固定ページをトップページに指定するいわゆる本格ホームページ型サイトの構築には、Lightningのスターターコンテンツを使うと便利です。スターターコンテンツを利用すれば、ホームページ型サイトのひな型が、外観＞カスタマイズから１クリックで作成できます。
スターターコンテンツは次の記事を参照下さい。
デザインスキンを使う場合
外観＞カスタマイズ＞Lightningデザイン設定→
デザインスキン
デフォルトの”OriginⅢ” または ”プレーン”を選択できる。
プレーンは見出しのデザインなどオリジナルのCSSを省略したものです。自分でがっつりカスタムCSSを使ってデザインしていく場合に使うとよいでしょう。
有料プラグインLightning Pro UnitのLightningデザイン設定ではデザインスキンだけでなく、デザインプリセットが準備されています。
サイト全体のデザイン
（レイアウト・配色・フォント・画像など）
サイト全体に共通するデザイン設定です。
レイアウト設定
カラム設定
外観＞カスタマイズ＞Lightningレイアウト＞カラム設定
パソコン表示でのカラム数の設定
（２カラムを選択した場合、モバイルではサイドバーが下に回り込んで１カラムとなります）
- ページのテンプレート毎に次のカラム設定を選択できる
・２カラム
・１カラム
・１カラム（サイドバー要素あり）
※１カラムサイバー要素ありは、サイドバーがメインコンテンツの下に表示されます。 - 設定できるページテンプレートは次の通り
・トップページ
・検索
・404ページ
・アーカイブページ【投稿者】
・アーカイブページ【投稿】
・個別投稿ページ【投稿】
・個別投稿ページ【固定ページ】
・個別投稿ページ【メディア】
特定の個別投稿ページだけカラム数を変更したい場合は、各ページの編集エディター内で指定することができます。
編集画面右のパネル内にあるLightningデザイン設定でカラム数を選択変更します。
（”共通設定を適用”ならば外観＞カスタマイズで設定したカラム数となります）
有料プラグインLightning Pro UnitのLightningレイアウト設定では、さらにコンテナ幅をデバイスサイズごとに設定することができます。
サイドバーの位置設定
外観＞カスタマイズ＞Lightningレイアウト設定＞サイドバー設定
２カラムを選択した場合、パソコン表示でのサイドバーの位置を指定できる
- 左右の指定（デフォルトは右）
（サイドバーを左 or 右） - サイドバーの上下固定位置の選択
・上端固定優先（デフォルト）
・下端固定優先
・サイドバーを固定しない
背景画像
外観＞カスタマイズ＞背景画像
背景画像をアップロードして設定
配色設定
外観＞カスタマイズ＞色→
背景色
キーカラー
- 背景色の設定
- キーカラーの設定
※背景色はヘッダー部には適用されません。
キーカラーは、見出しや枠線、ボタンのホバー色、メニューのドロップダウンなどに使用されます。
背景色に薄めのグレー、キーカラーにグレイッシュな緑色を設定した場合の事例です。
有料版プラグインLightning Pro Unitを使えば、リンク文字色やヘッダー部・ページヘッダー部・フッター部の背景色・文字色が設定できるようになります。
カラーパレットの設定
外観＞カスタマイズ＞色→
Color Palette Setting
５種類の色をカラーパレットに登録できる
カラーパレットに色を登録しておくと次のメリットがあります。
- ブロックエディターで文字色や背景色を設定するときに登録した色を選択できる
- 登録した色を変更すると作成済コンテンツの色も自動的に一括変更される
詳しくは次の記事を参照ください。
フォントの設定
無料版Lightningではテーマでフォントの設定はできません。デフォルトではNoto Sans JP（Googleフォント）が採用されています。
フォントの変更にはカスタムCSSを使います。または有料プラグインLightning Pro Unitを使うと簡単です。
次の記事を参照ください。
Font Awesomeの設定
外観＞カスタマイズ＞Lightning Font Awesome
Font Awesomeのバージョン設定
・6 SVG with JS（非推奨）
・6 Web Fonts with CSS（バージョン６）
・5 Web Fonts with CSS （バージョン５）・・・デフォルト（推奨）
・4.7（バージョン4.7）・・・非推奨
・5 SVG with JS ・・・非推奨
※プラグインExUnitに ”fontawesome linkタグの出力設定” がありますが、テーマ側ですでにFont Awesomeデータを保持しているので、有効化の必要はありません。
ページトップボタン
①ExUnit＞有効化設定＞ページトップへ戻る を有効化
（デフォルトですでに有効化済）
②ExUnit＞メイン設定＞ページトップへ戻るボタン
で設定
（または 外観＞カスタマイズ＞ExUnit設定＞ページトップへ戻るボタン でも可能）
①の有効化でページトップへ戻るボタンが表示される
②の設定で ”タッチデバイスの端末では表示しない” にチェックを入れると、スマホなどのタッチスクリーンでは表示されなくなる。
スムーススクロールの設定
スムーススクロールとはページ内リンク先へ一気に飛ぶのではなく、スクロールしながら飛ぶ機能です。
①ExUnit＞有効化設定＞スムーススクロール を有効化する
（デフォルトでは有効化済）
②ExUnit＞メイン設定＞スムーススクロール でJavascriptまたはCSSを選択する
（デフォルトではJavascript）
ナビゲーションの設定
Lightningで設定できるナビゲーション
Lightningで設定できるナビメニューは次の3種類です。
- グローバルナビゲーション（ヘッダーナビ）
- フッターナビ
- モバイルナビ
グルーバルナビゲーション
フッターナビゲーション
モバイルナビゲーション
ワードプレス標準機能である 外観＞メニュー の画面で、メニューの位置を選択すれば設定できます。
- Header Navigationにチェックを入れるとグローバルナビゲーション（ヘッダーナビ）となる
- Footer Navigationにチェックを入れるとフッターナビとなる
- Mobile Navigationにチェックを入れるとモバイルナビとなる
モバイルナビの設定をしない場合、ヘッダーナビと同じ項目がモバイルナビに表示されます。
すなわち、ヘッダーナビとは違ったメニュー表示をしたい場合のみ、モバイルナビを設定するとよいでしょう。
ワードプレス標準のメニュー機能設定方法については次の記事を参照ください。
次の記事ではナビゲーションについてLightningの無料版と有料版の違いを詳しく紹介しています。
グローバルナビゲーションにキャプチャーをつける
グローバルナビではメニューにキャプチャー（説明文）をつけることができます。
キャプチャーのつけ方は次の記事で”オプションを設定する”を参照ください。
モバイルナビの表示設定
外観＞カスタマイズ＞Lightningモバイルナビ
- ハンバーガーメニューの表示位置の選択
（左上 or 右上：デフォルトでは左上） - ナビゲーションメニューが開くときのスライド方向
・ドロップダウン（デフォルト）
・左→右
・右→左
モバイルナビにウィジェットでコンテンツ挿入
モバイルナビには上部と下部の2カ所にウィジェットでコンテンツを挿入することができます。
手順は以下の２ステップです。
- 外観＞ウィジェット を開ける
- モバイルナビ上部、モバイルナビ下部 それぞれにコンテンツを配置する
モバイルナビ上部に検索ブロックが配置した事例です。
サイトマップの作成
ここでいうサイトマップとはユーザーにサイト情報を示すHTMLサイトマップのことです。
（検索エンジンに情報を与えるXMLサイトマップとは異なります）
サイトマップ作成の準備
①ExUnit＞有効化設定＞HTMLサイトマップの表示 を有効化する
②ExUnit＞メイン設定＞HTMLサイトマップ設定 でサイトマップから除外したい投稿タイプにチェックを入れる
（”投稿” および “カスタム投稿" をサイトマップから除外することができます）
サイトマップの作成手順
上記の準備ができたら次の手順で作成します。
- 固定ページを”新規追加”
- 編集エディターの下部にある”挿入アイテムの設定”を開け、”HTMLサイトマップの表示”にチェックを入れる
- ページのタイトルを”サイトマップ”、パーマリンクを"sitemap"として公開
（わかりやすいようにこうしましたが、それぞれ任意の名前でOKです）
以上でこの固定ページを表示させるとサイトマップとなっているのがわかります。
サイトマップは、VK EXUNIT BLOCKSの中にある”HTMLサイトマップ”ブロックを使えば、記事内の任意の場所やウィジェットエリアに表示させることもできます。
（ExUnitでのHTMLサイトマップの表示有効化は必要です。）
サイトマップから特定のページを除去したい場合
上記のサイトマップ事例では、投稿とカスタム投稿も表示されています。これらを表示から削除したければサイトマップ作成の準備で紹介した手順で可能です。
また固定ページの中の特定のページを削除は次の手順で可能です。
（例えば、”サイトマップ”という固定ページはサイトマップの中に不要なので削除する）
- 削除したい固定ページの編集エディターを開ける
- 編集エディターの下部にある”HTMLサイトマップの非表示設定”を開け、”このページをHTMLサイトマップに表示しない”にチェックを入れる
- 固定ページを更新
SNSシェアボタンの表示
SNSシェアボタンの表示設定は、SNSセッティングを参照ください。
ヘッダー部のデザイン
ヘッダーロゴの画像化
ヘッダー内にはサイトタイトルが表示されますが、これをロゴ画像に置き替えることができます。
外観＞カスタマイズ＞Lightningデザイン設定→
ヘッダーロゴ画像
サイトタイトルを画像に置き替えて表示する
（推奨画像サイズ500×120px）
ロゴ画像の推奨サイズは500×120pxですが、実際の表示サイズはこれよりも小さくなります。また、推奨以外のサイズのロゴだと、より小さくなって見にくくなります。そんな場合の対処方法として次の記事を参照ください。
サイドバーのデザイン
サイドバーの位置
２カラムレイアウトを選択すると、パソコン表示ではサイドバーが表示されます。
また、サイドバーの位置（左右の選択および上下方向の固定表示）も設定できます。
詳細はレイアウト設定をご覧ください。
サイドバーへのウィジェット配置
サイドバー内でのコンテンツの表示はウィジェットを使います。
ウィジェットに関してはこちらをご覧ください。
記事一覧・カテゴリー・アーカイブページのデザイン
記事一覧レイアウト
Lightningの記事一覧（最新の投稿ページ、カテゴリー・アーカイブページ）のデザインは、すべて以下のようなリストタイプとなります。
※有料版プラグインLightning G3 Pro Unitを使えば、カード型など他のレイアウトを選んだり、記事の表示順も公開日順以外（更新日順やランダムなど）を選ぶことができます。
サイトのトップページを固定ページに指定して記事一覧を表示させる場合は、以下の記事を参照ください。
デフォルトサムネイル画像の作成
①ExUnit＞有効化設定＞デフォルトサムネイル画像 を有効化
（デフォルトですでに有効化済）
②ExUnit＞メイン設定＞デフォルトサムネイル画像
で画像をアップロード
（または 外観＞カスタマイズ＞ExUnit設定＞デフォルトサムネイル設定 でも可能）
各投稿や固定ページでアイキャッチ画像を設定していない場合、デフォルトサムネイル画像が表示される
各個別ページ（投稿・固定ページ）のデザイン
トップページの1stビューのスライダー設定
Lightningでは、サイトのトップページにスライダーが標準で設置されています。
トップページが固定ページ指定なのかワードプレスデフォルトの最新記事一覧ページなのかは問いません。
外観＞カスタマイズ＞Lightning トップページスライドショー
最大３枚までのスライド画像を指定できる。それぞれの画像には以下の設定が可能。
（もちろん、スライダーの非表示化も可）
★スライダー共通設定
- スライド静止時間、スライド切り替え間隔
- スライド効果：次の4種から選択
slide・fade・overflow・flip
★各画像毎の設定
- スライドタイトル
- スライドテキスト
- ボタンのテキストとリンク先URL
- タイトル・テキストとボタンの位置
（左・中央・右 から選択） - スライド上の文字色
- 文字に影をつけるか否か
- スライド画像：PC用、モバイル用を別々にアップロード可能
（PC用推奨画像サイズ1900×600px、モバイル用は任意） - スライド画像の代替テキスト（alt属性に反映される）
- スライドにオーバーレイする色と透過率
アイキャッチ画像の記事内自動挿入
ExUnit＞有効化設定＞アイキャッチ画像自動挿入 を有効化
（デフォルトでは有効化していない）
アイキャッチ画像を記事の本文の最初に表示する
各記事毎にアイキャッチ画像の自動挿入をキャンセルすることもできます。
（編集エディター内下部で以下のように設定）
関連記事の表示設定
ExUnit＞有効化設定＞関連記事 を有効化
（デフォルトですでに有効化済）
投稿記事下に関連記事を表示する
※関連記事は同じタグの記事を基準に選んで表示します。
カスタム投稿タイプの設定
投稿・固定ページとは別に独自の投稿タイプを設定する機能が ”カスタム投稿タイプ” です。
例えばお店のサイトで投稿を使ってスタッフブログを運用している場合、それとはまったく別にお店の ”お知らせ” を作成するのに使うとよいでしょう。
まずは準備としてExUnitでカスタム投稿タイプを有効化します。
ExUnit＞有効化設定＞カスタム投稿タイプ を有効化
（デフォルトですでに有効化済）
有効化するとダッシュボードメニューに ”カスタム投稿タイプ設定” が表示されます。
カスタム投稿を新規で作成するには次の手順で作業を進めます。
- ダッシュボードメニュー カスタム投稿タイプ＞新規追加 と進めて設定画面に入る
- カスタム投稿タイプ名を入力
- 投稿タイプIDを入力
- 有効にする項目にチェックを入れる
（タイトル・本文・投稿者・アイキャッチ画像・抜粋・コメント・リビジョン） - ブロックエディタ対応にチェックを入れる
- カスタム分類を設定する（任意）
- 最後に”公開”をクリック
- ダッシュボードメニュー 設定＞パーマリンク を開けて ”変更を保存” をクリック
上の例のように ”お知らせ” というカスタム投稿タイプを設定すると、ダッシュボードメニューの中に ”お知らせ” が表示されるようになります。
あとは投稿で記事を作成するのと同様の要領でコンテンツを作成していくことができます。
ブロックエディターでメインコンテンツ（記事）を作成
各記事のコンテンツはブロックエディターを使って構築していくことになります。
Lightningの必須プラグインVK Blocksには、ビジネスサイトのコンテンツを作成するのに便利なブロックがたくさん準備されています。詳しくは公式サイト『VK Blocksの使い方』を参照ください。
ここでは記事（コンテンツ）を作成する上で便利な設定（準備）や機能について紹介します。
カラーパレット
独自カラーを登録しておくとサイトのトーンの統一感をキープしながらコンテンツ作成のスピードアップができます。
設定方法は、カラーパレットの設定を参照ください。
再利用ブロックの管理
ExUnit＞有効化設定＞再利用ブロック管理メニューの追加 を有効化
（デフォルトですでに有効化済）
ダッシュボードメニューから再利用ブロック管理画面へ直接アクセスできるようになる
再利用ブロックは各編集エディター（ブロックエディター）からでも登録できますが、登録した再利用ブロックをここで一括管理できます。新規登録も可能です。
再利用ブロックについては次の記事を参照ください。
ブロックパターン登録
ブロックエディターで任意のブロックパターンを登録しておく機能です。
必須プラグインVK Block Patternsが有効化してあれば、すでに使えるようになっています。
VK ブロックパターン＞新規追加 で新しいブロックを作成
（ブロックエディターと同じ要領で編集も後から可能）
テンプレとして装飾ボックスなどを登録して呼び出すことができる
プラグインVK Block Patternsの公式ページはこちらです。
改行コントロール
『パソコンではいい感じなのにスマホで見ると予想外のところで改行されて見映えが悪い』
そんな悩みを解消できるのが、Lightning（VK Blocks）の改行コントロールです。標準の段落ブロックなどテキストを入力するブロックのツールバーに機能が追加されています。
詳しい使い方はこちらの記事を参照ください。
ウィジェットでコンテンツを作成
サイドバーやフッターなど、編集エディターで作成する記事部以外の場所へコンテンツを表示するにはウィジェットを使います。
ワードプレスのversion5.8からブロックベースのウィジェットがリリースされましたが、Lightningはいち早くブロックベースのウィジェット対応となっています。
ブロックベースのウィジェットについては次の記事を参照ください。
ウィジェット使用可能な設定
ExUnit＞有効化設定＞ウィジェット を有効化
（デフォルトですでに有効化済）
さらに
ExUnit＞有効化設定＞ウィジェット有効化設定
（有効化設定ページの一番下部にある）
で必要なウィジェットにチェックを入れて有効化
（デフォルトでは全ウィジェットが有効化されています）
不要なウィジェットは無効化しておくと、サイト表示の高速化設定に貢献します。
ウィジェット配置できるエリア
デフォルトで準備されているウィジェットエリア
Lightningでは次の場所にウィジェットを配置することができます。
- モバイルナビの上部と下部
- サイドバー（トップページ用）
- サイドバー（共通上部）
- サイドバー（共通下部）
- サイドバー（投稿）
- サイドバー（固定ページ）
- サイドバー（メディア）
- フッター上部
- フッターウィジェットエリア１・２・３
サイトバーはいろいろな種類があって一見わかりにくいですが、共通上部と共通下部は各ページのサイドバーの上下に配置されるようになっています。
ウィジェットエリアは他にも追加することができます。
投稿ループ前ウィジェットエリアの追加
ExUnit＞有効化設定＞投稿ループ前ウィジェットエリア
を有効化
（デフォルトでは無効化されている）
投稿記事一覧ページの記事一覧の前にウィジェットエリアを追加する
トップコンテンツエリア上部の追加
”トップコンテンツエリア上部” は、Lightning G2の頃には標準ウィジェットエリアとしてよく使われていましたが、Lightning G3になってから廃止されたものです。
これをG3でも使うためにはfunctions.phpにコードを記述する必要がありますが可能です。次の記事を参照ください。
行動喚起（CTA）とサイト内回遊率アップの施策
Lightningには独自機能として、CTAの設定やサイト内回遊率をアップさせるための施策がいろいろと工夫されています。
CTA（行動喚起）
CTA（Call to Action）は『商品・サービスを購入してもらう』『メルマガに登録してもらう』など、サイトを訪れたユーザーにして欲しい行動を促すための表示です。
準備としてExUnitのCTAを有効化します。
ExUnit＞有効化設定＞Call To Action を有効化する
（デフォルトでは有効化済）
有効化すると、ダッシュボードメニューに “CTA" が表示されます。
CTAを具体的に活用するには次のように設定していきます。
- CTAコンテンツを作成する
CTA＞新規追加 でブロックエディターを使ってCTAコンテンツを作成して”公開”
（CTAコンテンツは複数登録することができます） - 作成したCTAコンテンツを表示する場所を指定する
ExUnit＞メイン設定＞Call To Action で、CTAを表示させたい個別投稿ページでCTAコンテンツを選ぶ
（個別投稿ページ以外にも表示させたいアクションフック名を入力することができます）
※CTAコンテンツはウィジェット”VK CTA”を使えば、ウィジェットエリアに表示させることも可能です。
- CTAコンテンツを個別投稿ページの本文欄の下部に自動表示させることができる
（個別投稿ページは、投稿・固定ページ・カスタム投稿タイプを選択可） - CTAコンテンツをアクションフック名で指定する場所に表示することができる
（例）lightning_loop_after ならば記事一覧の下に表示 - CTAコンテンツをウィジェットエリアに表示することができる
- 複数のCTAコンテンツがある場合、固定選択またはランダム選択ができる
お問い合わせ情報の表示
”お問い合わせ情報” を設定すると、お問い合わせ情報やお問い合わせボタンを表示することができます。
例えばこんな感じのものです。
準備設定です。
ExUnit＞有効化設定＞お問い合わせセクション を有効化する
（デフォルトでは有効化済）
”お問い合わせ情報” に表示する内容を入力します。
ExUnit＞メイン設定＞連絡先情報 で次の内容を入力
- メッセージ
- 電話番号
- 電話アイコン（Font AwesomeのHTMLクラス名を入力）
- 営業時間
- お問い合わせ先URL（お問い合わせボタンのリンク先）
- お問い合わせボタンのリンク先を別タブで開くか否か
- お問い合わせボタンに表示するテキスト
同じところで ”お問い合わせボタン”ウィジェットに表示するテキストも設定できます。
ExUnit＞メイン設定＞連絡先情報 で次の内容を入力
- お問い合わせボタンウィジェットに表示するテキスト
以上で設定したお問い合わせ情報を次の３つの方法で表示します。
方法１．固定ページの編集エディター下部で挿入設定
挿入したい固定ページの記事編集エディターで、本文下部の”挿入アイテムの設定”を開け、”お問い合わせ情報の表示”にチェックを入れる。
方法２．ブロックを使って挿入する
VK ExUnit Blocksの”お問い合わせ”ブロックを使えば、記事本文内の任意の場所にお問い合わせ情報を表示することができます。
方法３．ウィジェットで挿入する
それぞれ次のウィジェットを使ってウィジェットエリアに表示できます。
- ”VK お問い合わせ情報”ウィジェットでお問い合わせ情報を表示する
- ”VK お問い合わせボタン”ウィジェットでお問い合わせボタンを表示する
子ページへのリンク表示
子ページが存在する場合、子ページへのリンクカード表示をすることができます。
例えば以下はカフェサイトの事例です。
メニューという固定ページに、”ドリンク”、”スウィーツ”の２つの子ページへのリンクカードが表示されています。
子ページにアイキャッチ画像を設定しておけば、自動的にリンクカードに表示されます。
準備設定です。
ExUnit＞有効化設定＞子ページの一覧表示 を有効化する
（デフォルトでは有効化済）
子ページのリンクカードを以下の方法で表示します。
方法１．固定ページの編集エディター下部で挿入設定
挿入したい固定ページの記事編集エディターで、本文下部の”挿入アイテムの設定”を開け、”子ページ一覧の表示”にチェックを入れる。
方法２．ブロックを使って挿入する
VK ExUnit Blocksの”子ページ一覧”ブロックを使えば、記事本文内の任意の場所に子ページへのリンクカードを表示することができます。
方法３．ウィジェットで挿入する
”子ページ一覧”ブロックをウィジェットに配置すれば、ウィジェットエリアに表示できます。
（子ページがないページには表示されません）
子ページのリスト表示
子ページが存在する場合、親ページおよび子ページのリストをリンクつきで表示することができます。
例えば、”メニュー”という固定ページに”ドリンク”と”スウィーツ”の２つの子ページがある場合は次のような表示となります。
準備設定です。
ExUnit＞有効化設定＞先祖階層からの子ページリスト を有効化する
（デフォルトでは有効化済）
子ページのリンクカードを以下の方法で表示します。
方法１．固定ページの編集エディター下部で挿入設定
挿入したい固定ページの記事編集エディターで、本文下部の”挿入アイテムの設定”を開け、”現在のページの先祖階層からの子ページリストを表示”にチェックを入れる。
方法２．ブロックを使って挿入する
VK ExUnit Blocksの”Page list from ancestor”ブロックを使えば、記事本文内の任意の場所に子ページリストを表示することができます。
方法３．ウィジェットで挿入する
”子ページリスト”ブロックをウィジェットに配置すれば、ウィジェットエリアに表示できます。
（子ページがないページには表示されません）
SEO関連の設定
タイトルタグの書き換え
タイトルタグとは、検索エンジンに表示されたときのタイトルとして表示されるものです。
①ExUnit＞有効化設定＞タイトルタグの書き換え を有効化する
（デフォルトでは有効化されています）
②ExUnit＞メイン設定＞トップページの<title>タグ に入力する
トップページのタイトルタグが、標準の形式から入力したものに変更される。
標準形式・・・<title>（サイトのタイトル）｜（キャッチフレーズ）</title>
これを例えば ”（サイトのタイトル）” のみを入力すると
<title>（サイトのタイトル）</title>
となります。
サイトのタイトルやキャッチフレーズが長すぎるときに利用するとよいでしょう。
個別ページのメタディスクリプション
各個別ページのメタディスクリプションを設定します。メタディスクリプションとは、検索エンジンで表示されたときのタイトルと同時に表示される説明文のことです。
①ExUnit＞有効化設定＞メタディスクリプションタグを出力 を有効化
（デフォルトでは有効化済）
②各個別ページの編集エディターで、抜粋覧に説明文を入力する
抜粋覧は、編集画面右のパネル内にあります。
※抜粋覧に何も入力しない場合は、本文の先頭がメタディスクリプションとして自動的に抜粋されます。
noindexの設定
個別ページ毎にnoindex設定をすることができます。noindex設定とは、Googleのデータベースに登録されないようにすることです。結果として検索でヒットしなくなります。
①ExUnit＞有効化設定＞noindex追加機能 を有効化
（デフォルトでは有効化済）
②ExUnit＞メイン設定＞Noindex でnoindexとするアーカイブページにチェックを入れる
または
noindexにしたい個別ページの編集エディターの下部で、noindexにチェックを入れる
アーカイブページのnoindex設定（ExUnitメイン設定）
ワードプレスでは自動的に多種のアーカイブページが出来上がるので、特にユーザーにとって使いにくいと思われるアーカイブはnoindexにしておくとよいでしょう。
例えばブログサイトの場合、カテゴリーアーカイブ（およびタグアーカイブ）以外はnoindexにすることが多いです。ビジネスサイトの場合は、投稿をどのように活用するかによります。
各個別ページのnoindex設定（各ページの編集画面下）
XMLサイトマップの設定
ワードプレスversion5.5から、ワードプレス標準のXMLサイトマップが自動生成されるようになりましたが、より細かな設定ができるプラグイン（XML Sitemapsなど）を使う場合は、標準のXMLサイトマップを無効化しておくとよいでしょう。
ExUnit＞有効化設定＞XMLサイトマップ無効化 にチェックを入れる
（デフォルトではチェックされていない）
SNSセッティング
SNSとの連携をすることで、ユーザーに見つけてもらいやすくなります。
①ExUnit＞有効化設定＞ソーシャルメディア連携 を有効化する
（デフォルトでは有効化されています）
②ExUnit＞メイン設定＞SNS Settings に各々入力する
※他のプラグイン（All in One SEOなど）でSNS連携している場合は、①を無効化しておくとよいでしょう。
②のSNS SettingsでSNSとの連携（OGP）、シェアボタンの表示などの設定ができます。
- OGPでの投稿タイトルの変更
（投稿タイトルだけにする。デフォルトではサイトタイトルも入っている） - facebook アプリケーションIDの入力
（入力なしだと連携するfacebookのボタンやコメント欄が正しく表示・動作しない） - FacebookページURLの入力
- Facebookアクセストークンの入力
（シェアボタンの数を表示するのに必要） - デフォルトのOGP画像の設定
（アイキャッチ画像が設定されているページではアイキャッチ画像が優先される） - Twitter ID の入力
- OGタグの出力
- Twitterカードタグの出力
- SNSシェアボタンの表示設定
（表示しないページとして投稿・固定ページおよび任意のページ（IDで指定）が指定できる） - 表示するシェアボタンの種類を設定
（Facebook・Twitter・はてな・Pocket・LINE(mobile only)・Copy） - シェアボタンの表示位置を設定
（本文の前・本文の後ろ） - Follow me box の表示設定
（表示する・しない、Follow me boxの見出しテキスト） - シェア数のカウント
（しない・GET・POST : デフォルトはGET指定）
※シェアボタンは、VK ExUnit Blocksの”シェアボタン”ブロックを使えば、記事本文の任意の場所に挿入することも可能です。
アクセス解析およびGoogleタグマネージャー設定
Google Analytics設定
Googleタグマネージャーを使わずに、直接Analyticsコードを設定する場合に使います。
①ExUnit＞有効化設定＞Google Analytics を有効化する
（デフォルトでは有効化されています）
②ExUnit＞メイン設定＞Google Analytics設定 で設定する
（または 外観＞カスタマイズ＞ExUnit設定＞Google Analytics設定 でも可能）
※他のプラグイン（All in One SEOなど）でGoogle Analyticsの設定をしている場合は①を無効化しておくとよいでしょう。
②でアナリティクスIDの入力とコードの種類（gtagまたはanalytics.jsの選択）を設定することで、Google Analyticsとの連携ができるようになります。
Google タグマネージャー設定
Googleタグマネージャーを使う場合はこちらの設定をします。
（GoogleタグマネージャーでAnalyticsとの連携設定をしている場合は、上記のGoogle Analytics設定は不要です）
①ExUnit＞有効化設定＞Google タグマネージャー を有効化する
（デフォルトでは無効化されています）
②ExUnit＞メイン設定＞Google タグマネージャー設定 にGoogleタグマネージャーIDを入力する
（または 外観＞カスタマイズ＞ExUnit設定＞Googleタグマネージャー でも可能）
Googleタグマネージャーによる各種サービスとの連携
高速化設定
Lightningで準備されている高速化設定を紹介します。
私がセミナーで使っているデモサイトのトップページで検証したところ、PC表示では少し改善されますが、モバイルではむしろ遅くなる結果がでているので、適用に関してはご自分のサイトでよく検証することをおすすめします。
CSSの出力および読み込みの最適化
外観＞カスタマイズ＞Lightning CSS最適化（高速化）設定
- Tree shaking 有効化設定（主要なCSSをインラインで出力する）
（デフォルトでは無効化（何もしない））
※有効化した場合は、対象から外すクラス名を指定できる - Preload CSS 有効化設定
（デフォルトでは無効化（何もしない））
※有効化した場合、対象から外したいファイルがある場合は、ハンドル名（id）を指定できる
CSSの最適化
ExUnit＞有効化設定＞CSS最適化 を有効化する
Javascriptの読み込みタイミングの変更
外観＞カスタマイズ＞ExUnit＞高速化設定
有効化するとExUnit、ワードプレスなどのJavascriptをフッターで読み込むようになる
（デフォルトでは有効化されていない）
その他高速化に貢献すると考えられる設定
- 絵文字の無効化（絵文字を使用しない場合、余分なCSS読み込みが減る）
ExUnit＞有効化設定＞絵文字の無効化 にチェックを入れる - Contact Form 7の関連ファイル読み込み削除
（プラグインContact Form7を使っている場合、フォームを設置していないページで関連ファイル読み込みを削除する）
ExUnit＞有効化設定＞contact Form 7 アセットファイル最適化 を有効化する - ウィジェットの無効化設定（使用しないウィジェットは無効化しておく）
ウィジェットの無効化についてはこちらを参照ください。
アドセンス
Googleアドセンス広告の設定です。
まずは準備設定です。
ExUnit＞有効化設定＞広告の挿入 を有効化する
アドセンス申請コードの挿入および広告の挿入はこちらで実施します。
ExUnit＞メイン設定＞広告の挿入
- サイト運営者IDの挿入（pub-で始まるアドセンス申請コード）
- 個別投稿ページへの広告の設置
・記事の最初
・記事のmoreタグ部分
・記事の最後
いずれも2個まで入力可能で、2個入力すると横並びに表示される
※広告の表示ページは、投稿・固定ページ・カスタム投稿 を選択できる
カスタムCSSの記述場所
LightningでカスタムCSSを記述する場所は次の通りです。
- 子テーマのstyle.css（子テーマを使用している場合に限る）
- テーマカスタマイザーの追加CSS欄
外観＞カスタマイズ＞追加CSS に記述する - ExUnitのCSSカスタマイズ覧（ExUnit＞CSSカスタマイズ に記述）
ExUnit＞有効化設定でCSSカスタマイズ を有効化しておく必要があります（デフォルトで有効化済）
ExUnitでCSSカスタマイズを有効化しておくと、各個別投稿ページの編集画面下部でそのページのみに適用するCSSを入力できます。
個人的には、あちこちにCSSを記述すると後でわからなくなるので、子テーマのstyle.cssのみ使うのがおすすめですが、がっつりCSSを使うわけでないなら、サイト全体のCSSはExUnitのCSSカスタマイズ欄、ページ毎のCSSは各ページの編集画面下を使うのがよいでしょう。
まとめ
できるだけ簡易に書くつもりが長い記事になってしまいました。
それでもまだまだLightningでできることを書き切れていない感満載です。これからも少しづつ追記していこうと思います。
↓
