注目キーワード

WordPressのthe_posts_paginationでページネーションを表示する

WordPressのthe_posts_paginationでページネーションを表示する
  1. HOME
  2. WordPress
  3. WordPress使い方
  4. WordPressのthe_posts_paginationでページネーションを表示する

WordPressにはthe_posts_paginationという関数が用意されてるため、トップページの記事一覧やカテゴリーの記事一覧にページネーションを表示したいときにはthe_posts_paginationの使い方を覚えるだけで簡単にWordPressへのページネーションが実装できます。

WordPressのthe_posts_paginationが出力するページネーションの表示形式はページネーションでページが分割されたときに前と次へのリンクでページ移動できるようになり、番号付きのリンクテキストも表示できます。

 

目次

WordPressのthe_posts_pagination関数

 

WordPressのthe_posts_pagination関数はWordPressバージョン4.1.0で新規導入されたWordPress関数です。

 

<?php the_posts_pagination(); ?>

 

WordPressを使用しているWebサイトやブログのindex.phpやcategry.phpの任意の位置にPHPの開始タグと終了タグでWordPressのthe_posts_pagination()を囲んで記述しテンプレートファイルを保存するとページネーションが表示します。

 

 

the_posts_pagination()で表示するページネーションの表示結果は初期値のパラメータが与えられて表示します。

the_posts_pagination関数がページネーションをWordPressに表示させる仕組みは、けっこう単純で、get_the_posts_navigation()関数の戻り値をecho文で表示しています。

 

function the_posts_navigation( $args = array() ) {
    echo get_the_posts_navigation( $args );
}

 

wp-includes/link-template.php

 

get_the_posts_navigation()関数はWordPressのwp-includes/link-template.phpの2685行目にあります。

そしてwp-includes/link-template.phpの2685行目から下に少し進むと2716行目でget_the_posts_navigation()関数のパラメータが配列で記述してあります。

この配列で記述されてるパラメータがthe_posts_pagination関数でも使用する初期値のパラメータになります。

WordPressにthe_posts_pagination関数でページネーションの「PREV」「NEXT」のリンクテキストの表示や「リンク番号」の表示数を増やしたい場合は、the_posts_paginationのパラーメータを使用してページネーションをカスタマイズします。

 

the_posts_pagination関数のパラメータ

 

WordPressのthe_posts_pagination関数のパラメータは配列(array)で記述します。

 

<?php
    the_posts_pagination(array(
        'パラメータ名' => '値',
        )
    );
?>

 

WordPressCodexの「関数リファレンス/the posts pagination」の説明で紹介されているパラメータは4つです。

 

関数リファレンス/get the posts pagination

 

mid_size

ページネーションの番号リンクでページ移動をしたときの現在ページの左右に表示するページ番号の数をmid_sizeで指定できます。mid_sizeの初期値は1です。

<?php
    the_posts_pagination(array(
        'mid_size' => '2',
        )
    );
?>

 

例えばmid_sizeパラメータを整数の2で指定するとthe_posts_pagination関数はWordPressに表示するページネーションの番号リンクを、現在いるページの前後に2つの番号を表示します。

 

prev_textとnext_text

the_posts_paginationのprev_textとnext-textパラメータは、ページネーションの表示で「前のページ」と「次のページ」へ移動するリンクテキストを変更する場合に使用します。

 

<?php
    the_posts_pagination(array(
        'prev_text' => '前へ',
        'next_text' => '次へ',
        )
    );
?>

 

  • 「prev_text」が前のページへのリンクテキスト
  • 「next_text」が次のページへのリンクテキスト

 

文字列で記述します。

 

Advertisement

 

screen_reader_text

WordPressのthe_posts_pagination関数のパラメータ「screen_reader_text」は、スクリーンリーダー用テキストを変更することができます。

the_posts_paginationでWordPressにページネーションを表示すると「次へ」や「前へ」「番号」のリンクが表示する上にHTMLのh2タグで「投稿ナビゲーション」のテキストがスクリーンリーダー用のテキストとして出力されます。

 

<?php
    the_posts_pagination(array(
        'screen_reader_text' => 'ページネーション',
        )
    );
?>

 

screen_reader_textパラメータはthe_posts-pagination関数の初期値で表示される「投稿ナビゲーション」のテキストを変更することができるパラメータです。

