ベストセラー人気 WordPress テーマTop 30 詳細

WordPress ページナビゲーションを数値型に変えてくれるWP-PageNavi

Last Updated:2022年9月21日| 4のコメント

いくつかの WordPress テーマでは、ブログページまたはカテゴリページに、「前の記事」、「次の記事」ナビゲーションの代わりに数値形式のナビゲーションが表示されます。 この機能が提供されていないテーマの場合は、WP-PageNaviプラグインを使用して数値ナビゲーションに置き換えることができます。

エレメン, Avada, Divi テーマ, Newspaper など一部のページビルダーやテーマでは、テンプレートを使用してカテゴリページテンプレートなどを簡単に作成できます。 通常、テンプレートを作成しながらナビゲーション形式を指定することができます(参照).

WordPress ページナビゲーションを数値型に変えてくれるWP-PageNavi

この記事はずっと前に書かれていますが、WP-PageNaviプラグインはまだ活発に更新されており、現在70万を超えるサイトにインストールされ使用されています。

例えば、 WordPress デフォルトのテーマの一つであるTwenty Twelveテーマでブログのページには、以下の図のように「前へ、次の記事「形式になっています。

Twenty Twelveテーマナビゲーション

WP-PageNaviプラグインを使用すると、次のように数値形式のページナビゲーションに置き換えることができます。

Page-Navi

上記のように数値ナビゲーションに変更するには、まず WordPress お知らせ»プラグイン»新規追加で「WP-PageNavi」を検索してプラグインをインストールして有効にします。

ページナビゲーションに変更テーマファイルを検索します。 例えばTwenty Twelveテーマでindex.phpページを見てみるとページナビゲーションコードは次のとおりです。

このコードを次のコードに置き換えるようにします。

その後、上の図に示されている数字ナビで変わります。 レイアウト(背景色など)を変更するには WP-コンテンツ/plugins/wp-pagenavi 下の pagenavi-css.cssを変更します: 仮に .wp-pagenavi a、.wp-pagenavi spanbackground-color:yellow;を追加すると、:

Page Navi Background Yellow


図のように、数値部分の背景色が黄色に変わります。 pagenavi-css.cssを適切に変更して、目的のレイアウトを作成するようにします。

この記事を書いたときは、プラグインを直接変更する方法に設定しました。 ただし、これを修正すると、将来のプラグインの更新時に修正が消えます。 まず チャイルドテーマを作成し、編集するテーマファイルをチャイルドテーマフォルダにコピーし、変更するようにします。 そしてカスタムCSSコードはリムプレート » ルックス » カスタマイズ » 追加 CSS ページに追加します。 」WordPressにCSSを適用する方法」を参照してみてください。

WP-PageNaviはまた、基本的な数字ナビより高度な機能を提供します。

設定ページでPage NavigationのUIテキストを指定することができます:

Page Navi  -  Text


そしてページ数を「ページ1、2、3、4、5、10、20、30、40、50"と同様に表示することができるオプションやその他のオプションを提供しています。

ページナビゲーションオプションページナビゲーションオプション

スタイルを直接設定するのが難しい場合は、アドオンプラグイン Styles For WP Pagenavi Addonを使用すると、簡単にまともなデザインのナビゲーションを作成することができます。

参照


4のコメント

コメント

      • テーマを変えたらナビが消え方途を探していた。 文を読んで見たら、この記事の下にもナビが見えない気になってお聞きします。

      • 新たに変わったテーマを見てみると別記事の下に「前へ」、「次の文 "ナビゲーションがないですね。

        おそらく、個々の文を表示してくれるテーマのソースファイルにコード自体がないようです。 次の記事を参考に、適切な場所にコードを追加していただければ、「Previous」、「Next」のリンクが表示されます。

        https://codex.wordpress.org/Next_and_Previous_Links