WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです

【WordPress】Simplicity2へ挿入したヘッダーの画像スライダーをスマホ(モバイル)だけ非表示にする方法(条件分岐)

公開日:2017(平成29)年4月26日/最終更新日:

Knowledge Base Wordpress パソコン カスタマイズ 設定



【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています

Simplicity2は最初からモバイル対応になっているWordPressテーマ。しかも、実際に見てみた人なら分かりますが、バージョン1.5.7で通常だとモバイル=スマホとタブレットとなるところをモバイル=スマホのみに変更されていて、画面の小さいスマホだけモバイルとして扱うように最初からできています(つくづくすばらしいテーマです)。

内部SEO施策済みのシンプルな無料Wordpressテーマ

この機能を使ってテーマへ直接挿入した文字列やコンテンツ(画像スライダーなど)をスマホ表示のときだけ非表示にする方法を紹介します。

Simplicity2のようにユーザーエージェント(どんな端末からアクセスされているか)によって表示方法を自動で切り替えてくれるテーマでは、モバイル用のテーマを作らなくてもいい分便利ではありますが、表示されるまでに時間がかかってしまうと読まずに閉じられてしまうこともありますから、なるべく表示時間は短くしたい。そんなときに便利なテーマカスタマイズ技です。

is_mobile()関数を使う

上のリンクからSimplicity2の公式ページを見ていただくと分かる通り、スマホだけを判断して表示を切り替える関数にis_mobile()というのが設定されています。これを使ってスマホ表示のときだけ非表示にするというコンテンツを追加します。

使い方は簡単で、モバイル(スマホ)のときに表示するコンテンツとスマホではないときに表示するコンテンツを

<?php if ( is_mobile() ) : ?>
// スマホで表示させたい内容
<?php else: ?>
// PC・タブレット(スマートフォン以外)で表示させたい内容
<?php endif; ?>

で記述していくだけなんですね。

※Simplicity2ではこの関数に対する設定がすでになされているので、いろいろなサイトで書かれているfunctions.phpへの追記(関数の定義)は不要です

これで簡単に条件による表示の分岐ができます。簡単ですね。

・・・ちょっと待った!!この表現って微妙じゃないですか??

実際に使うケースだとスマホのときだけ非表示にするという風にテンプレートへ記述していくとスマホ表示とパソコン表示それぞれの記述をどんどんしていかなければならないですからちょっと面倒ですね。

今回はスマホだけ表示したくない=スマホじゃなかったら表示するの方が見た目もすっきりするのでスマホ以外で表示するコンテンツを

<?php if ( !is_mobile() ) : ?>
「 // PC・タブレット(スマートフォン以外)で表示させたい内容」
<?php endif; ?>

の「// PC・タブレット(スマートフォン以外)で表示させたい内容」のところへ記述すればスマホじゃなかったときだけ表示できるようになります。