【WordPress】the_posts_pagination(); で表示される「投稿ナビゲーション」を消す方法
ワードプレスのテンプレートタグに
the_posts_pagination();
というものがあります。
これ一つでページネーションを実装出来る大変ありがたいタグなのですが、最大の欠点が
「投稿ナビゲーション」
という見出しが勝手に付いてくる事です。
僕は最初どこにこの見出しが書き込まれているのかテーマ内のありとあらゆるファイル内を探しました。
結果はどこにも書いていませんでした。
当たり前ですね、the_posts_pagination();が勝手に書き出しているんです。
この見出しを使ってる人皆無ですよね?
なぜこんな仕様にしたのか分かりませんがハッキリ言って無駄なので消し方を紹介します。
CSSのdisply:noneで消す
the_posts_pagination();が書き出すHTML
書き出されるHTMLはこちら
<nav class="navigation post-navigation" role="navigation" aria-label="投稿">
<h2 class="screen-reader-text">投稿ナビゲーション</h2>
<div class="nav-links">
<div class="nav-previous"><a href="***" rel="prev"><span class="nav-subtitle">Previous:</span> <span class="nav-title">前の記事</span></a></div>
<div class="nav-next"><a href="***" rel="next"><span class="nav-subtitle">Next:</span> <span class="nav-title">次の記事</span></a></div>
</div>
</nav>
上記HTMLのh2が不要な見出しの部分です。
なので、このh2に設定されているscreen-reader-text
をdisply:none
で消してやるだけでOKです。
PreviousやNextもいらない場合はnav-subtitle
も一緒に非表示します。
擬似要素で矢印やアイコンを入れてもいいですね。
文字列置換でHTMLを書き換える
文字列置換というやり方で書き出されるHTMLを書き換える方法です。
<?php get_the_posts_pagination(); ?>
を下記のように修正します。
<?php
$paginationhtml = get_the_posts_pagination();
echo preg_replace('/\<h2 class=\"screen-reader-text\"\>(.*?)\<\/h2\>/ui', '', $paginationhtml);
?>
これで不要なh2が取り除かれます。
消すのではなく、変更する
「投稿ナビゲーション」を消すのではなく、違う文言に変更することも可能です。
コードは以下ですが、「前の記事」「前へ」等のページ送りの文字も変更できます。
the_posts_navigation(
array(
'prev_text' => '< 前の記事',
'next_text' => '次の記事 >',
'screen_reader_text' => 'Navigation',
)
);
違う方法でページネーションを実装する
ページネーションは他にも実装する方法はあります。
以前紹介した方法は独自関数なので少し長いですが、カスタマイズしやすいです。
functions.phpを編集しますがコピペでいけます。