左坊のメモ帳

WordPress など

*

WordPressでスマホの時だけ表示したい

      2018/08/26

スマホの時だけ表示したい、パソコンの時だけ表示したい、そんな時に使えるコード。

例えば広告とか、スマホユーザーだけに表示したい、とか、パソコンユーザーだけに表示したい、という時がありますよね。

そんな時に使えるコードがWordpress関数に用意されています。

「関数」と聞くと難しそうに見えますが、一度やってみると意外と「あっ、こんなもんか」と感じると思います。

関数を使ったサンプルコードを元に調整したコードを、phpファイルに書き込んで、FTPでサーバーにアップロードします。

WordPressでphpファイルを直接修正できると、色々と調整できて便利ですよ。

スポンサーリンク

大まかな作業を3ステップで

  1. phpファイルを探す
  2. phpファイルを修正する
  3. phpファイルをアップロードする

です。

スマホの時だけ表示する手順

では早速やってみたいと思います。

「スマホの時だけ表示する」のと「パソコンの時だけ表示する」の違いは、コードの一部分だけなので、それ以外の手順は共通になります。

  1. まずは、表示したい場所のphpファイルを探します。
  2. 大体の場所としては、

    • 共通のヘッダー部分:header.hp
    • 共通のフッター部分:footer.hp
    • サイドバー:sidebar.php
    • 投稿ページ:single.php
    • 固定ページ:page.php

    といった感じです。
    ファイルの場所は、お使いのテーマファイルのフォルダになります。

  3. FTPでサーバーにログインして、使っているテーマのフォルダーに移動します。
  4. ※FTPを使ったことがない場合は、こちらでFTPソフトのインストール&接続手順を説明してますのでご参考ください。

  5. そのフォルダーにあるphpファイルをパソコンにダウンロードします。
  6. ダウンロードしたphpファイルをコピペします。(バックアップです)
  7. テキストエディタでphpファイルを開きます。
  8. 表示したい場所に、サンプルコードを改変したコードを記入します。
  9. <?php if(wp_is_mobile()): ?>
    /* ここにスマホの時にだけ表示したいものを書く */
    <p>これが見えているあなたはスマホユーザー</p>
    <?php endif; ?>
  10. ファイルを保存して、FTPでサーバーに上書きアップロードします。
  11. 作業はこれで終了、サイトにアクセスしてみて、うまく表示できていればOKです。

サンプルコード

スマホ・タブレットの時だけ表示するコード

<?php if(wp_is_mobile()): ?>
/* ここにスマホの時にだけ表示したいものを書く */
<?php endif; ?>

パソコンの時だけ表示するコード

<?php if(!wp_is_mobile()): ?>
/* ここにパソコンの時にだけ表示したいものを書く */
<?php endif; ?>

パソコンの時とスマホ時で表示を分けるコード

上の2つを並べればOKです。

<?php if(wp_is_mobile()): ?>
/* ここにスマホの時にだけ表示したいものを書く */
<?php endif; ?>
<?php if(!wp_is_mobile()): ?>
/* ここにパソコンの時にだけ表示したいものを書く */
<?php endif; ?>

上記の「/* ここに~表示したいものを書く */」の部分をhtmlコードに置き換えればOKです。

例えば、画像のリンクを表示したい場合は、以下のようなコードになります。

<?php if(wp_is_mobile()): ?>
<a href="http://blog.saboh.net/filezilla/"><img src="http://blog.saboh.net/wp-content/uploads/2018/08/filezilla-150x150.jpg" alt="FileZillaの使い方のアイキャッチ画像"></a>
<?php endif; ?>

スマホの時だけ、以下の画像リンクが表示されるようになります。(表示例なのでパソコンでも表示してます。)
FileZillaの使い方のアイキャッチ画像

wp is mobile関数

今回使用したwp_is_mobile関数は、スマホとパソコンの区別を「HTTP_USER_AGENT」で判別しています。

レスポンシブデザインで使うメディアクエリではないので、例えばパソコンのブラウザでウィンドウを小さくしても、「スマホだけ表示したいもの」は表示されません。

≫関数リファレンス/wp is mobile – WordPress Codex 日本語版

 - WordPress