Enjoy Creative! かわたまのwebメモ

著:かわたま氏

【wordpress】PC(タブレット)とスマートフォンで記事内の表示内容を切り替えるショートコードの設定方法第06回 16年04月更新

wordpressでは記事内で php を使えないため、ショートコードでPCとスマートフォンの表示/非表示を切り替えられるようにしておくととても便利です。
上記の記事は、PCとスマートフォン(iPadなどタブレットはスマートフォンに含む)で表示内容を切り替える方法でしたが、今回はタブレットはPC表示に含む場合の設定方法です。

『wp_is_mobile』関数について

『wp_is_mobile』関数は、Webサイトを閲覧するデバイスのヘッダー情報を見て、PC用のコンテンツと、スマートフォン用のコンテンツを切り分ける、WordPressで予め用意されている条件分岐タグです。
この関数はPCと、スマートフォン(タブレットを含む)を分岐するため、タブレットをPCに含みたい場合は調整が必要です。

記述方法

PC/SPを分岐する『wp_is_mobile』関数を使い、更にサーバー変数でユーザーエージェントを取得して複数分岐します。
今回はiPadで条件分岐した場合の記述例です。

以下の通り、functions.php に記述します。

1. //PCでのみ表示するコンテンツ
2. function if_is_pc($atts, $content=null)
3. {
4. $content= do_shortcode( $content);
5. $ua= $_SERVER[‘HTTP_USER_AGENT’];
6.  if( strpos($ua,’iPad’)!==false){
7.    return $content;
8.    }elseif(!wp_is_mobile())
9.    {
10.   return $content;
11. }
12.}
13.add_shortcode(‘pc’,’if_is_pc’);
14.//スマートフォン・タブレットでのみ表示するコンテンツ
15.function if_is_nopc($atts, $content=null)
16.{
17.$content= do_shortcode( $content);
18.$ua=$_SERVER[‘HTTP_USER_AGENT’];
19. if(wp_is_mobile())
20.   {
21.   if(strpos($ua,’iPad’)!==false){
22.   returnfalse;
23.   }else{
24.   return$content;
25.   }
26. }
27.}
28.add_shortcode(‘nopc’,’if_is_nopc’);

上記コードの説明

PC(iPad)表示の記述は、
任意の変数($ua)の中に、サーバー変数で取得してきたユーザーエージェントの値を入れ、strpos関数で指定した文字列が含まれるかどうかチェックします。
今回の場合、その値の中に「iPad」値があったら $contents を返してコンテンツを表示させます。

SP表示の場合はその逆で、
値の中に「iPad」値があったら false を返して if_is_nopc 関数を終了させ条件から除外、それ以外には $content を返してコンテンツを表示させています。

今回はiPadで切り替えましたが、同様に特定のデバイスのユーザーエージェントを指定して条件分岐することが可能です。

実際に記事内で使うショートコード

投稿、または固定ページ内で、下記ショートコードを使います。
*pc(タブレット)で表示させたいコンテンツ
[pc]hoge[/pc]

*スマートフォンで表示させたいコンテンツ
[nopc]piyo[/nopc]
※↑[]を半角になおしてくださいね!