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を表示にする指示になります。
原因は時間がなく調べていませんが、上記のタグを入れるとエラーが回避される不思議。。。
まだまだ自分の知らないことが多く、こういった勉強からもますますやる気になりますねぇ~