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

SPONSORED LINK








…………………………………………………………………………………………………………………
▼おすすめコンテンツ

私が転職3回のうち2回《女の転職@type》を利用した理由

私が就活中、忙しくてもスキマ時間に無理なくサクっと働いた方法を紹介する

【無料】ネットで稼ぐ方法やコツはこの1冊の本が教えてくれた。結果をだしたい人におすすめ
…………………………………………………………………………………………………………………

こんにちは!

こば(@kobakobalife)です!

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

ハミングバードは最強なテーマです。
・デザインきれい
・内部SEO最適化されている
・レスポンシブ対応
・ブログ運営に必要な機能がカバーされている

なんですが、どうしてもヘッダー画像はスマホだけ表示させたくなってもーたので、カスタマイズしてみました。

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

ハミングバードはデフォルトはヘッダー画像はありません。なのでまずはヘッダー画像を表示させるカスタマイズが必要となります。

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

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

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

 

表示できましたか?

 

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

これでヘッダー画像の表示ができたら次は変更したソースにスマホだったら表示させる関数を挿入するだけでOKっす!

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

&& !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


…………………………………………………………………………………………………………………
▼おすすめコンテンツ

【無料】ネットで稼ぐ方法やコツはこの1冊の本が教えてくれた。結果をだしたい人におすすめ

【ウォーキングデッド】観なきゃまじで損。なぜこんなに面白いのか5つの魅力を語ります
…………………………………………………………………………………………………………………



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

リアクションでか!ってよく言われます。 元プログラマー。 月間20万pvの複数webメディア運営中。 働き方について考える好き! 英語、国際交流、EDM、旅好き。 ブログ仲間募集中ですブロガー好きです! follow us in feedly 友だち追加 Instagram