Simplicityのテーマのカスタマイズ － ヘッダー でロゴ画像を登録すれば
PCでもスマホでもヘッダーに同じロゴ画像が表示される。
PCなら左上とか中央にそのままのサイズで表示、
スマホなら横幅いっぱいに表示というので問題ないこともあるけれど、
PCでは横長のページに合ったロゴ画像を、
スマホでは縦長のページに合ったロゴ画像を入れたいということもある。
どちらの環境で見てもおかしくない画像を工夫するより
PCとスマホで別のロゴ画像が表示できるようになればいいなと思った。
ロゴ画像というよりヘッダー画像・タイトル画像のような使い方で
スマホの方だけ写真やキャッチフレーズの入った画像にしたいとかいう時にも。
こちらのページ の回答を参考に、親テーマの方にあるheader-logo.phpを
子テーマにコピーしてきて、以下のように書き替えでOKだった。
※ Simplicityのバージョンによるのか、参考URLとは、元になる記述が少し違うけれど、
要は、$logo_url と $site_title の間に if ( wp_is_mobile() ) { } の文を挟んでる。
$logo_url = ( get_header_logo_url() ? get_header_logo_url() : get_stylesheet_directory_uri().'/images/logo.png' );//ロゴ画像の取得
$site_title = '<a href="'.home_url('/').'"><img src="'.$logo_url.'" alt="'.get_bloginfo('name').'" class="site-title-img" /></a>';↓
$logo_url = ( get_header_logo_url() ? get_header_logo_url() : get_stylesheet_directory_uri().'/images/logo.png' );//ロゴ画像の取得
if ( wp_is_mobile() ) {
$logo_url = get_stylesheet_directory_uri().'/images/mobile-logo.png';//モバイルのロゴ画像のパス（子テーマ使用時）
}
$site_title = '<a href="'.home_url('/').'"><img src="'.$logo_url.'" alt="'.get_bloginfo('name').'" class="site-title-img" /></a>';