PCページとスマホページで別々のヘッダー画像を使い分ける方法【WordPress】

先日コメントで「twentytwelveを使用していますが、PC・タブレットのヘッダー画像とスマホのヘッダー画像を違うものにしたいのですが、どのようにしたらよいのでしょうか？」という質問が来ました。せっかくなので記事にしておきます。

私も使っているTwenty Twelveでのカスタマイズになりますが、他の公式テーマでも似たような感じでできるかも？と思います（検証してませんが）。

もしもへ https://affiliate150.com/important-point

Amazonや楽天のアフィリエイトの併用は「もしもアフィリエイト経由」がおすすめの理由

Amazonアソシエイトと楽天アフィリエイトを併用するなら「もしもアフィリエイト...

affiliate150.com

2023.01.24

PCページとスマホページで別々のヘッダー画像を設置する手順

まずは手順を紹介していきます。

• 画像を用意（PC用とスマホ用）
• functions.phpで条件分岐を追加する
• header.phpで画像を設置
• ブログタイトルや説明文を隠す

という流れになります。

先に画像は用意しておいてアップロードし、画像のURLをメモ帳などにコピペして準備しておいて下さい。

素材探しにはこちらの記事もどうぞ。

⇒アイキャッチ画像に使える無料の写真素材サイト【クレジット表記不要】

functions.phpに条件分岐を追加

元々WordPressには「PCページ」と「スマホ・タブレット」を分ける条件分岐がありますが、「PCページ・タブレット」と「スマホページ」で分けた方が色々と都合が良いです。そのため、新しい条件分岐の追加をしておく必要があります。

元々その条件分岐が追加されているテーマもありますので、同じようなコードがないか確認してから追加してみて下さい。

functions.phpに追加するのは次のコードです。

//スマホ表示分岐
function is_mobile(){
    $useragents = array(
        'iPhone', // iPhone
        'iPod', // iPod touch
        'Android.*Mobile', // 1.5+ Android *** Only mobile
        'Windows.*Phone', // *** Windows Phone
        'dream', // Pre 1.5 Android
        'CUPCAKE', // 1.5+ Android
        'blackberry9500', // Storm
        'blackberry9530', // Storm
        'blackberry9520', // Storm v2
        'blackberry9550', // Storm v2
        'blackberry9800', // Torch
        'webOS', // Palm Pre Experimental
        'incognito', // Other iPhone browser
        'webmate' // Other iPhone browser
 
    );
    $pattern = '/'.implode('|', $useragents).'/i';
    return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

参考：【WP初心者向け】is_homeとis_mobileを使ってカスタマイズの幅を広げよう！｜Naifix

この記述で「is_mobile」という関数を作成してモバイル端末には「iPhone」「Android」「iPod」・・・を含めるという設定をしておきます。これで準備はOK。

header.phpの編集

子テーマのheader.phpから以下の記述を探します。ここの「h2」はサイトの説明文を表示させる部分です。

<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>

上記コードのすぐ下に以下コードを追加。

<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<?php if (is_mobile()) :?><img src="https://allinone-ranking150.com/wp-content/uploads/2016/12/f99cafe760cd032c06056e833f07ec47.jpg" alt="<?php bloginfo( 'name' ); ?>" class="header-img">
<?php else: ?>
<img src="https://allinone-ranking150.com/wp-content/uploads/2016/12/595997d79dfa463151fa759d27c6ffa9.jpg" alt="<?php bloginfo( 'name' ); ?>" class="header-img"><?php endif; ?></a>

上記追加できたら「スマホページで使いたい画像のURL」と「PCページで使いたい画像のURL」の部分をそれぞれ使いたい画像のURLに変更して保存。

スタイルシートでタイトルや説明文を非表示にする

最後にCSS（スタイルシート）で元々表示されるブログタイトルや説明文を非表示にしていきます（ヘッダー画像の邪魔になるので）。

追加するコードは以下です。スマホページの見え方・余白なども変更してます（paddingやmarginの部分）。

.header-image {
  box-shadow:none !important;
}
.site-title, .site-description {
    position: absolute;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
}
img { 
    max-width: 100%;
}

@media screen and (max-width:599px){
.site {
    padding:0;
    background-color: #fff;
}
.site-header {
    padding:0;
}
.header-image {
  margin-top:0px;
}
#main {
    padding: 0 24px;
}
}

追加できたら保存して確認を。

ちょっと急ぎで書いたので抜けている部分などがあるかもしれません。上手く行かない場合はコメントもらえるとありがたいです。

以上PCページとスマホページで別々のヘッダー画像を使い分ける方法（Twenty Twelveバージョン）でした。

• ⇒初心者でも迷わないWordPressの始め方や使い方まとめ！
• ⇒アフィリエイトで稼ぐ方法まとめページ