【WordPress】プラグイン無しでページナビを設置する方法

WordPressのプラグイン無しでオリジナルページ送りを設置する

全世界で大人気のCMS「WordPress」で各テーマにデフォルトで設置されている新着記事やカテゴリ、タグ一覧ページのページ送り(ページネーション)をカスタマイズする際に「WP-PageNavi」や「WP Page Numbers」などのWordPressプラグインを追加して設置する事は王道パターンだと思いますが、この度以下のようなオリジナルページ送りをプラグイン無しで設置する方法を紹介します。「複数のWordPressサイトを運用していて別々のWordPressテーマを活用しているけどページ送りだけは統一したいんだよなぁ」と考えている人がいれば是非参考にしてもらえればと思います。

記載日:2017/7/17

対象テンプレート名:function.php

参考にしたサイト様:KYASPER Note様

まずは、function.phpに以下を記載。

実際に設置されているページ送りのコードを以下に書き換え。

既存で設置されているコードは今回はコメントアウトさせました。

Hueman3.3.7のオリジナルページネーションを設置してみた

記載日:2017/7/17

対象テンプレート名:function.php

編集テンプレート:pagination.php (parts/pagination.php)

以下のコードに全て書き換える。

CSSに以下コードを記載。微調整は、各々でお願いします。

ファイルを更新して以下のデザインで正常に表示されていれば完了です。

参考サイトさんと異なることは、レスポンシブ表示で横幅が狭くなって折り返された際に、margin-bottom: 10pxで重ならないように調整しています。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする