TAKA（@TakasLife）です。
STINGER5でウィジェットを好きな場所へ追加する方法を書きました。このブログのヘッダー下に「今日の人気記事」を表示させています。
これは「WordPress Popular Posts」というプラグインを使用し表示ささせていますが、スマホでは3個の表示・それ以外では5個表示させています。
WordPressでは「is_mobile」という関数を使うことで簡単にスマホとそれ以外での表示を分けることが出来ます。今回はその方法をご紹介します。
モバイル表示用のウィジェットを追加
前回の記事のfunction.phpへスマホ表示用のウィジェットを追加する枠を１つ追加します。
[php]
if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(6) ) //(5)を(6)に変更
register_sidebars(1,
array(
‘name’=>’サイドバーウイジェット’,
‘before_widget’ => ‘
- ‘,
‘after_widget’ => ‘
‘,
‘before_title’ => ‘
‘, ‘after_title’ => ‘
‘,
));
register_sidebars(1,
array(
‘name’=>’スクロール広告用’,
‘description’ => ‘「テキスト」をここにドロップして内容を入力して下さい。アドセンスは禁止です。※PC以外では非表示部分’,
‘before_widget’ => ‘
- ‘,
‘after_widget’ => ‘
‘,
‘before_title’ => ‘
‘, ‘after_title’ => ‘
‘,
));
register_sidebars(1,
array(
‘name’=>’Googleアドセンス用336px’,
‘description’ => ‘「テキスト」をここにドロップしてコードを入力して下さい。タイトルは反映されません。’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘
‘, ‘after_title’ => ‘
‘,
));
register_sidebars(1,
array(
‘name’=>’Googleアドセンスのスマホ用300px’,
‘description’ => ‘「テキスト」をここにドロップしてコードを入力して下さい。タイトルは反映されません。’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘
‘, ‘after_title’ => ‘
‘,
));
register_sidebars(1,
array(
‘name’=>’header下人気記事’,
‘description’ => ‘「テキスト」をここにドロップしてコードを入力して下さい。タイトルは反映されません。’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘
‘, ‘after_title’ => ‘
‘,
));
//今回追加
register_sidebars(1,
array(
‘name’=>’header下人気記事(モバイル）’,
‘description’ => ‘「テキスト」をここにドロップしてコードを入力して下さい。タイトルは反映されません。’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘
‘, ‘after_title’ => ‘
‘,
));
[/php]
上記のように追記、修正してください。
今回追加した６個目のウィジェットへ追加したプラグインがスマホで表示されるようになります。
is_mobileを使うための準備
function.phpに下記をコピペしてください。
[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’]);
}
[/php]
ちなみにSTINGER5は最初から設定されています。
is_mobileを使ってみよう
is_mobileは下記のように使います。
[php]
スマホで表示させたいもの
スマホ以外のタブレットやPCで表示させたいもの
[/php]
実際の使い方
私はこのように使っています。
[php]
今日の人気記事
//スマホ用のウィジェット
//タブレット・PC用のウィジェット
[/php]
「今日の人気記事」をこの様にスマホとPCで振り分けしています。各ウィジェットにはそれぞれに「WordPress Popular Posts」を入れて、
- スマホ表示用：3記事表示
- タブレット・PC表示用：5記事表示
となるように設定しています。
よって、この様にスマホでは3記事表示に
タブレットやPCで5記事表示になります。
さいごに
is_mobileはとっても便利な条件分岐タグです。私のブログではAdSense広告の出し分けにも使っています。覚えるととっても便利なタグですよ。
コメント