WordPressのページネーションをプラグイン未使用で実装する方法

今回は、プラグインを使わず、ページネーションを実装する方法をご紹介します。

ページネーションとは、記事数が増えて記事一覧が複数ページに分割されたとき、ページ間の移動を行うためのリンクのことです。

上記はページネーションの一例です。

とある案件で、このページネーションを実装することになりました。

WordPressで構築したサイトにページネーションを設置しようとすると、ほとんどの方がプラグインの【WP-PageNavi】などに行き着くかと思います。

プラグインを使っても構わないのですが、個人的にプラグインの数は減らしたほうが良いと言う考え方なので、私の構築するサイトではプラグインを使わずにページネーションを設置しています。

プラグインを使わずにページネーションをｓエッチする方法を、以下にご紹介します。

WordPressにページネーションを実装する手順

今回ご紹介するページネーションは、このサイトでも実際に利用しているものです。

これからご紹介するコードをコピペすれば、このサイトと同じページネーションを実装することができますので、試してみてください。

ページネーションを実装する手順は以下のとおりです。

• ページネーションを表示させるコードをテーマに追加する
• CSSでページネーションを装飾する

個別に見ていきましょう。

手順1：ページネーションを表示させるコードをテーマに追加する

まずは、ページネーションを表示させたい箇所に、以下のコードを記述してください。

上記のコードをどこに設置してよいのかは、お使いのテーマによって異なります。

基本的に、記事一覧ページを定義しているファイル（例：loop.php）の、記事一覧を表示させているコードを直下辺りに設置するのが良いかと思います。

上記のコードを記述させた箇所に、以下のようなページネーションが表示されます。

上記の画像は、後述するCSSを適応した場合の見た目です。
現段階では、上記のような見た目になっていなくても大丈夫です。
CSSで装飾する方法は、次の項を参照してください。

記事数が少なく、記事一覧が複数ページに分割されていない場合は、上記のコードを設置してもページネーションは表示されません。

記事数が増えて記事一覧ページが複数に分割されれば、ページネーションが表示されるようになります。

ページネーション部分のHTMLは以下のようになっています。

吐き出されるHTMLは、記事一覧ページのページ数などによって若干異なります。
上記は、このサイトのページネーションのHTMLです。

ここまでの作業で、ページネーション本体の設置は完了です。

手順2：CSSでページネーションを装飾する

続けて、ページネーションの見た目を、CSSで整えていきます。

ページネーションの見た目は、CSSで自由に装飾することができます。
CSSが書ける方は、先ほどのHTMLを参考に、好みの装飾を行ってください。

以下に記述するコードは、このサイトで実際に使用しているCSSコードです。

上記のCSSを適応させると、以下のような見た目になります。

上記のCSSを調整して、ご自身の好みに合わせた装飾をするのが良いかと思います。

ページネーションが表示されない場合

上記で説明した手順に従ってもページネーションが表示されない場合、以下のいずれかに該当する可能性が高いです。

• テーマの他の部分と競合（コンクリフト）している
• 一部のプラグインと競合（コンクリフト）している
• コードを記述する箇所が適切でない

ページネーションが表示されない理由は、サイトごとに異なります。
ご自身での対応が難しい場合は、当方で不具合の調査と修正を代行いたします。

お気軽にご相談ください。

まとめ

WordPressのページネーションをプラグイン未使用で実装する方法をご紹介しました。

• ページネーションを表示させるコードをテーマに追加する
• CSSでページネーションを装飾する

たった2ステップでページネーションを設置できました。
コードもコピペだけでよいので、簡単ですね。

ページネーションはブログ形式のサイトには必須の機能です。
プラグインを使わないでも実装可能ですのでぜひ試してみてください。