Lightning G3 Pro Unitでヘッダー内ボタンを２つ並べる方法

2022年12月5日

ワードプレスの人気テーマLightningの有料プラグインLightning G3 Pro Unitを使うと、ヘッダー内に連絡先TEL番号やお問い合わせボタンを簡単に設置することができます。

本記事では、ヘッダー内にもう１つボタンを増やして表示する方法を紹介します。

ヘッダー内に連絡先・ボタンを表示する方法（デフォルト機能）

まずはデフォルトの機能でヘッダー内に連絡先・ボタンを表示する方法を簡単におさらいしておきます。

手順

手順といっても、これだけです。

これでヘッダー内にTEL番号とボタンが表示されるようになります。

TEL番号とその上下のテキスト、ボタンのテキスト・リンク先URL等は ExUnit＞メイン設定＞連絡先情報 で入力したものが反映されます。

HTML構造の確認

こうして表示された部分のHTML構造をGoogle Chromeの開発者ツールで確認すると以下の通りです。

後ほどボタンを増設するとき、このままコピペで使うことになります。

<div class="site-header-sub">
	<p class="contact-txt">
		<span class="contact-txt-catch">京都市北区〇〇町××‐×</span>
		<span class="contact-txt-tel">
			<i class="fas fa-phone-square contact-txt-tel_icon"></i>000-000-0000
		</span>
		<span class="contact-txt-time">
			受付時間 11:00-22:00 [ 毎週火曜日除く ]
		</span>
	</p>
	<div class="contact-btn">
		<a href="#" class="btn btn-primary">
			<i class="far fa-envelope"></i>メールお問い合わせ
		</a>
	</div>
</div>

※12行目のhref="#"の#は、リンク先URLに差し替えてください。

ボタンを追加表示する方法

それではボタンの増設方法を紹介していきます。手順概要は以下の通りです。

1. ヘッダーレイアウトをウィジェット表示に切り替える
2. ウィジェット内へデフォルトのHTMLをコピペする
3. 追加するボタンのHTML記述をする

手順①ウィジェット表示に切り替える

外観＞カスタマイズ＞Lightningヘッダー設定　で”ヘッダーウィジェットあり＆ナビ貫通”を選択します。

すると”ヘッダー右側エリア”というウィジェットエリアが使えるようになります。初期値は空白です。

このウィジェットの中にボタンなど連絡先情報を入力していきます。

手順②ウィジェット内へデフォルトのHTMLをコピペ

ウィジェットの”ヘッダー右側エリア”にカスタムHTMLブロックを配置し、HTMLを入力します。

入力するHTMLは、先ほど確認したデフォルトの連絡先情報HTMLと同じです。
（ただし、ここでは区別するために連絡先住所を京都市から大阪市に変更しました。）

<div class="site-header-sub">
	<p class="contact-txt">
		<span class="contact-txt-catch">大阪市北区〇〇町××‐×</span>
		<span class="contact-txt-tel">
			<i class="fas fa-phone-square contact-txt-tel_icon"></i>000-000-0000
		</span>
		<span class="contact-txt-time">
			受付時間 11:00-22:00 [ 毎週火曜日除く ]
		</span>
	</p>
	<div class="contact-btn">
		<a href="#" class="btn btn-primary">
			<i class="far fa-envelope"></i>メールお問い合わせ
		</a>
	</div>
</div>

※12行目のhref="#"の#は、リンク先URLに差し替えてください。

外観＞ウィジェット　でヘッダー右側エリアにカスタムHTMLブロックを配置してHTMLを入力（上記のコピペでOKです）。

以上で、ヘッダーに連絡先情報が表示されます。

手順③追加するボタンのHTML記述をする

ボタンをもう１つ追加するためにHTMLの記述を追加します。

ヘッダー右側ウィジェットエリアに先ほど入力したHTMLの11から15行目が”メールお問い合わせボタン”の部分となります。したがって、同じ構造のHTMLを16～20行目に追加します。

<div class="site-header-sub">
	<p class="contact-txt">
		<span class="contact-txt-catch">大阪市北区〇〇町××‐×</span>
		<span class="contact-txt-tel">
			<i class="fas fa-phone-square contact-txt-tel_icon"></i>000-000-0000
		</span>
		<span class="contact-txt-time">
			受付時間 11:00-22:00 [ 毎週火曜日除く ]
		</span>
	</p>
	<div class="contact-btn">
		<a href="#" class="btn btn-primary">
			<i class="far fa-envelope"></i>メールお問い合わせ
		</a>
	</div>
	<div class="contact-btn">
		<a href="#" class="btn btn-success">
			<i class="fa-regular fa-file-lines"></i>資料請求
		</a>
	</div>
</div>

※12行目と17行目のhref="#"の#は、リンク先URLに差し替えてください。

すると、以下のようにボタンが並んで表示されるようになります。

ボタンの色はブートストラップに準じる

ボタンの色を決めているのは、<a>タグ内のクラスに記述されているbtn-primaryやbtn-successです。

btn-primaryならばこのサイトのキーカラー、btn-successならば明るい緑色（カラーコード#28a745）となります。

テーマLightningのCSSはブートストラップをベースとしているので、各クラスのボタン名に応じて他にも色が割り当てられます。詳しくはこちらを参照ください。

ボタンの色を任意に変えるには

ブートストラップでの割り当て色以外の任意の色とするには、style属性でスタイルを指定してやればOKです。

下記では17行目の<a>タグに、style="background-color:#2f5ba9;border-color:#2f5ba9;"を指定しています。

<div class="site-header-sub">
	<p class="contact-txt">
		<span class="contact-txt-catch">大阪市北区〇〇町××‐×</span>
		<span class="contact-txt-tel">
			<i class="fas fa-phone-square contact-txt-tel_icon"></i>000-000-0000
		</span>
		<span class="contact-txt-time">
			受付時間 11:00-22:00 [ 毎週火曜日除く ]
		</span>
	</p>
	<div class="contact-btn">
		<a href="#" class="btn btn-primary">
			<i class="far fa-envelope"></i>メールお問い合わせ
		</a>
	</div>
	<div class="contact-btn">
		<a href="#" class="btn btn-success" style="background-color:#2f5ba9;border-color:#2f5ba9;">
			<i class="fa-regular fa-file-lines"></i>資料請求
		</a>
	</div>
</div>

これで増設したボタンの色が変更されました。

まとめ

今回はヘッダー右側エリアを使ってボタンを２つ並べてみました。カスタムHTMLブロックを配置しましたが、既存のHTMLを利用するだけで簡単にボタンを増設できました。

Lightningの有料プラグインLightning G3 Pro Unitを使えば、このように簡単にヘッダー内にコンテンツを配置することができます。ヘッダー内は非常に目立つ場所なので、電話番号やCTAボタンを配置したサイトをよく見かけるでしょう。

サブスクリプションサービスVektor Passportに同梱されています。

サブスクの期限を過ぎてもアップデートができなくなるだけで、使用中の機能はそのまま継続使用が可能です。また自動継続でないのも良心的だと言えるでしょう。

他にも魅力的な機能が盛りだくさんです。無料版Lightningとの違いや購入・使用方法は、こちらの記事で詳しく紹介しているので、ぜひ参考にしてみてくださいね。