WordPressページ付け：手動またはプラグインを使用してページ付けを追加する方法

公開: 2021-12-18

WordPressのページネーションを制御する方法をお探しですか？

サイトのページ付けを調整すると、よりユーザーフレンドリーでナビゲートしやすいWebサイトを作成するのに役立ちます。ただし、多くのWordPressテーマは詳細なページネーションオプションを提供していません。つまり、実行できる変更には制限があります。

ありがたいことに、WordPressのページネーションを調整する簡単な方法がいくつかあります。上級ユーザーはカスタムコードに頼ることができますが、カジュアルユーザーはいくつかの高品質のページネーションプラグインを見つけることができます。

この投稿では、WordPressのページネーションについて知っておく必要のあるすべてをカバーします。

飛び込みましょう！

WordPressのページネーションとは何ですか？

WordPressのページ付けは、Webサイトのブログ投稿またはその他のコンテンツのリストを個別のページに分割するプロセスです。

たとえば、100のブログ投稿がある場合、各ページに10のブログ投稿を表示するようにページネーション設定を構成できます。これにより、ブログ投稿リストが10ページに分割され、各ページに10の投稿が表示されます。

その後、訪問者は「次へ」または「前へ」ボタンを使用して、投稿を一覧表示するページ間を移動できます。または、場合によっては、訪問者が特定のページにジャンプできるように、ページの番号付きリストが表示されます。たとえば、デフォルトのTwenty Twenty-Oneテーマでは、ページネーションは次のようになります。

デフォルトのTwentyTwenty-OneテーマでのWordPressページネーションの例。 — デフォルトのTwentyTwenty-OneテーマのWordPressページネーションの例。

1つのWordPress投稿を複数のページに分割することもできます。これは、長い形式のコンテンツを公開する場合に役立ちます。

一部のコードスニペットまたはプラグインを使用すると、サイトでのページネーションの動作をより詳細に制御することもできます。これについては、この投稿の後半で説明します。

WordPressのページネーションを制御する方法をお探しですか？ここから開始クリックしてツイート

なぜWordPressページネーションを使用するのですか？

WordPressのページネーションを気にする必要がある主な理由は3つあります。

ナビゲーションとユーザーエクスペリエンスの向上
よりよい性能
SEOのクロール性の向上

それらを見ていきましょう。

ナビゲーションとユーザーエクスペリエンスの向上

WordPressのページ付けを改善する最大の利点は、訪問者がサイトをナビゲートしやすくなり、訪問者のエクスペリエンスが向上することです。

多くのWordPressテーマは限られたページネーションオプションしか表示しないため、訪問者が別のページに移動するのは困難です。

たとえば、訪問者が投稿の最初のページを読んだときのTwentyTwenty-Oneテーマのデフォルトのページネーションオプションは次のとおりです。

Twenty Twenty-Oneテーマは、最初のページに限定されたページ付けオプションを提供します。

訪問者は最後のページ（この例では6ページ）または次のページ（ [古い投稿]をクリックして）に移動できますが、3、4、または5ページに直接移動することはできません。

これを、訪問者が適切な場所に到達するのに役立つ複数のページ付けリンクを提供するKinstaブログと比較してください。

Kinstaブログには、訪問者がナビゲートしやすいように、より多くのページネーションオプションが用意されています。 — Kinstaブログは、ナビゲーションを容易にするためのより多くのページネーションオプションを提供します。

訪問者は、より深いページに移動するときにさらに多くのオプションを利用できるため、必要に応じて別のページにすばやくジャンプしたり戻ったりできます。

ユーザーは、より深いページに移動するにつれて、より多くのページネーションオプションを取得します。

よりよい性能

ページネーションを使用することは、サイトが各ページにロードする必要のあるデータの量を制限することにより、WordPressサイトのパフォーマンスを向上させるための戦術にもなります。

たとえば、50のブログ投稿があるとします。メインのブログページに50件すべてのブログ投稿を読み込もうとすると、大量のデータが含まれるため、ブログページの読み込みが遅くなる可能性があります。

ただし、ページ付けを使用してリストを10件の投稿からなる5ページに分割すると、データの5分の1を読み込むだけでよいため、各ページの読み込みがはるかに速くなります。

SEOのクロール性の向上

ページネーションを使用すると、Googlebotなどの検索エンジンロボットがより多くのナビゲーションリンクを提供することで、サイトをクロールしやすくなります。

わずかな違いですが、サイトのクロール性を向上させるために微調整を加えることは、SEOにとって常に良いことです。

WordPressのページネーションを手動で制御する方法

