WordPress の条件分岐でパソコンには表示させてもスマートフォンに表示させない方法

wordpress-logo-hoz-rgb

テーマ編集などでコンテンツを追加してくると、スマホとパソコンで表示を変えたくなってきますね。

「パソコンの大きな画面になら表示してもいいんだけど、スマホに表示させると画面からはみ出しちゃうな・・・」とか「スマの表示のこの場所に広告は出したくないな」とか。逆に、「スマホにはパソコンと違ってこんな表示のさせ方をしたい!」と考える場合もあるでしょう。

それで「なんかいい方法ないかなぁ~?」と探していたら、意外とかんたんな方法が用意されていました。

条件分岐の関数「wp_is_mobile()」を使う

条件分岐させてモバイル端末にだけコンテンツを表示させたい場合には、WordPress 3.4 から実装されたタグ「wp_is_mobile()」を使います。

モバイル端末には表示してもパソコンには表示させない場合

以下のように、表示させたくない要素を挟み込むだけでした。

これは、かんたん!ヽ(=´▽`=)ノ

パソコンには表示してもモバイル端末には表示させない場合

逆のときはこちら。

違いがわかりにくいですが、よく見ると「!wp_is_mobile」とあるように「」が追加されています。これで非表示を指定するわけですね。

パソコンとモバイル端末で表示を変える場合

端末によって別々の内容にしたいときもあるはずです。

こちらには「<?php else: ?>」を入れて、それ以外の場合を指定しているだけです。

他にもいろいろ

「wp_is_mobile()」を変更してページによって表示/非表示を指定することもできるようです。

  • 「is_home()」:トップページ
  • 「is_single()」:単一記事ページ
  • 「is_page()」:固定ページ
  • 「is_archive()」::アーカイブページ

注意点

どうやら「モバイル端末=スマホ」とはならないようで、タブレット端末もスマホ扱いされます。端末によって表示を個別に変えるには、コードで指定する必要がありますが、初心者レベルとはいえないので、ここでは割愛します。

コードが複雑になると汚くなってしまう欠点もありますので、サイトに合わせて適用するのがいいでしょう。さらに詳しいことは他のサイトを参考にしてください。

関連記事

【add_editor_style】ビジュアルエディターのスタイルシートを追加して投稿画面の本文デザインを調整する方法

編集画面のデザインが使いにくい! 自分でスタイルシートを編集して、サイトの表示デザインを変更することは比較的初心者の頃でもできますが、そのときに困るのが編集画面と投稿後の表示との差です。 もちろん、「プレビュー」をクリックしてみれば一発でわ…

WordPress に設置した jQuery プラグインが動かない!Google にホスティングされている最新のバージョンに置き換えてライブラリ同士のコンフリクト(衝突)を回避する方法

WordPressにはデフォルトで本体内にjQueryが含まれています。基本的にはこれを使用すればいいのですが、たまに不具合が発生して動かなくなる場合があります。 たとえば、WordPressのjQueryプラグインとして配布されているもの…