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

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

１．文字を配置する場合

１．子テーマの「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');

２．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;
}
}

２．画像を配置する

１．子テーマの「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');

２．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;
}
}