Lightningをカスタマイズしてヘッダーにお問い合わせを表示する
この記事を読むのに必要な時間は約 8 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)
最近のビジネスサイトの傾向でヘッダーロゴの横もしくは、サイトタイトルの横にお問い合わせを表示したいというご要望がかなり多いですね。
上記の画像では、ただ単にお問い合わせとして表示しておりますが、画像で表示するもしくは、テキストを電話番号にしたいなどそういったカスタマイズもできます。
実は、Lightning無料版ではないのですが、Proでは簡単に設定が可能なのです。
functions.phpとスタイルシートのカスタマイズ

テキストで表示するお問い合わせ
function my_lightning_header_logo_after() {
echo <<<EOM
<div class=”logo-after”>
<div class=”mail”><a href=”お問い合わせへのアドレス“><i class=”fa fa-envelope-o” aria-hidden=”true”></i>お問い合わせ</a></div>
<div class=”message” >ご予約・お問い合わせはお気軽に</div>
</div>
EOM;
}
add_action(‘lightning_header_logo_after’, ‘my_lightning_header_logo_after’);
.logo-after {
display: block;
width: 200px;
float: right;
background-color:#191970;
color:#fff;
padding: 3px;
}
.logo-after a {color:#fff;}
.logo-after a:hover {color:#fff;}
.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: 12px;
}
.logo-after .mail {
font-size: 18px;
}
スタイルシートは、外観→カスタマイズ→追加CSSに追記するもしくは、style.cssに追記します。
テキストで電話番号を表示する
function my_lightning_header_logo_after() {
echo <<<EOM
<div class=”logo-after”>
<div class=”tel”><a href=”tel:00-0000-0000″>TEL:00-0000-0000</a></div>
<div class=”message” >ご予約・お問い合わせはお気軽に</div>
</div>
EOM;
}
add_action(‘lightning_header_logo_after’, ‘my_lightning_header_logo_after’);
.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: 12px;
}
.logo-after .mail {
font-size: 18px;
}
/*PC表示の時にはリンクを無効にする*/
@media (min-width: 992px){
.tel {
pointer-events: none;
}
}
画像でお問い合わせを表示する
function my_lightning_header_logo_after() {
echo <<<EOM
<div class=”logo-after”>
<img src=”http://★.jpg“>
</div>
EOM;
}
add_action(‘lightning_header_logo_after’, ‘my_lightning_header_logo_after’);
.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;
}
}
![]() |
くまはちLABのご利用ありがとうございます! |