screen_reader_textの値に変更したい文字列を記述するとスクリーンリーダー用のテキストを変更できます。

 

ページネーションをthe_posts_paginationで表示

 

WordPressにページネーションをthe_posts_paginationで表示するときには、投稿一覧にしているトップページのindex.phpやカテゴリーの記事一覧にしているcategry.phpにthe_posts_pagination()を記述します。

 

the_posts_pagination(
    array(
        'mid_size' => 2,
        'prev_text' => '次へ',
        'next_text' => '前へ',
        )
    );

 

WordPressでの一覧形式の記事はループ処理をして表示するかと思うので、ループ処理が終わった下あたりに<?php the_posts_pagination(); ?>を記述、括弧内にarray()を記述してパラメータでページネーションを設定して表示させます。

functions.phpでthe_posts_paginationのパラメータをセットしておき、ページネーションを任意の関数で呼び出して表示しても良いかと思います。

 

function original_pagenation(){

    the_posts_pagination(
        array(
            'mid_size' => 2,
            'prev_text' => '次へ',
            'next_text' => '前へ',
        )
    );
}

 

ページネーションを使用するWordPressテーマのfunctions.phpにユーザー定義関数を作成して、WordPress関数のthe_posts_pagination()にパラメータをセットしておくと、作成した関数名だけでページネーションをテンプレートに出力して表示できます。

例えば上記のPHPコードをfunctions.phpに記述した場合のページネーションの表示方法は以下のようにして表示させます。

 

<?php original_pagenation(); ?>

 

original_pagenation()をPHPの開始タグ、終了タグで囲みWordPressテーマのindex.phpやcategry.phpに記述するとページネーションをthe_posts_paginationで表示することができます。

 

スクリーンリーダー用テキストの表示をしない

 

WordPressのthe_posts-pagination()関数でページネーションを表示すると、ページ送りに使用する番号と前後のリンクの上にスクリーンリーダー用テキストがh2タグで自動で出力されます。

 

 

the_posts_paginationで表示するページネーションでスクリーンリーダー用のテキストを表示しないようにしたいと思うかもしれません。

 

function no_screen_reader_text($template){
    $template = '
        <nav class="navigation %1$s" role="navigation">
            <div class="nav-links">%3$s</div>
        </nav>';

        return $template;
    }
add_action( 'navigation_markup_template', 'no_screen_reader_text' );

 

そんなときには上記のPHPコードをfunctions.phpに記述します。

Advertisement

素直に言います。詳しいことまでは分かりません。

分かることと言えば、the_posts_pagination()で表示するaタグのリンク集団をラッピングしているHTML(navタグとdivタグ)を文字列として$template変数に代入したものを、関数の引数にしてnavigation_markup_templateにフックすることで、スクリーンリーダー用のテキストをマークアップしてるh2要素をフィルタリングしている。

 

ということをしてページネーションのスクリーンリーダー用テキストを表示しないようにできます。

 

また、navのクラスには%1$sが必要で、%1$sを書かなかった場合にはnavタグにクラス付けされている「pagination」クラスが付与されません。

divのテキストには%3$sが必要です。%3$sを記述しないとページネーションのリンクの配置が特定できなくなるようで、the_posts_pagination()でページネーションを表示させても表示されなくなってしまいます。

 

<nav class="navigation pagination" role="navigation">
    <div class="nav-links">
        <a class="prev page-numbers" href="http://x.local/">前へ</a>
        <a class="page-numbers" href="http://x.local/">1</a>
        <span aria-current="page" class="page-numbers current">2</span>
        <a class="page-numbers" href="http://x.local/page/3/">3</a>
        <a class="page-numbers" href="http://x.local/page/4/">4</a>
        <a class="page-numbers" href="http://x.local/page/5/">5</a>
        <span class="page-numbers dots">…</span>
        <a class="page-numbers" href="http://x.local/page/7/">7</a>
        <a class="next page-numbers" href="http://x.local/page/3/">次へ</a>
    </div>
</nav>

 

ラッピング要素をフィルタリングした結果、WordPressのthe_posts_pagination()関数でページネーションを表示しても、スクリーンリーダー用のテキストを表示するh2要素はソース上でも表示しなくなります。

 

WordPress使い方カテゴリの最新記事