質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Q&A

解決済

1回答

2131閲覧

レスポンシブサイト PCとスマホでカスタム投稿タイプの表示件数を変えたい

t_suzuki1009

総合スコア28

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

0グッド

0クリップ

投稿2018/10/28 03:28

編集2018/10/28 05:16

前提・実現したいこと

ワードプレスでレスポンシブ対応のキャストの一覧表を作っています。
現在
http://creatornote.nakweb.com/wp-pagenavi_archive/
のブログを参考に

wp_pagenavi プラグインを入れて、カスタム投稿タイプkrc_castのページャー設置まではできたのですが、

パソコンで表示される件数
スマホで表示される件数

を別にしたいと思います。

具体的には

パソコンで表示される件数は件数設定なし
スマホで表示される件数20件程度

スマホの場合は20件以降はgoogleモバイルページのようにページネーションではなく無限スクロールにしたいと考えています。
無限スクロールはinfinite-scrollを実装したいと考えていますが、それができるのかどうかも知識不足で判断が付きません。

無限スクロールをするにもまずはページを分けることが必要なのではないかと思い、wp_pagenavi プラグインを入れ件数毎に「次へ」を表示させている格好です。

ご教授お願い致します。

発生している問題・エラーメッセージ

該当のソースコード

<div class="cssgrid"> <?php $args = array( 'paged' => $paged, 'post_type' => 'krc_cast', 'posts_per_page' => 50, ); $my_query = new WP_Query($args); if ($my_query->have_posts()) : while ($my_query->have_posts()) : $my_query->the_post(); ?> <div class="item"> <?php $cast_fields = get_post_custom(); //カスタムフィールドを全部取得 $cast_screens = json_decode( $cast_fields[ '_krc_cast_screens' ][ 0 ] ); //画像配列を用意 $cast_type_terms = get_the_terms( $post->ID, 'krc_type' ); //タイプタクソノミーを取得 $cast_grade_terms = get_the_terms( $post->ID, 'krc_grade' ); //グレードタクソノミーを取得 $cast_new_terms = get_the_terms( $post->ID, 'krc_new' ); //新人区分タクソノミーを取得 ?> <a href="<?php the_permalink(); ?>"> <div> <div><img src="<?PHP echo esc_url($cast_screens[0]); ?>" alt="<?php echo esc_html($cast_fields['_krc_name'][0]); ?> "/> </div> <div> <?php echo esc_html($cast_fields['_krc_name'][0]); ?> <?php echo esc_html($cast_fields['_krc_age'][0]); ?>歳</div> <div> <?php if ( attend_schedule(get_the_ID()) ) : ?>本日出勤中 <?PHP endif; ?> </div> <div><span class="tbwh">T<?php echo esc_html($cast_fields['_krc_tall'][0]); ?>B<?php echo esc_html($cast_fields['_krc_bust'][0]); ?>(<?php echo esc_html($cast_fields['_krc_cups'][0]); ?>)W<?php echo esc_html($cast_fields['_krc_waist'][0]); ?>H<?php echo esc_html($cast_fields['_krc_hips'][0]); ?></span> </div> <div> <?php echo esc_html($cast_type_terms[0]->name); ?> </div> <div> <?php echo esc_html($cast_grade_terms[0]->name); ?> </div> <div> <?php echo esc_html($cast_new_terms[0]->name); ?> </div> <?php singlecalendar2(get_the_ID()); //スケジュール表示 ?> </div> </a> </div> <?php endwhile; ?> </div> <!-- .グリッドレイアウト終了タグ追加 在籍--> <?php wp_reset_query();endif; ?> <?php if(function_exists('wp_pagenavi')) wp_pagenavi(array('query' => $my_query));?>

試したこと

補足情報(FW/ツールのバージョンなど)

元はTCD様のテーマファイルです。
http://tcdwp.info/tcd056/

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

wp_is_mobile()または独自の関数で振り分ければいかが?
関数リファレンス/wp is mobile

【WordPress】 is_mobile()でスマホとタブレットを分ける方法

<?php if( is_mobile() ){ $num = 20; } else { $num = -1; } $args = array( 'paged' => $paged, 'post_type' => 'krc_cast', 'posts_per_page' => $num, );

投稿2018/10/28 10:34

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

t_suzuki1009

2018/10/29 00:25

こんにちは。 ご教授頂きましたソースで 表示することができました。 一言で表せないくらいとても感謝しております。 本当にありがとうございました。 またわからないことがありましたら質問させてください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問