かわたま.net

Enjoy Creative! かわたまのwebメモ

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

2014 December 17

Tag:

久しぶりの更新になってしまいました・・・
なにかと忙しくなってしまう年末ですが、今日を機にまた定期的に記事を書いていきたいと思います^O^

今回は以前記事にした、「記事内でpcとスマホ(タブレット)の表示内容を切り替えるwordpressのショートコード」の応用編です。

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 に記述します。

//PCでのみ表示するコンテンツ
function if_is_pc($atts, $content = null )
{
$content = do_shortcode( $content);
$ua = $_SERVER['HTTP_USER_AGENT'];
  if( strpos($ua, 'iPad') !== false){
    return $content;
    }elseif(!wp_is_mobile())
    {
    return $content;
  }
}
add_shortcode('pc', 'if_is_pc');
//スマートフォン・タブレットでのみ表示するコンテンツ
function if_is_nopc($atts, $content = null )
{
$content = do_shortcode( $content);
$ua = $_SERVER['HTTP_USER_AGENT'];
  if(wp_is_mobile())
    {
    if(strpos($ua, 'iPad') !== false){
    return false;
    }else{
    return $content;
    }
  }
}
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]
※↑[]を半角になおしてくださいね!