この記事の所要時間: 20

レスポンシブデザインでもスマホは別のテーマだとしても
同一コンテンツ(投稿・固定ページ・その他)を表示する場合に

「ここの部分はスマホでは表示したくない」

とか

「この部分はスマホとPCで表示を切り替えたい」

という場合に使えそう・・・なショートコードです。

このコードをWordPressの使用しているテーマの functions.php に書き加えてください。

/**
 スマホの場合は・・・表示分けショートコード
  [mobile]ここにコンテンツ[/mobile]
  [mobile not=true]ここのコンテンツはPC用[/mobile]
 */
function func_is_mobile($atts=NULL, $content) {
    extract(shortcode_atts(array(
        'not' => 'false',
    ), $atts));
    $bool = TRUE;
    if ( $not != 'false' ) { $bool = FALSE; }
    if ( wp_is_mobile() == $bool ) {
        return stripslashes_deep($content);
    }
}
add_shortcode('mobile', 'func_is_mobile');

すると、このコードのコメントにもあるように
※”[]”カッコは挙動防止用に全角[]にしています。適宜置き換えて下さい。

[mobile]スマートフォンで見ています[/mobile]
[mobile not=true]PCで見ています[/mobile]

と記述するとそれぞれデバイスによって切り替えるようになります。
切替についてはWordPress標準の「wp_is_mobile」関数を使っていますので
独自にデバイス判定しているメソッドがある場合はそれと置換えてください。

※注意点としてはこのままだと ショートコードの中にショートコードがある場合はショートコードがそのまま表示されてしまいます。中にショートコードがある場合にショートコードを活性化するように今後改造しますー

この記事が気に入ったら
いいね ! しよう

Twitter で