最新情報 & コラム
WordPressのカスタム投稿でPCとスマートフォンの表示件数を変える方法
ALLWeb制作
WordPressでレスポンシブデザインのホームページを制作する場合、特定のカスタム投稿でPCとスマートフォンで投稿の表示件数を変える方法をご紹介します。
<?php
if( wp_is_mobile() ){
$num = 20;
} else {
$num = 30;
}
$args = array(
'paged' => $paged,
'post_type' => 'ポストタイプ',
'posts_per_page' => $num,
);
$my_query = new WP_Query($args);
if ($my_query->have_posts()) :
while ($my_query->have_posts()) : $my_query->the_post();
?>
<div>
<a href="<?php the_permalink(); ?>">
<div>
//表示したい内容
</div>
</a>
</div>
<?php endwhile; ?>
</div>
<?php wp_reset_query();endif; ?>
<?php if(function_exists('wp_pagenavi')) wp_pagenavi(array('query' => $my_query));?>
上記はスマホとタブレットを判別しない場合です。
関数リファレンス/wp is mobile
スマホとタブレットを判別する場合はis_mobile()を使用します。
functions.phpに以下のコードを追記
function is_mobile() {
$useragents = array(
'iPhone', // iPhone
'iPod', // iPod touch
'^(?=.*Android)(?=.*Mobile)', // 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']);
}
これでis_mobileがtureの時はスマートフォン、falseの時はタブレットとPCという判別ができます。
if(is_mobile()){
//スマートフォンの時
}else{
//タブレット or PCの時
}