ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

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

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

ヘッダー内の連絡先とお問い合わせボタン

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

増設したボタンの表示

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

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

手順

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

ダッシュボードメニューの 外観>カスタマイズ>Lightningヘッダー設定

にて

ヘッダーレイアウトを”ヘッダーコンタクトあり&ナビ貫通”を選択する

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

ヘッダー内の連絡先とお問い合わせボタン

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

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記述をする

ボタンをもう1つ追加するために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に差し替えてください。

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

2つ目のボタンが表示される

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

ボタンの色を決めているのは、<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>

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

増設したボタンの表示

まとめ

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

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

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

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

Lightning G3 Pro Pack(アップデート期間1年)
Lightning G3 Pro Pack(アップデート期間3年)
Vektor WordPress Solutions

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる