スマホの時だけ表示したい、パソコンの時だけ表示したい、そんな時に使えるコード。
例えば広告とか、スマホユーザーだけに表示したい、とか、パソコンユーザーだけに表示したい、という時がありますよね。
そんな時に使えるコードがWordpress関数に用意されています。
「関数」と聞くと難しそうに見えますが、一度やってみると意外と「あっ、こんなもんか」と感じると思います。
関数を使ったサンプルコードを元に調整したコードを、phpファイルに書き込んで、FTPでサーバーにアップロードします。
WordPressでphpファイルを直接修正できると、色々と調整できて便利ですよ。
[adsense]
目次
大まかな作業を３ステップで
- phpファイルを探す
- phpファイルを修正する
- phpファイルをアップロードする
です。
スマホの時だけ表示する手順
では早速やってみたいと思います。
「スマホの時だけ表示する」のと「パソコンの時だけ表示する」の違いは、コードの一部分だけなので、それ以外の手順は共通になります。
- まずは、表示したい場所のphpファイルを探します。
- 共通のヘッダー部分：header.hp
- 共通のフッター部分：footer.hp
- サイドバー：sidebar.php
- 投稿ページ：single.php
- 固定ページ：page.php
- FTPでサーバーにログインして、使っているテーマのフォルダーに移動します。
- そのフォルダーにあるphpファイルをパソコンにダウンロードします。
- ダウンロードしたphpファイルをコピペします。（バックアップです）
- テキストエディタでphpファイルを開きます。
- 表示したい場所に、サンプルコードを改変したコードを記入します。
- ファイルを保存して、FTPでサーバーに上書きアップロードします。
大体の場所としては、
といった感じです。
ファイルの場所は、お使いのテーマファイルのフォルダになります。
※FTPを使ったことがない場合は、こちらでFTPソフトのインストール＆接続手順を説明してますのでご参考ください。
<?php if(wp_is_mobile()): ?> /* ここにスマホの時にだけ表示したいものを書く */ <p>これが見えているあなたはスマホユーザー</p> <?php endif; ?>
作業はこれで終了、サイトにアクセスしてみて、うまく表示できていれば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="https://blog.saboh.net/wp-content/uploads/2018/08/filezilla-150x150.jpg" alt="FileZillaの使い方のアイキャッチ画像"></a> <?php endif; ?>
スマホの時だけ、以下の画像リンクが表示されるようになります。（表示例なのでパソコンでも表示してます。）
wp is mobile関数
今回使用したwp_is_mobile関数は、スマホとパソコンの区別を「HTTP_USER_AGENT」で判別しています。
レスポンシブデザインで使うメディアクエリではないので、例えばパソコンのブラウザでウィンドウを小さくしても、「スマホだけ表示したいもの」は表示されません。
コメント