スマホ時に非表示・表示を設定できる3パターン

bibouroku

WEBディレクターも知っておきたいちょっとしたWordPressのカスタマイズ

現在のWEBサイトは、PCの時とスマホ・タブレットの時とレイアウトが少し変わったりはしますが、ベースは同じよう作っていきます。

そういった時にスマホ・タブレット閲覧時だけ非表示にする項目を作ったり表示する項目を用意する事があります。

WEBディレクターTalkではサイドバーをスマホ・タブレット閲覧時には表示しないようにしています。

写真

そんな時にWordPressで使うのが条件分岐です。

スマホ・タブレットで使う条件分岐

<?php wp_is_mobile(); ?>

スマホ・タブレットに使える条件分岐

※この条件分岐タグは、タブレットもモバイルとして判定されます。

 

wp_is_mobileの使い方

PCとスマホ・タブレットで違うものを表示する場合

<?php if(wp_is_mobile()): ?>
スマホ・タブレットに表示したいコードを書きます。
<?php else: ?>
PCに表示したいコードを書きます。
<?php endif; ?>

 

このようにすると、PCとスマホ・タブレットで違うものを表示することができます。

 

スマホ・タブレットのみ表示したい場合

<?php if(wp_is_mobile()): ?>
スマホ・タブレットに表示したいコードを書きます。
<?php endif; ?>

sumahonomi

スマホ・タブレットのみに表示されます。

PCでは読み込まれません。

 

PCのみ表示したい場合

<?php if(!wp_is_mobile()): ?>
PCに表示したいコードを書きます。
<?php endif; ?>

pcnomi

PCのみに表示されます。

スマホ・タブレットでは読み込まれません。

The following two tabs change content below.
大阪にある某制作会社でwebディレクターとして日々クライアント様とチームの間でディレクションに奮闘中のまだまだ一人前になれていないwebディレクターぴえろ(ニックネーム)です。 家庭では3人のまだまだ小さい子供たちと嫁さんのディレクションにも奮闘中でここでもwebディレクターとしてのディレクション力が少しは役に立っている気がします。
関連記事