lightningでヘッダーに電話番号やSNSボタンを表示する方法

WordPressの公式無料テーマでLightningを使用しており、ヘッダーに電話番号やSNSボタンを表示させたい場合のカスタマイズについてご紹介いたします。

元々のLightningデモサイトはこのような感じです。

参考：https://demo-ja.lightning.nagoya/
今回の完成イメージはこのような感じです。同じくWordpressの無料公式テーマLightningを使用して私が作成したサンプル歯科です。

ヘッダー部分に電話番号やSNSボタンをつけます。

Lightningの無料版だとこの部分に対応するウィジェットなどはありません。

ですが、この固定されるヘッダーにはやはりお問い合わせできて行動の導線となるものが欲しいですよね！

なので、選択肢としては有料プラグインを購入するか、自力でやるか・・・ということになります。

今回は自力でやっていきます。

前提

・今回は子テーマを作成して編集していきます。
・ソースいじりたくない、管理画面から楽に追加したいという方には公式サイトの有料プラグインが良いと思います。→Lightning Pro
ヘッダーの拡張機能だけではなく他にももろもろ含まれているようなので、工数を考えてのご相談でしょうね。
・FontAwsome５を使用してSNSアイコンを出していきます。

スポンサーリンク

まずは子テーマを用意しましょう

Lightningを使用して何かしらの編集を行う場合は子テーマを用意しましょう。

公式から無料でダウンロードできます。

https://lightning.nagoya/ja/setting/customize/child_theme

親テーマを直接編集すると、更新があったときに上書きされてしまいますので、子テーマを用意しておきましょう。

FTPなどで子テーマの用意ができたら、親テーマからheader.phpをコピーして子テーマにおいてください。

スポンサーリンク

header.phpに要素を追加していきます。

ここからやることはシンプルです。header.phpにdiv要素を追加していきます。

親テーマから子テーマにheader.phpコピーができましたら

<div class="container siteHeadContainer">
<div class="navbar-header">

を探してください。何もいじってない状態であれば18行目ぐらいにあるかと思います。

Chromeの検証機能を使って見るとこの部分が要素を追加する狙い目であることがわかります。

そこに以下のように追加してください。FontAwsomeはversion5を使用しています。

	<div class="container siteHeadContainer">
		<div class="header-section">
		<div class="header-text">XX市の歯医をお探しならXX駅すぐのサンプル歯科へ</div>
	   <div class="header-addon">
		   		<a href="" class="social-button"><i class="fab fa-facebook-square fa-2x"></i></a>
				<a href="" class="social-button"><i class="fab fa-instagram fa-2x"></i></a>
					<a href="" class="social-button"><i class="fab fa-twitter-square fa-2x"></i></a>	
		   <div class="tel-box"><span class="header-span">お電話でのご予約は→</span><i class="fas fa-phone"></i>000-0000-0000
		   </div>	
			</div>
		</div>
		<div class="navbar-header">

CSSはデモサイトだとこのようにしていますが、お好みでどうぞ！

.header-addon {
    color: #419625;
    text-align: right;
    margin-bottom: 0;
    font-weight: bold;
    font-size: 20px;
}
.header-span {
    color: black;
    font-weight: normal;
    font-size: 14px;
}
.header-text {
    float: left;
    font-size: 14px;
    line-height: 28px;
}
.tel-box {
    float: left;
    margin-right: 20px;
}
.header-addon i {
    margin: 0 5px;
}

シンプルにできましたね！

ということで今回はここまでです。

Lightningのカスタマイズにどれぐらい時間をかけましたか？

Lightningのカスタマイズは本格的にやろうと思うとソースの読み込みがめんどくさいなどのデメリットがあります。

Lightningのカスタマイズよりは有料テーマを買った方が早いという事実

という別記事の後半でも書きましたが、もしあなたがホームページを作成しようと思ってlightningという無料のwordpressテーマに出会い、

カスタマイズで4時間以上費やしているのであれば、いっそ有料テーマを買ってしまったほうが良いのではと思っています。

デザインはある程度の身だしなみでしかなく、サイトの本質は中身（コンテンツ）だと私は考えているからです。

以下はデザイン・SEO対策が施されている、コードをいじることなくカスタマイズしやすいという点で、オススメの有料日本語テーマです。

というわけで今回はここまでです。それでは！