次のセクションでいくつかの便利なWordPressページネーションプラグインを紹介しますが、WordPressページネーションを操作するための組み込み機能もいくつかあります。または、知識レベルに応じて、カスタムコードを使用してページ付けを調整することもできます。

デフォルトのTwentyTwenty-Oneテーマを例として使用して、ページ付けを操作するための組み込みオプションについて説明しましょう。

1ページに表示するコンテンツアイテムの数を制御する

デフォルトでは、WordPressはページごとに10件の投稿を表示します。したがって、25の投稿がある場合、合計3ページになります。最初の2ページにはそれぞれ10件の投稿が表示され、最後のページには残りの5件の投稿が表示されます。

この数を調整したい場合は、[設定]> [ブログページの閲覧と編集]に移動して、最大値を表示できます。

設定領域からWordPressがページごとに表示する投稿の数を変更する方法。 — WordPressがページごとに表示する投稿の数を変更する方法。

WordPressの投稿またはページを複数のページに分割する

これまでのところ、私たちは主にブログのリストページを複数のページに分割することに焦点を当ててきました。ただし、WordPressでは、個々の投稿やページをさまざまなページに分割することもできます。これは、状況によっては役立つ場合があります。

WordPressブロックエディター（別名Gutenberg）を使用している場合は、ページ分割ブロックを使用してページ分割を追加する場所を選択できます。

従来のTinyMCEエディターを使用している場合は、次の2つの方法のいずれかを使用して、ページ分割を追加する場所を選択できます。

エディターの[ビジュアル]タブで、ページ分割を追加する場所にマウスカーソルを置きます。次に、次のキーボードショートカットを使用します： Alt + Shift+P 。
次のスニペットをエディタの[テキスト]タブに貼り付けて、ページ分割を手動で配置します：  。

PHPとCSSを使用してWordPressのページ付け動作を調整する

あなたがあまり技術的な人でないなら、この方法はおそらくあなたのためではありません。ページネーションプラグインにスキップすることをお勧めします。

ただし、サイトにマイナーなコード調整を加えることに慣れている場合は、PHPとCSSを使用してテーマのページ付けを調整できます。

テーマのテンプレートファイルを編集するため、WordPressの子テーマを使用する必要があります。そうしないと、次にテーマを更新したときに変更が上書きされます。子テーマの設定方法に関する詳細なガイドがあります。

また、変更を加える前にサイトをバックアップすることをお勧めします。

WordPressテーマに手動でページ付けを追加する場合は、the_posts_pagination関数を使用できます。たとえば、次のスニペット：

 the_posts_pagination( array( 'mid_size' => 2, 'prev_text' => __( 'Previous Page', 'textdomain' ), 'next_text' => __( 'Next Page', 'textdomain' ), ) );

このスニペットを、ページネーションを表示する子テーマのテンプレートファイルに直接追加します。

以下では、デフォルトのTwenty Twenty-Oneページネーションを残し、コードスニペットを使用して独自のページネーションを追加して違いを確認しています。「ページ1」のページ付けはテーマのデフォルトであり、「1」、「2」、「3」のページ付けはカスタムコードから取得されます。

デフォルトのページネーションと独自のカスタムページネーションの例。 — デフォルトのページネーションとカスタムページネーションの例。

コードでは次のようになります。元のページネーション関数とカスタムページネーションを確認できます。

上記のスクリーンショットの例の実際のPHPコード。 — 上記のスクリーンショットの例の実際のコード。

ライブのWordPressサイトで既存のページネーション関数をカスタム関数に置き換えることをお勧めします（警告：最初にステージングサイトで行うことをお勧めします。これは単なる例です！）。テーマによっては、複数のファイルを編集する必要がある場合があります。

FTPクライアントを介してサーバーに接続し、専用のPHPエディターを使用してテーマファイルを編集する方が便利な場合があります。

テーマのページ付けのスタイルを調整するには、カスタムCSSを追加する必要があります。

7つの最高のWordPressページネーションプラグイン

サイトのページ付けをより細かく制御したい場合は、WordPressページ付けプラグインを使用することをお勧めします。利用可能な上位7つのオプションを次に示します。

1.WP-PageNavi

WP-PageNaviWordPressプラグインカード。 — WP-PageNaviWordPressプラグイン。

700,000以上のサイトで活動している、WP-PageNaviは、かなりの差で最も人気のあるWordPressページネーションプラグインです。また、100％無料で、人気を説明するのに役立ちます。

それはあなたがあなたのサイトのページ付けの振る舞いを制御することができるあなたに簡単な設定領域を与えます。テキスト、表示するページ番号の数などを調整できます。

