スマホとPCで表示を切り替える：WordPress | コーディング・プログラミング・WEB制作ブログ

スマホとPCで表示を切り替える：WordPress

WordPressでテーマを切り替えずにスマホとPC用の表示を切り替えたい場合に便利な方法をメモ。

まず、
functions.phpに

function is_mobile(){
	$useragents = array(
		'iPhone',          // iPhone
		'iPod',            // iPod touch
		'Android',         // 1.5+ Android
		'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']);
}

と記述し、表示を切り替えたい箇所に

<?php 
//スマホ用コンテンツここから------------------------------------------------
if (is_mobile()）：?＞
ここにスマホ用
<?php 
//PC向けコンテンツここから------------------------------------------------
else: ?>
ここにPC用
<?php endif; ?>

のようにしてあげると、スマホとPCの表示を切り替えることができます。

ちょっと切り替えたい処理がある場合などに便利です。

もし記事の投稿画面で切り替えたい場合は、デフォルトではPHPが使用できないので、投稿内でもPHPを使えるようにするプラグイン(Exec-PHP等)を使用するかショートコードとして上記の処理を登録することで投稿画面内でも切り替えができるようになります。

ショートコードとして使用する方法は
functions.php内に

function pccontent( $atts, $content = null ) {
if(is_mobile()) {  
        return '';  
} else {
        return '' . do_shortcode($content) . '';
}
}
function spcontent( $atts, $content = null ) {
if(is_mobile()) {  
        return '' . do_shortcode($content) . '';  
} else {
        return '';
}
}
add_shortcode('pcswitch', 'pccontent');
add_shortcode('spswitch', 'spcontent');

と記述し、あとは投稿記事内に

	
[pcswitch]PC用コンテンツ[/pcswitch]
[spswitch]スマホ用コンテンツ[/spswitch]

のようにしてあげればOK

案件探しに！絶対登録しておきたいクラウドソーシングサービス3選【評価と経験談】：ビジネス・副業

WordPressのおすすめ参考書

WordPress仕事の現場でサッと使える!デザイン教科書／中島真洋／ロクナナワークショップ【3000円以上送料無料】

bookfan 1号店 楽天市場店

¥3,300 （2023/11/24 17:19時点 | 楽天市場調べ）

Amazon

楽天市場

Yahooショッピング

ポチップ

エンジニアのためのWordPress開発入門【電子書籍】[ 野島祐慈 ]

楽天Kobo電子書籍ストア

¥3,278 （2023/11/28 16:09時点 | 楽天市場調べ）

Amazon

楽天市場

Yahooショッピング

ポチップ