WordPress

ページャーの【前/次】ボタンを端のページでも表示したままにする方法

2022年3月18日

必要か必要じゃないかで言うとあまり必要ないのかもしれませんが、実際必要になった事例があったので、自分用の備忘録兼他にもやろうとしてる人が居た時の為の知識として書き記しておきます。

まず、基礎知識として記事一覧にページャー（ページネーション）を追加する際は

<?php the_posts_pagination(); ?>

と記述すればWordPress標準装備のオーソドックスなページャーが作れます。

しかし、このまま使用すると仕様上、先頭ページであれば【前のページ】、最後尾ページであれば【次のページ】のボタンが勝手に生成されなくなってしまいます。

実際普通に使うだけであれば特に困ったりする事は殆ど無いと思いますが、レイアウトを全く同じのままボタンをグレーアウトさせて「ここが先頭ページですよ！」と視覚的にユーザーに知らせたりするようなデザインで制作したい場合に少し困っていたので、どうすれば表示したままになるかを考えてみました。

<div class="pagination-unit">

<?php if (get_previous_posts_link()):?>
<?php previous_posts_link( '< PREVIOUS' ); ?>
<?php else: ?>
<?php echo'<span style="color: #999;">< PREVIOUS</span>'; ?>
<?php endif; ?>

<?php the_posts_pagination( array(
    'prev_next' => false
) ); ?>

<?php if (get_next_posts_link()):?>
<?php next_posts_link( 'NEXT >' ); ?>
<?php else: ?>
<?php echo'<span style="color: #999;">NEXT ></span>'; ?>
<?php endif; ?>

</div>

答えは…

ズバリ！「ある時はそのままで無い時は作れ！」です！

以下コードの解説

<?php previous_posts_link( '< PREVIOUS' ); ?>
<?php next_posts_link( 'NEXT >' ); ?>

このコードは「記事一覧ページに【前/次ページ】ボタンを生成する」コードです。

ただ、これ単体だと前述の「<?php the_posts_pagination() ?>」と同じように一番端のページには生成してくれないんですね。

まぁ実際「端っこだから別になくていいだろ」って感じなのでまぁ当たり前と言えば当たり前なのですが・・・。

「それはわかってんだよ！そのうえであえて表示したいっつってんだろ！」って話なわけで、それを解決する為に上記のコードにお供を少し付けてやります。

<?php if (get_previous_posts_link()):?>
<?php previous_posts_link( '< PREVIOUS' ); ?>
<?php else: ?>
<?php echo'<span style="color: #999;">< PREVIOUS</span>'; ?>
<?php endif; ?>

はい、一気に大所帯になりましたが、別段難しい事をしているわけではありません。

ifを使った一般的な条件分岐ってやつですね。

まず、1行目の「<?php if (get_previous_posts_link())?>」で前ページのリンク（飛び先のページ）があるかどうかを判断しています。

ある場合は2行目「<?php previous_posts_link( ‘表示したい文字列’ )?>」で【前ページ】ボタンを生成します。

それから、3行目の「<?php else: ?>」の後に前ページのリンクが無い場合の処理を書きます。

ここでは、ダミーの【前ページ】ボタンとして「<span>表示したい文字列</span>」と<span>タグでダミーボタンを生成しています。

最後に「<?php endif; ?>」で条件分岐文を閉じてやれば

「ある時は従来通りのボタンが、ない場合は見た目同じだけど機能はしないボタンが生成される。」

というふうな仕組みが完成する、といった感じです。

これをふまえて、【次ページ】ボタンにも同様の記述を加えてあげればOK！

最後に、もともと「<?php the_posts_pagination() ?>」では【前/次ページ】ボタンがデフォルトで生成する仕様になっている為、パラメーターをちょちょっといじって出ない仕様に変更してやります。

<?php the_posts_pagination( array(
    'prev_next' => false　//デフォルトではtrue
) ); ?>

あとは親要素にdisplay:flex;なりdisplay:gird;なり書いて、cssで見た目部分を調整してやれば

端のページに行っても消えない【前/次ページ】ボタン、完成でーす！

まぁ実際どこまで需要あるかとかはわかりませんが。

一応php側の追加コード無しで、jQuery使って

$(window).on('load',function(){
  var prevBtn = $('.pagination .nav-links').find('.prev');
  var nextBtn = $('.pagination .nav-links').find('.next');
  if(!(prevBtn.length)){
    $('.pagination-unit').prepend('<span style="color: #999;">< PREVIOUS</span>');
  }else if(!(nextBtn.length)){
    $('.pagination-unit').append('<span style="color: #999;">NEXT ></span>');
  }
});

とかでもいけると思うけど、わざわざ別で処理書くよりphpで完結させる方がスマートなのと、読み込んでから処理されるので若干チラつくかなと思ってphpで完結する方でやりました。

機能的にはどっちでも良さそうだけど。

それでは！