【Ligntning】メニューバーを下に移動してヘッダー右上部分に電話番号を表示させるカスタム方法

• 最新のLIGHTNINGテーマ：（僕が実践した時はバージョン：8.1.0でした）
• テーマエディター→子テーマ内のfunctions.php
• Ex Unit → CSSカスタマイズ（要プラグイン：VK All in One Expansion Unit）
  CSS編集はここでやらないと必ず失敗しました

今回の解説は難しい知識が無くてもできるよう、あえてテーマエディターからfunctions.phpを編集します。編集の際は自己責任でお願いします。

少しの失敗で画面が真っ白にクラッシュしてしまう可能性が高いので、編集前に内容を全てコピーしあらかじめテキスト帳などに貼り付けるなどバックアップを取ってから作業する事をおすすめします。

実際の作業ではFTPソフトを使用して作業をするのを推奨します。使い方はお使いのサーバー会社にお問い合わせ下さい。

/* ロゴの横に表示するパーツ */
function my_lightning_header_logo_after() {
echo <<<EOM
<div class="logo-after">
<div class="message" >気軽にお問い合わせ下さい</div>
<div class="tel" ><a href="tel:03xxxxxxxx">03-xxxx-xxxx</a></div>
<div class="time" >受付時間：9：00～18：00</div>
</div>
EOM;
}
add_action('lightning_header_logo_after', 'my_lightning_header_logo_after');

/* メニューをロゴの下に表示 */
@media (min-width: 992px) {
.navbar-header {
height: 80px;
}

ul.gMenu {
clear: both;
float: none;
}

ul.gMenu li {
width: 20%;
}
}

/* ロゴ右側のブロック */
.logo-after {
display: block;
width: 200px;
float: right;
}

.logo-after img {
max-height: 60px;
}

/* ヘッダー幅を100%に */
.navbar-header {
width: 100%;
}

@media (max-width: 991px) {
.logo-after {
width: 100%;
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
}
}

/* 連絡先のスタイル */
.logo-after .message {
font-size: 16px;
}

.logo-after .tel {
color: red;
font-size: 24px;
}

.logo-after .time {
font-size: 12px;
color: #666;
}

今回の解説は難しい知識が無くてもできるよう、あえてテーマエディターからfunctions.phpを編集します。編集は自己責任でお願いします。

cssの編集には必ず 左列ExUnit内の「CSSカスタマイズ」で編集・追記するのがポイントのようです。