WordPressの「Lightning」でロゴの横に画像や文字を配置する

(備忘録程度のまとめ方にしております)

文字を配置する場合

1.子テーマの「function.php」に以下をペーストする。


function my_lightning_header_logo_after() {
echo <<<EOM
<div class="logo-after">
<div class="message" >ご連絡ください</div>
<div class="tel" ><a href="tel:●●●-●●●-●●●●">●●●-●●●-●●●●</a></div>
<div class="time" >受付:●時~●時</div>
</div>
EOM;
}
add_action('lightning_header_logo_after', 'my_lightning_header_logo_after');

 

2.CSSを設定する。文字の設定や「padding」などは適宜調整。


.logo-after {
 display: block;
 width: 200px;
 float: right;
}
/* 文字の設定 */
.logo-after .message {
 font-size: 16px;
}
.logo-after .tel {
 color: #337ab7;
 font-size: 24px;
}
.logo-after .time {
 font-size: 12px;
 color: #666;
}
/* ヘッダー幅を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: 14px;
}
.logo-after .tel {
 color: #337ab7;
 font-size: 20px;
}
.logo-after .time {
 font-size: 10px;
 color: #666;
}
}
 
@media (min-width: 1200px) {
.gMenu_outer,
.gMenu,
.gMenu > li {
 width: 100%;
}
}
 
@media (max-width: 1199.98px) {
.siteHeader_logo {
 width: unset;
}
}

画像を配置する

1.子テーマの「function.php」に以下をペーストする。


function my_lightning_header_logo_after() {
echo <<<EOM
<div class="logo-after">
<img src="画像へリンク">
</div>
EOM;
}
add_action('lightning_header_logo_after', 'my_lightning_header_logo_after');

 

2.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;
}
}
 
@media (min-width: 1200px) {
.gMenu_outer,
.gMenu,
.gMenu > li {
 width: 100%;
}
}
 
@media (max-width: 1199.98px) {
.siteHeader_logo {
 width: unset;
}
}