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

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

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

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

スポンサーリンク

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

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

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

という流れになります。

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

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

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

functions.phpに条件分岐を追加

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

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

MEMO

functons.phpは記述ミスがあるとサイトが表示されないエラーになりますので、その場合はファイルマネージャー(FTP等)でfunctions.phpを編集前の状態に戻せるようにしておいてから作業すると安心です。

それと初めてfunctions.phpを作成する場合には注意が必要なのでこの記事を先にどうぞ。

子テーマにfunctions.phpを追加する時の注意点

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バージョン)でした。

コメント

  1. cmjn より:

    しげぞう様

    どちらの質問にもご丁寧に答えてくださり、ありがとうございます!!

    余白はコンテンツが狭くなるのも考えものなので、一度試してみて、見た目が悪くなってしまったら今まで通りでいこうと思います(^_^;)

    改行のスペースについては、高さをいじってみます!
    それでもわからなかったら、また教えてくださいm(_ _)m

    本当にありがとうございました!!

  2. しげぞう より:

    cmjn様

    返信ありがとうございます。

    1.スマホの背景色ですがちょっと具体的な部分が分かりませんのでなんとも言えない感じなんですが、先日のコードで背景部分の余白は極力削るようなCSSになってます。というのも、スマホの画面は機種によっては非常に狭くなってしまい、余白を取りすぎると本文のコンテンツ部分がさらに狭くなってしまいます。結果として折り返しが多くなりますので、これを少なくする意味合いのCSSでした。

    CSSの中に599px以下(スマホ用のCSS)という条件分岐して囲ってあるコードがありますが、これを一旦削除してみてどのように変わるか試してもらえますか?599px以下の部分消したらデフォルトのTwenty Twelveの余白になります。

    2.御台の改行スペースですが、おそらく見出しのCSSの「line-height(行間の高さ)」の調整で治るような気がします。実際見てないのでなんとも言えませんが、見出しのコードで行間の調整してみて下さい。もしどうしても分からない場合はサイトのURL教えて下さい。コメント公開時にはURLは削除します。

  3. cmjn より:

    訂正ありがとうございます!!
    無事にできました!!!
    とても見やすくなり大満足です。
    本当にありがとうございましたm(__)m

    また、分からないことが出てきましたらよろしくお願いいたします!

タイトルとURLをコピーしました