CrystalSnowman.com

あなたの時間節約につながる情報を提供します

WordPress プラグインを使わずに簡単にページネーション (ページング) を追加する方法

new pagination image

プラグインを使わずにページネーション (ページング、ページ送り) をブログに追加しました。WordPressの標準機能で簡単にできるの紹介します。サイトの使い勝手が良くなるのでお勧めです。

方法

2つ方法を紹介します。見た目の問題でこのブログでは2番目の方法を採用しました。後述しますが「投稿ナビゲーション」というタイトルを非表示にしたかったのです。

index.phpの修正

WordPressの記事一覧の下にページネーションを追加するのでindex.phpを修正します。
ページネーション追加にはWordPress4.1以降から使用できるthe_posts_pagination()を使用します。

3行目で「args」という配列型変数に値を設定し、the_posts_pagination()のパラメータとして渡します。

4行目のprev_textは新しい記事へのリンク文字列を指定します。左向きのアイコンと「NEXT」という文字を指定しました。

5行目のnext_textは古い記事のへのリンク文字列を指定します。右向きのアイコンと「PREV」という文字を指定しました。パラメータと文字が逆になっているので注意が必要です。

6行目のshow_allはページ数をすべて表示するか(true)、しないか(false)を指定します。

7行目のmid_sizeは現在のページ(current)の左右に表示するページ数を指定します。

これらの設定の詳しくは以下が参考になります。
WordPressにページネーションを入れる方法 | YOUNG FLAVOR



11行目で「$args」変数の内容を元にthe_posts_pagination( $args )でページネーションを出力します。

このようになります。

pagination image1

cssの設定

見た目を修正します。

このようになります。

pagination image

投稿ナビゲーション」というタイトルが邪魔です。
これはscreen_reader_textを設定しない場合に、デフォルトで表示されるh2見出しの文字列です。
htmlでは「<h2 class=”screen-reader-text”>投稿ナビゲーション</h2>」のように出力されます。
このh2見出し自体を無くしたいと思い調査しました。



以下のサイトを参考に、修正することにしました。
php – To remove screen_reader_text coming in h2 from the_posts_pagination – Stack Overflow

index.phpの再修正

the_posts_pagination()を使用せずにget_the_posts_pagination()を使用します。こちらはページネーションの内容をhtml形式の文字列にしてくれます。*ページ出力しません。
出力されたhtmlの文字列からh2見出しの文字列を空白に置換し、再出力します。

8行目のscreen_reader_textで空白に置換するダミーの文字列「A」を指定します。

13行目で「pNav」という変数にget_the_posts_pagination( $args )で出力されたhtmlの内容を代入します。

14行目でstr_replace()で「<h2 class=”screen-reader-text”>A</h2>」の記述を空白に変換し「pNav」変数に再代入します。

15行目で「pNav」変数の内容を出力します。

完成

狙い通りh2見出しがなくなりました。

new pagination image

htmlに出力されるとこうなります。

4行目の<nav class=”navigation pagination” role=”navigation”>の下のh2見出しが無くなっていることが分かります。

改訂版 (2015/06/25)

screen-reader-textクラスのh2見出しを非表示するシンプルな方法が見つかったので紹介します。
こちらのほうがソース記述量が少ないので処理が軽いと思います。

「the_posts_pagination()」を使用します。

「display: none;」を使用してh2見出しを非表示にします。

まとめ

the_posts_pagination()ではなく、get_the_posts_pagination()を使ってページネーションを追加しました。str_replace()と組み合わせることにより、邪魔な「投稿ナビゲーション」というタイトルを削除できました。簡単にできるのあなたもチャレンジしてみてはいかがでしょうか。


Top