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

久しぶりの更新になってしまいました・・・
なにかと忙しくなってしまう年末ですが、今日を機にまた定期的に記事を書いていきたいと思います^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］
※↑［］を半角になおしてくださいね！