2023/05/20ブログサイトで大事な機能ページネーション。今回はこの機能の自作方法とBootstrapデザインを適用する方法について解説していく。この記事はWordPressのテーマを自作している方向けの記事である。プラグインなどは一切使用しない方針だ。作成するページネーションはブログ記事一覧ページのものを紹介する。私がプラグインを使用しない理由としては、記事の処理速度を第一に考え余計なデータ読み込みを防ぐためである。ページネーションまとめ作成するBootstrap適用ページネーション設置するペーぞネーションはBootstrapのページネーションデザインを適用したものである。通常WordPressでは自動でページネーションのリストを出力してくれる便利な関数があるのだが、これだとBootstrapなどのCSSフレームワークが使用できない。そのためclass名をデフォルトから変更する処理を別途作成する必要がある。今回はそのデフォルトから変更す処理を説明する。Bootstrapの使い方は本記事では述べていない。ページネーション設置プログラム(コピペOK)ページネートリンクは下記のWordPress関数にて出力されたHTMLのリストを設置して、CSSでデザインすれば良い。paginate_links($args);ただ、本サイトではデザインにBootstrapを使用しているのでもう一歩踏み込んで、Bootstrapデザインを適用するロジックを組み込む。下記の処理をfunction.phpに記載して、トップページやカテゴリページに呼び出す処理を組み込めば良い。Bootstrapを利用前提であるので注意。'</nav>';}呼び出し側の処理は下記を任意の場所に追加すれば良い。?>Bootstrap適用処理の補足やっていることとしては単純でWordPressで生成される処理のデフォルトのクラス名をBootstrapのクラス名で置き換えているだけだ。$paginate);もちろんBootstrapを使用していない場合は他のクラス名で置換しても良いので自身の環境に合わせて設定してもらえば良い。今回設定したクラスはあくまでも本サイト用にカスタマイズしたものなので、もちろん独自設定のため変更してもらっても構わない。ページネーション自作注意点ページネーションを設置する際の注意点としては記事一覧ページで「WP_Query」を使用している場合、ひと手間加える必要があり一筋縄では行かない。今回は通常の下記の呼び出しで記事一覧を生成しているページに限った処理なので、うまく動かない場合は「WP_Query」を使用していないか一度確認してみて欲しい。?>ページネーションまとめページネーションの設置方法とBootstrapデザインの適用方法について説明した。WordPress関数を使用すれば簡単にページネーションを設置できるし、Bootstrapを使用すれば簡単にそれなりのデザインのものができてしまう。どちらも利用することでサイト構築が爆速でできるのでオススメである。以上、最後まで読んでいただ感謝。スマホとPC対応のナビゲーションメニューハンバーガーメニュー不要論:ユーザーエンゲージメント向上のためのウェブ...SEOに効果大!WordPressサイトの表示速度改善テクニックと実践...SEOを強化するWordPressの目次の簡単自作法:プラグインは不要...WordPressでパンくずリストを自作!コピペでOKWordPressオリジナルテーマへのトップページへ戻るボタン追加(j...WordPressオリジナルテーマへのmetaディスクリプション追加(...NORIAKI昭和生まれ。大学は情報工学を専攻、都内IT関係企業に数年勤務→転職しメーカ社内SEになる。