2019年1月13日 / Last updated : 2020年12月12日 くまはちLAB LightningPHPWordPressスタイルシートテーマ子テーマ無料テーマ

Lightningをカスタマイズしてヘッダーにお問い合わせを表示する

この記事のURLとタイトルをコピーする

この記事を読むのに必要な時間は約 8 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)

ヘッダーにお問い合わせを表示
最近のビジネスサイトの傾向でヘッダーロゴの横もしくは、サイトタイトルの横にお問い合わせを表示したいというご要望がかなり多いですね。
上記の画像では、ただ単にお問い合わせとして表示しておりますが、画像で表示するもしくは、テキストを電話番号にしたいなどそういったカスタマイズもできます。
実は、Lightning無料版ではないのですが、Proでは簡単に設定が可能なのです。
 

functions.phpとスタイルシートのカスタマイズ

FFFTP
functions.phpをカスタマイズして更新する時は、FTPでの更新をオススメしております。また、親テーマで更新するのではなく子テーマを活用して更新されることをおすすめしています。

 

 

テキストで表示するお問い合わせ

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’);

 

CSS
/* ロゴ右側のブロック */
.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に追記します。
 

テキストで電話番号を表示する

functions.php
// ロゴの横に電話番号情報を表示する。
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’);

 

CSS
/* ロゴ右側のブロック */
.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;
}
}

 

画像でお問い合わせを表示する

functions.php
/* ロゴの横に表示するパーツ */
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’);

 

CSS
/* ロゴ右側のブロック */
.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;
}
}

ZOOM

 

チャンネル登録

 

WEBのことならくまはちＬＡＢにお任せください。

サービス 制作事例
お問い合わせ
LINEスタンプ
LINE@友だち追加
Vektor WordPress Solutions
Vektor WordPress Solutions

くまはちLABのご利用ありがとうございます！
くまはちLABの最新情報をフォローしてゲットしてください！

 
カテゴリー
Lightning、PHP、WordPress、スタイルシート、テーマ、子テーマ、無料テーマ
タグ