今回はSTINGER PLUS＋でカスタマイズした方法の備忘録。
お客さんのサイトのカスタマイズをしていたので、画像は掲載していません。
WordPressのロゴをパソコンだと横長いっぱいの長方形で表示させていたのですが
スマートフォンだと小さくなりすぎて何が何だかわからない。。。
という事で、スマートフォンの時だけ違うタイトルロゴを表示させたいと思い調べたら
どこにもそんな情報はない。。。
なので自分で考えてプログラムをいじっちゃいました。
実際にいじったファイルは
STINGERPLUS: テーマヘッダー (header.php)
です。
いじった個所はこの部分
<!-- ロゴ又はブログ名 -->
<p class="sitename"><a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<?php if ( get_option( 'st_logo_image' ) ): //ロゴ画像がある時 ?>
<img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo esc_url( get_option( 'st_logo_image' ) ); ?>" >
この赤字の部分がロゴ画像を表示する部分なので
ここでスマホ、PCの識別をかけてあげます。
<?php if ( wp_is_mobile() ) : ?>
// スマホ・タブレットで表示させたい内容
<?php else: ?>
// PC（モバイル端末以外）で表示させたい内容
<?php endif; ?>
これを赤字の部分に当てはめます。
そうしたらこうなります。
<!-- ロゴ又はブログ名 -->
<p class="sitename"><a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<?php if ( get_option( 'st_logo_image' ) ): //ロゴ画像がある時 ?>
<?php if ( wp_is_mobile() ) : ?>
<img alt="<?php bloginfo( 'name' ); ?>" src="スマホで表示させたい画像のURL" >
<?php else: ?>
<img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo esc_url( get_option( 'st_logo_image' ) ); ?>" >
<?php endif; ?>
これでスマホの時にはスマホで見せたい画像が
パソコンの時にはパソコンで見せたい画像を分けて表示できます。
