【WordPressハミングバード】スマホの時だけヘッダー画像を表示させるカスタマイズ

こんにちは!

こば(@kobakobalife)です。

今回はワードプレスのテーマハミングバードのヘッダー画像をスマホ表示 PC非表示させる方法を紹介します。(逆もできます)

まず前提としてハミングバードは最強なテーマです。

  • デザインきれい
  • 内部SEO最適化されている
  • レスポンシブ対応
  • ブログ運営に必要な機能がカバーされている

申し分ないテーマです。

ただ、ヘッダー画像に関してはカスタマイズしないとヘッダー画像が表示されないみたいで。。

私は、どうしてもスマホだけ表示させたくなってしまったので、カスタマイズしてみました。

まずはヘッダー画像を表示させる

ハミングバードはデフォルトはヘッダー画像はありません。※2016年12月の時点では

なのでまずはヘッダー画像を表示させるカスタマイズが必要となります。

ソースをいじることになりますが、そこまで難しくありません。

そのやり方はもうハミングバードを作られたOPEN CAGEさんで解説されていますので下記をご参考に。

>>ハミングバードのアニメーションヘッダーを使わずにヘッダー画像をそのまま表示する方法

 

表示できましたか?

 

スマホのみ表示させる関数を追記する

続いては、変更したソースにスマホだったら表示させる関数を挿入します。

どこに入れるかというと、おそらく下記コードを追加されたかと思うので、ここの

&& !is_paged() の後に  && is_wp_mobile()  を追記してください。

こんな感じに↓

is_wp_mobile()は関数でスマホの場合って意味です。

ソース冒頭の <?php if( 〜 )?> のこのifのかっこ内で諸々の条件となる関数を入れているのですが、ここに、スマホだったらヘッダー画像を表示させて!っていう関数を追記したって感じです!

 

こんな感じになりました

PC

ヘッダー

スマホ

ヘッダー

成功!!

やったあああああああああああ^^

 

もしPCは表示させてスマホは非表示したいって場合は追記した && is_wp_mobile() の is の前に を付けてください。

こんな感じですね。

&& !is_wp_mobile()

!は後に続く関数を反対の意味にさせてくれる記号。

is_wp_mobile()は関数でスマホの場合って意味ですが
!is_wp_mobile()は関数でスマホじゃなかった場合って意味になるんです。

なのでこのをつけることによって、スマホじゃなかったら(=スマホ以外のデバイス)だったら画像を表示ってさせたわけです。
なのでパソコンではヘッダー画像が表示され、スマホでは非表示となったわけです!

 

※ちなみに今回はパソコンとスマホ以外のデバイスで確認はしていません。
私のHPに来てくださる方のほとんどがPCかスマホかなので。

 

って感じですーーー!!!

 

もともとヘッダー画像を表示させるカスタマイズはしていたので、さくっとできました!

追記するだけですので、ぜひぜひためしてみてください!

ソース変更の際は必ずバックアップとっといてからにしてくださいね!

ではでは〜!!

SPONSORED LINK


ツイッターやってます♪@kobakobalife