ページネーションのデザインをより細かく制御したい場合は、サードパーティのStyles For WPPagenaviAddonプラグインを検討することもできます。

使い方

WP-PageNaviは非常に人気があるため、一部のWordPressテーマはプラグインの組み込みサポートを提供します。テーマがそうであれば、プラグインをアクティブにしてその設定を構成するだけで、準備は完了です。 [設定]>[PageNavi]に移動すると、設定にアクセスできます。

ただし、テーマに組み込みのサポートが含まれていない場合は、プラグインを機能させるためにテーマのテンプレートファイルを手動で編集する必要があります。これは、技術者でない場合は少し複雑になる可能性があります。

テーマがページネーションに使用するデフォルトのコードを見つけて、WP-PageNaviのカスタムコードスニペットに置き換える必要があります。開発者は、プラグインのWordPress.orgページでこれを行う方法を説明します。

2.WP-Paginate

WP-PaginateWordPressプラグインカード。 — WP-WordPressプラグインをパジネートします。

WP-Paginateは、WordPressサイトでカスタムページ付けを設定するためのもう1つの人気のあるプラグインです。投稿のページ付けを支援するだけでなく、プラグインを使用してコメントセクションにカスタムページ付けを追加することもできます。これにより、コメントの速度を上げることができます。

上記のWP-PageNaviプラグインとは異なり、テーマテンプレートファイルを直接編集する必要はありません。技術者でない場合は、これがより適切なオプションになる可能性があります。より上級のユーザーの場合でも、PHPを使用してテーマのテンプレートファイルに手動でページネーションを配置するオプションがあります。

プラグインを使用すると、次のようなページネーションのすべての側面をカスタマイズできます。

ラベルとボタン
配置
表示するナビゲーションアイテムの数

WordPress.orgには、ほとんどのサイトで機能する無料バージョンがあります。さらにプリセットスタイルとスタイルオプションを追加する19ドルのプレミアムバージョンもあります。

使い方

プラグインを構成するには、 [設定]→[WP-Paginate]に移動して、プラグインの設定を制御します。

テーマのテンプレートファイルを編集せずにプラグインのページ付けを表示する場合は、場所と位置の設定で次の選択を行う必要があります。

[ Everywhere]ボックスをオンにすると、ページ付けが必要なすべての場所に新しいページ付けが表示されます。
[位置]ドロップダウンを[コンテンツの下]に設定します。
[標準のページネーションを非表示]チェックボックスをオンにして、テーマの既存のページネーションを非表示にします。

WP-Paginateプラグイン設定領域。 — WP-Paginateプラグインを構成する方法。

3.BestWebSoftによるページ付け

BestWebSoftWordPressプラグインカードによるページネーション。 — BestWebSoftWordPressプラグインによるページネーション。

BestWebSoftによるページ付けは、テーマのテンプレートファイルを編集しなくても、サイトに新しいページ付けシステムを追加できるもう1つのページ付けプラグインです。

ただし、上記のWP-Paginateプラグインと同様に、配置をより細かく制御したい場合は、テーマのテンプレートファイルを編集するオプションがあります。

プラグインの設定を介して、ページネーションの場所、スタイル、および動作を簡単に調整できます。

無料版はほとんどのサイトで問題なく動作するはずですが、20ドルのプレミアム版では、さらに多くのページネーションタイプと組み込みのDivi互換性が追加されます。

あなたのeコマースウェブサイトのための超高速、信頼性、そして完全に安全なホスティングが必要ですか？ Kinstaは、WooCommerceの専門家によるこれらすべてのサポートと24時間年中無休のワールドクラスのサポートを提供します。私たちの計画をチェックしてください

使い方

プラグインを構成するには、ダッシュボードの新しい[ページネーション]タブに移動します。

プラグインのデフォルト設定は、テーマの既存のページネーションを自動的に非表示にし、プラグインのカスタムページネーションに置き換えます。新しいページネーションのスタイルと動作の設定を構成するだけです。

4.Ajaxロードモア

Ajax LoadMoreWordPressプラグインカード。 — Ajax LoadMoreWordPressプラグイン。

Ajax Load Moreを使用すると、ユーザーに新しいページをロードさせずに、より多くのコンテンツをロードするボタンを作成できます。これは、「従来の」ページネーションやいくつかの独自のひねりなど、ページネーションを制御するためのいくつかのオプションを提供します。

プレミアムアドオンを購入する場合は、実際のページ付けボタンを追加できます。ユーザーが新しいページに移動すると、ページがリロードされているとは認識されませんが、URLは変更されます（SEOに適しています）。ここでこれのライブデモを見ることができます。

