WordPress4.1から追加された関数を使うと、プラグイン無しでページ送りボタンの表示といったページネーション処理が簡単にできるようになりました。

ただ、この関数を呼び出すと「投稿ナビゲーション」と大きく表示されてしまう点がデザイン的に残念なところ。CSSでdisplay:noneと非表示にする方法を使っているWordPressテーマやサイトが多いのですが、根本から非表示にする方法をご紹介します。

the_posts_pagination関数の基本の表示と改善点

上の画像は、the_posts_pagination関数を引数なしで呼び出して表示される内容です。「投稿ナビゲーション」の見出しが無駄に大きな存在感ですよね。

この関数の使い方は、ページ送り機能を表示させたいところで、the_posts_pagination関数を次のように呼び出します。

<?php get_the_posts_pagination(); ?>

そうすると、次のようなHTMLが出力されます。

<nav class="navigation pagination" role="navigation">
 <h2 class="screen-reader-text">投稿ナビゲーション</h2>
 <div class="nav-links">
 <span class="page-numbers current">1</span>
 <a class="page-numbers" href="https://kimoba.com/page/2/">2</a>
 <span class="page-numbers dots">…</span>
 <a class="page-numbers" href="https://kimoba.com/page/8/">8</a>
 <a class="next page-numbers" href="https://kimoba.com/page/2/">次へ</a>
 </div>
</nav>

残念ながら、the_posts_pagination関数には、投稿ナビゲーション部分をを非表示にするパラメーターなどの設定は用意されていません。デザイン上も操作上も不必要なので、多くのWordPressテーマがCSSでむりやり非表示にしている状態です。display:noneにしたり、高さと幅と0にしたり…

Googleで「投稿ナビゲーションを非表示にする方法」と検索してみても、CSSを使って表示されないようにする解決方法はすぐに見つかるのですが、ちょっとモヤモヤしませんか。どうせだったら、根本から必要のないコードを無くしてしまいたいですよね。

PHPの文字列置換関数（preg_replace）を使うと、<h2 class=”screen-reader-text”>投稿ナビゲーション</h2>を丸ごと出力されないように修正できますよ。

preg_replace関数で投稿ナビゲーション部分を削除する方法

phpのpreg_replace関数で投稿ナビゲーション部分を丸ごと削除するには、テーマのカスタマイズが必要なので、子テーマを用意しましょう。子テーマがあれば、自分好みに自由にテーマを修正できますし、テーマアップデートの影響も受けないので安心です。

まずは、子テーマフォルダに、親テーマフォルダからthe_posts_pagination関数が使われているファイルをコピーします。

サンプルでは、女性向けブログにぴったりのシンプルで高級感のあるAnissaテーマを使ってみました。機能は制限されていますが、公式テーマに無料版も公開されていますよ。

このAnissaテーマの場合、index.phpファイルとarchive.phpファイル内でthe_posts_pagination関数が使われています。Anissaテーマフォルダから、index.phpとarchive.phpの2つのファイルをコピーして、子テーマフォルダに保存しておきましょう。

まずは、子テーマにコピーしたindex.phpファイルをテキストエディターで開き、the_posts_navigation関数が使われている箇所を探します。

the_posts_navigation関数では、ページ番号リストのボタンが表示されずに「前の投稿／次の投稿」ボタンが表示されるだけです。このままでもいいのですが、記事数もページ数も多くなるブログでは、ページ送りボタンがあった方が便利なので、次のように上書きしちゃいましょう。コピペでOKです。

Before（修正前）　index.phpファイル

<?php  the_posts_navigation() ;?>

After（修正後）　index.phpファイル

 <?php  
    $paginationhtml = get_the_posts_pagination();
      echo preg_replace('/\<h2 class=\"screen-reader-text\"\>(.*?)\<\/h2\>/ui', '', $paginationhtml);
?>

Anissaテーマの場合、index.phpファイルは31行目を修正します。

次に、子テーマにコピーしたarchive.phpファイルをテキストエディターで開き、the_posts_pagination関数が使われている箇所を探し、修正後のコードに上書きします。

Before（修正前）　archive.phpファイル

 <?php  the_posts_pagination();?>

After（修正後）　archive.phpファイル

 <?php  
    $paginationhtml = get_the_posts_pagination();
      echo preg_replace('/\<h2 class=\"screen-reader-text\"\>(.*?)\<\/h2\>/ui', '', $paginationhtml);
?>

Anissaテーマの場合、archive.phpファイルは35行目を修正します。

これで、デカデカと表示されてしまう「投稿ナビゲーション」が表示されなくなります。

テーマカスタマイズをする前には、バックアップを忘れずにね！コードを間違えて真っ白画面になってもパニックにならずに落ち着いてもとに戻せば大丈夫ですよ。

今回サンプルで使ってみたAnissaテーマですが、シンプルでデザインが完成されているので、ちょっと手直しするだけで、他の女性ブロガーとかぶらないオリジナルデザインのブログが完成できそうです。

サンプルサイトまで作ってしまったので、今後もこのAnissaテーマのカスタマイズ記事をUPしていきたいと思います！