Lightning G3 Pro Unit の機能です
Lightning G3 Pro Unit とは
Lightning G3 Pro Unitは、無料WordPressテーマLightning(version 14.x 以降 )に、さらに便利な機能を拡張できるLightning専用プラグインです。
- 管理画面【Lightning Block Template Parts】
- 管理画面【外観】>【カスタマイズ】>【Lightning ヘッダー設定】/【Lightning フッター設定】
ブロックテンプレートパーツ機能を利用すれば、ヘッダー及びフッターがブロックエディタで構築できるようになります。Lightning 標準のヘッダーやフッターは使用せずに、独自にブロックを組み合わせて自由に作成できます。
![](https://lightning.vektor-inc.co.jp/wp-content/uploads/2023/11/block-template-parts-01-1024x454.png)
設定 > Lightning G3 Pro Unit 設定 にて、ブロックテンプレートパーツはデフォルトで有効の状態になっています。
ブロックテンプレートパーツ機能の使い方は、こちらの動画でも詳しく解説しています。
ブロックテンプレートパーツに登録する
Lightning Block Template Partsの新規投稿を追加
![](https://lightning.vektor-inc.co.jp/wp-content/uploads/2023/11/block-template-parts-02-1024x369.png)
管理画面【Lightning Block Template Parts】から「新規投稿を追加」をクリックします。ヘッダー用・フッター用どちらのブロックテンプレートパーツもここから登録できます。
パターンを利用できます
![](https://lightning.vektor-inc.co.jp/wp-content/uploads/2023/11/block-template-parts-03-1024x299.png)
ヘッダーやフッターをゼロからブロックで作成するのは手間がかかります。そのため、VK パターンライブラリ でヘッダー用とフッター用のパターンを提供しています。パターンをコピペするだけで簡単に作成できます。パターンは今後増やしていく予定です。
利用したいパターンをコピーして貼り付ける
![](https://lightning.vektor-inc.co.jp/wp-content/uploads/2023/11/block-template-parts-05-698x1024.png)
VK パターンライブラリから、利用したいパターンをコピーします。
![](https://lightning.vektor-inc.co.jp/wp-content/uploads/2023/11/block-template-parts-06-1024x374.png)
記事本文欄にパターンを貼り付けます。
ヘッダーのパターンについて
貼り付けたパターンをリストビューで確認すると、ヘッダーは2段になっていて、グループブロックで上と下に分かれています。画面サイズに応じて表示を切り替えるために、このようなブロックの構成にしています。表示の切り替えにはVK Blocksの非表示設定の機能を利用しています。
- 上:PCの時に表示し、モバイルの時は非表示となるよう設定
- 下:モバイルの時に表示し、PCの時は非表示となるよう設定
![](https://lightning.vektor-inc.co.jp/wp-content/uploads/2023/11/block-template-parts-07-1024x368.png)
![](https://lightning.vektor-inc.co.jp/wp-content/uploads/2023/11/block-template-parts-08-1024x368.png)
ナビゲーションメニューを設定する
![](https://lightning.vektor-inc.co.jp/wp-content/uploads/2023/11/block-template-parts-09-1024x374.png)
パターンを貼り付けると「ナビゲーションメニューは削除されたか、使用できません」となります。これは、参照するIDがサイトによって異なるためです。
![](https://lightning.vektor-inc.co.jp/wp-content/uploads/2023/11/block-template-parts-10-1024x755.png)
ナビゲーションブロックで新しいメニューを作成するか、あらかじめ作成したメニューを割り当ててください。上と下のナビゲーションとも同じメニューを割り当てます。
![](https://lightning.vektor-inc.co.jp/wp-content/uploads/2023/11/block-template-parts-11-1024x345.png)
公開する
![](https://lightning.vektor-inc.co.jp/wp-content/uploads/2023/11/block-template-parts-12-1024x267.png)
公開します。
適用するテンプレートパーツを選択する
登録したブロックテンプレートパーツに応じて、設定画面を開きます。
- ヘッダー用:【外観】>【カスタマイズ】>【Lightning ヘッダー設定】
- フッター用:【外観】>【カスタマイズ】>【Lightning フッター設定】
![](https://lightning.vektor-inc.co.jp/wp-content/uploads/2023/11/block-template-parts-13-1024x447.png)
登録したテンプレートパーツを選びます。
![](https://lightning.vektor-inc.co.jp/wp-content/uploads/2023/11/block-template-parts-14-1024x343.png)
公開します。
![](https://lightning.vektor-inc.co.jp/wp-content/uploads/2023/12/block-template-parts-15-478x1024.png)
- ヘッダーを固定する:スクロールする時にヘッダーをサイト上部に固定して表示させたい場合は、チェックを入れます。
- モバイル端末ではLightning標準のモバイルナビゲーションを有効にする:チェックを入れない場合は、モバイルの時にWordPress標準のハンバーガーメニューが表示されます。
![](https://lightning.vektor-inc.co.jp/wp-content/uploads/2023/12/block-template-parts-16.png)
![](https://lightning.vektor-inc.co.jp/wp-content/uploads/2023/12/block-template-parts-17.png)
![](https://lightning.vektor-inc.co.jp/wp-content/uploads/2023/12/block-template-parts-18.png)
![](https://lightning.vektor-inc.co.jp/wp-content/uploads/2023/12/block-template-parts-19.png)
Lightning標準のモバイルナビゲーション
![](https://lightning.vektor-inc.co.jp/wp-content/uploads/2023/12/block-template-parts-20-1024x665.png)
【外観】>【カスタマイズ】>【Lightning モバイルナビ】で、メニューボタン(ハンバーガーメニュー)の位置やメニューのスライド方向を設定できます。