WP 固定ページや投稿ページでMobile分岐タグを挿入する！

2017/3/22 WordPress

WordPressでサイト制作をしていて、固定ページや投稿ページでモバイル（スマホ）とPCの分岐をしたいと思ったことはありませんか？
自分はあります！
そんなこんなで以下の方法で分岐が可能です。

分岐と言うより、ここからここまではモバイル（スマホ）に表示をし、ここからここまでならPCに表示と言った感じです。

先ずはグタグタ説明するよりソースをどうぞ。

① functions.php に以下を記述。

function pccontent( $atts, $content = null ) {
if(is_mobile()) {  
        return '';   
 } else {
        return '' . $content . '';
 }
}
function spcontent( $atts, $content = null ) {
if(is_mobile()) {  
        return '' . $content . '';   
 } else {
        return '';
 }
}
add_shortcode('pc-site', 'pccontent');
add_shortcode('sp-site', 'spcontent');

② 投稿ページなどに下記のタグを使って表示を使い分ける

[sp-site]ここに記述したものはモバイル（スマホ）の時だけ表示されます。[/sp-site]
[pc-site]ここに記述したものはPCの時だけ表示されます。[/pc-site]

スマホとPCの分岐には下記の分岐が使用されていると思いますが、

<?php if ( wp_is_mobile() ) : ?>
  // モバイル用コンテンツ
<?php else: ?>
  // PC用コンテンツ
<?php endif; ?>

上記のタグは主にテンプレートファイル（ index.php や page.php や single.php ）でしか使用できませんが、今回のものだと、固定ページの投稿や。記事の投稿画面でも使用できる便利なものだと思います。
宜しければ参考までにどうぞ。

2017/03/22 追記。。。
稀に上記だけではページ内でエラーが出る場合があります。
やっつけで申し訳ないのですが、同じくfunctions.php に以下を記述。

/* スマートフォンを判別 */
function is_mobile(){
    $useragents = array(
        'iPhone', // iPhone
        'iPod', // iPod touch
        'Android.*Mobile', // 1.5+ Android *** Only mobile
        'Windows.*Phone', // *** Windows Phone
        'dream', // Pre 1.5 Android
        'CUPCAKE', // 1.5+ Android
        'blackberry9500', // Storm
        'blackberry9530', // Storm
        'blackberry9520', // Storm v2
        'blackberry9550', // Storm v2
        'blackberry9800', // Torch
        'webOS', // Palm Pre Experimental
        'incognito', // Other iPhone browser
        'webmate' // Other iPhone browser
  
    );
    $pattern = '/'.implode('|', $useragents).'/i';
    return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

上記は、モバイルの判別を行う指示になりますが、スマホはスマホ画面に、タブレットはPCを表示にする指示になります。
原因は時間がなく調べていませんが、上記のタグを入れるとエラーが回避される不思議。。。

まだまだ自分の知らないことが多く、こういった勉強からもますますやる気になりますねぇ～

みっくん