WordPressにはPHPというプログラム言語が使われています。
例えば「デスクトップでは大きな広告を表示したいけど、スマホやタブレットでは小さな広告を表示したい」とか「スマホやタブレットでは表示したくないコンテンツがある」時は
PHPのIF文(条件分岐)を使うことで特定の条件時にプログラムを実行することができます。
wordpressにはあらかじめPCの時とスマホ・タブレットの時の条件分岐タグ『wp_is_mobile』が用意されています。
<?php if ( wp_is_mobile() ) : ?>
// スマホ・タブレットで表示したい内容
<?php else: ?>
// PCで表示したい内容
<?php endif; ?>
このコードを表示したいところに貼ります。
しかし「ウィジェット」の「カスタム HTML」にはPHPコードが貼れないので、以下の記事を参考にしてウィジェット上でPHPコードが展開できるようにしておきましょう。
スマホのみに適用したい時は
一方で、最近はタブレットの画面サイズが大きくなってることもあり、「スマホのみ」と「PC・タブレット」で分けたい事もあると思います。その際は、function.phpに関数を追記して新しい条件分岐タグ「is_mobile」を作りましょう。
まず、function.phpを開いて以下のコードを貼ります。子テーマを使っている場合は子テーマのを開きます。
function.phpはコードを間違うとサイトが動かなくなりますので必ずFTPでダウンロードしてオフラインで行います。
//スマホ表示分岐
function is_mobile(){
$useragents = array(
'iPhone', // iPhone
'iPod', // iPod touch
'Android.*Mobile', // 1.5+ Android *** Only mobile
'Windows.*Phone', // *** Windows Phone
'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 else: ?>
// PC・タブレットで表示したい内容
<?php endif; ?>
特定のカテゴリーやページだけにコンテンツを表示したい時は
さらに、特定のカテゴリ記事や固定ページにだけ表示させたいときは、それぞれの条件分岐タグを使います。
is_home() //メインページに表示する場合 is_single('1') //シングルページID(特定のブログ記事) '1' に表示する場合 is_page('2') //固定ページID '2' に表示する場合 in_category('3') //is ではなく in //現在の投稿がカテゴリーID 3 に属する場合に true を返す //('')内にはそれぞれ記事・ページ・カテゴリーのIDかスラッグを指定します。 //例 ブログ記事のページにのみ表示させたい場合 <?php if(is_single()): ?> //ここにコンテンツを貼る <?php endif; ?> //ブログ記事以外のパターンを加える場合は endifの前に <?php else: ?> や <?php elseif(関数()): ?> を追加する。
関数は複数指定することもできます。
例えば、ブログ記事でかつスマホ・タブレットにのみ表示させたい場合、「and」に当たる「&&」(論理演算子)を使って以下のように書きます。
<?php if(is_single() && wp_is_mobile()): ?> //表示させたいコンテンツを書く <?php endif; ?>
このように関数を組み合わせることによって、様々な条件でのコンテンツの表示を制御することができるようになります。