資料請求・お問い合わせ

最新情報 & コラム

WordPressのカスタム投稿でPCとスマートフォンの表示件数を変える方法

ALLWeb制作

Wordpressコラム

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の時
}