マークルデザインサイト スマホヘッダー画像

スマホでは、ヘッダーにスマホ用ロゴ画像（小さめ）を表示する指定をCSSで記述していたが、 バージョンアップにより、クラス等の変更があったためか、目的の表示ができなくなった。 （PC用の大きな画像が表示されえていた）

style.CSS

@media (max-width: 480px) {
/* PC用のヘッダー画像を消す *
#topMainBnr #topMainBnrFrame {
display: none;
  }

   /* スマホ用のヘッダー画像を表示 *
#topMainBnr:after {
background: url(https://markledesign.com/wp-content/uploads/2023/10/markle_logo_s.png);
background-size: 100% auto;
content: ”;
display: block;
height: 320px;
}
}

クラス等の変更をして、CSSを書き換えても、近い将来また同じ現象が起こる可能性が大きく、 今回は、　functions.php で対応することにした。

functions.php

add_filter( ‘lightning_head_logo_image_url’, function( $options ){
if ( wp_is_mobile() ){
$options = ‘スマホ用のヘッダーロゴ画像のURL’;
}
return $options;
} );