使用した投稿一覧にも使用可能なページ送りを設置します。設置したページ送りの見栄えを整えるためのCSSデザインサンプルも用意しています。表示名を変更可能な「最初へ・前へ・次へ・最後へ」ボタン。表示を切り替えてレスポンシブ対応。サンプルをコピペするだけでも使える。BEMによる命名規則に則ったクラス名を出力。CSSが適用されていない状態では「ページ番号・現在ページ数・移動ボタン(最初へ・前へ・次へ・最後へ)」の全てが表示されますが、CSSメディアクエリを利用して要素の表示/非表示やレイアウトを調整するレスポンシブデザインとなっています。ページ送り関数を定義テンプレートファイルから呼び出すページ送りの関数をfunctions.phpに用意します。3~7行目は表示に関する簡単な設定を行います。11行目:インスタンス名を受け取っている場合はそれを参照します。16行目:三項演算子で現在のページ番号を取得します。使っていないと忘れがちな三項演算子のPHPでの使い方です。3つの式(三項)を?(ハテナ)と:(コロン)で表す三項演算子ですが、「こういう書き方がある」ということを覚えておくだけでもソースコードを読み解く手助けになると思います。esc_html()表示するテンプレートファイルを編集ページネーションを表示するテンプレートファイルの種類に応じてどちらかの方法で関数を呼び出します。等のアーカイブテンプレートにページ送りを表示したい場合は次のように書きます。よる投稿一覧のページ送りを表示する場合WP_Query()によるループを設定します。$pagedを忘れないようにしてください。インスタンス名を引数に指定wp_reset_postdata();endif;?>20行目:WP_Queryで生成したインスタンス名$my_queryを引数としてページ送り関数へ渡します。21行目:グローバル変数であるthe_post()が変更されているため、wp_reset_postdata()でリセットします。設置できていれば次のような構造のHTMLが書き出されます。href="">&gt;&gt;</a></div>CSSで装飾される前の状態では次のようなページネーションが表示されます。(既存のCSSの影響で見た目が異なる場合があります。)ここまででページネーションの設置は完了です。次に紹介するページを参考にCSSで見た目を整えてください。CSSデザインサンプル次のページにCSSによるデザインカスタマイズ例を置いています。この記事で紹介したページネーションに対応しており、コピペするだけで使えるようになっています。レスポンシブなページネーションのCSSデザインサンプルとWordPressへの実装方法【スマホも見やすく】スマホやPC等、異なるサイズのディスプレイに対応したページネーションのデザインサンプルです。ベースとなるページネーションは「レスポンシブなページ送りの設置」で紹介したfunctions.phpに追加するタイプを使います。ここで紹介するデザイ...web-souko.com2022.02.23コピペでOKなレスポンシブ対応ページネーションデザイン【WordPress】CSSで柔軟にデザイン変更することを想定した使い勝手のよいページネーションを制作しました。利用してページ送り処理を行っています。取得できないためページ送りが動作しなくなってしまいます。$wp_queryを読み込んでも合計ページ数は取得できません。WP_Query()合計ページ数を取得するにはそれぞれのインスタンス名$the_query、$my_query、$qを参照する必要があります。今回紹介したページネーションでは、テンプレート側からWP_Query()のインスタンス名を渡した場合の処理を追加することで解決しています。WP_Query()のパラメータ'paged'が必須となります。これにより現在のページ番号を利用した処理が可能になります。ページ送りは表示されるものの、1ページ目しか表示できない場合はこれが原因かもしれません。ウェブ倉庫.メニューホームウェブ制作ホビーお問い合わせホーム検索トップサイドバータイトルとURLをコピーしました。