WordPressのカスタム投稿でPCとスマートフォンの表示件数を変える方法|ホームページ制作 コラム

2021.06.17

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

  1. 東京のホームページ制作会社|ブラボーウェブ
  2. ホームページ制作 コラム
  3. WordPressのカスタム投稿でPCとスマートフォンの表示件数を変える方法
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の時
}
監修者
田邉 文章 Fumiaki Tanabe
株式会社フィールビー CEO。企業の価値を最大化する戦略に特化したブランディングとマーケティングのエキスパート。インフラ関連企業や大手製造メーカーから中小企業に至るまで、幅広い業界でのWebブランディング実績多数。
Back

お問い合わせ・お見積依頼

各種お問い合わせや御見積、費用や納期、制作の流れなど、お気軽にお問い合わせください。現状のホームページについて改善案などのアドバイスも可能です。

無料相談お申し込み
お見積 お問い合わせ Contact Us!
お見積・お問い合わせ