Ajax Load Moreを使用すると、ページネーションを「LoadMore」ボタンに置き換えて無料バージョンにすることができます。訪問者が別のページに移動するために使用できるページ付けリンクを追加する代わりに、Ajax Load Moreを使用すると、「Load More」ボタンを追加して、ページをリロードせずにさらに投稿を表示できます。ここでこれのライブデモを見ることができます。

使い方

Ajax Load Moreプラグインは、既存の投稿リストにページ付けを追加する代わりに、目的の設定を含む新しい投稿リストを作成することで機能します。これを設定するには、WordPressダッシュボードのAjaxLoadMore領域を使用します。

従来のページングを設定する場合は、必ずページングアドオンを購入してインストールしてください。

5.アルファベットのページネーション

AlphabeticPaginationWordPressプラグインカード。 — アルファベットのページネーションWordPressプラグイン。

Alphabetic Paginationプラグインは、サイトにさまざまなタイプのページ付け（AZリスト）を実装するのに役立ちます。

Alphabetic Paginationを使用すると、番号でページ付けしたり、公開日で投稿を並べ替えたりするのではなく、アルファベットの文字ごとにページ付けオプションを作成できます。次に、ユーザーが特定の文字をクリックすると、その文字で始まるすべてのコンテンツが表示されます。

使い方

プラグインを使用するには、 [設定]> [アルファベットのページ付け]に移動して、設定を構成します。

プラグインの設定の[全般]タブで、アルファベットのページ番号を表示する場所を構成できます。

自動実装の使用は最も簡単なオプションです。ただし、[ショートコード]タブのショートコードまたはPHP関数を使用して、アルファベットのページ付けを手動で配置することもできます。

AlphabeticPaginationプラグインの設定領域。 — アルファベットのページネーションの配置を構成する方法。

配置を構成したら、[スタイリング]タブからアルファベットのページネーションのデザインを制御できます。

6.WPショーの投稿

WP ShowPostsWordPressプラグインカード。 — WPShowPostsWordPressプラグイン。

WP Show Postsは、カスタムページネーションを備えた投稿リストを作成できる便利なプラグインです。

これが重要な詳細です。既存のブログ投稿リストにページ付けを追加するのではありません。代わりに、独自のページネーション設定を含む新しいブログ投稿リストを作成しています。

プラグインには柔軟なクエリビルダーも含まれているため、表示する投稿（したがってページ付けする投稿）を正確に選択できます。

使い方

プラグインをアクティブ化したら、 [WP Show Posts]> [Add New]に移動して、新しい投稿リストを作成できます。

すべての設定を調べて、表示するコンテンツを制御することをお勧めします。ページネーションを設定する際は、[投稿]タブの[ページ付け]ボックスをオンにして、ページあたりの投稿数を設定します。

すべてを設定したら、ショートコードまたはPHP関数を使用して投稿リストを追加できます。

7.WooCommerceのページ付けスタイラー

WooCommerceWordPressプラグインカード用のページネーションスタイラー。 — WooCommerceWordPressプラグイン用のページネーションスタイラー。

名前が示すように、WooCommerceのPagination Stylerは、WooCommerceストア専用のページ付けプラグインです。

それはあなたにあなたの店の製品ページネーションの位置とスタイルを制御するための多くの新しいオプションを提供します。また、従来の水平方向のページ付けの代わりに垂直方向のページ付けなど、まったく異なるレイアウトから選択することもできます。

使い方

WooCommerceのPaginationStylerは、既存のWooCommerceのページ付けをプラグインのページ付けに置き換えることで機能します。

プラグインの設定を構成するには、WordPressダッシュボードでBeRocket>PaginationStylerに移動します。

WooCommerceプラグイン設定領域のページネーションスタイラー。 — WooCommerce設定領域のページネーションスタイラー。

サイトのページ付けを調整すると、よりユーザーフレンドリーでナビゲートしやすいWebサイトを作成するのに役立ちますが、多くのWordPressテーマには詳細なオプションがありません。このガイドが役立ちます。クリックしてツイート

概要

ページネーションを使用すると、WordPressサイトのコンテンツを複数のページに分割できます。これにより、人間や検索エンジンがナビゲートしやすくなり、各ページにロードするデータが少なくなるため、パフォーマンスが向上します。

すべてのWordPressサイトには、すぐに使用できるページ付けサポートが付属しています。ただし、ほとんどのテーマのデフォルトのページネーションシステムは制限されています。

WordPressのページネーションを改善するには、カスタムコードを追加するか、上記で詳しく説明した7つのWordPressページネーションプラグインのいずれかを使用します。

WordPressのページネーションについてまだ質問がありますか？ 以下のコメントであなたの考えを共有してください！