こんにちは
ワードプレスのテンプレート関数を使って
echo get_the_posts_pagination(array('mid_size' => 0,));
これでも多い部分は、CSSで非表示にすればいいです。
ご回答ありがとうございました。
バージョン4.1以降で使えるタグとして追加されたんですね。
なるほどと思い、使ってみました。
<?php
$args = array (
'prev_text' => '<',
'next_text' => '>',
'show_all' => false,
'mid_size' => 0,
);
?>
<div class="pagination">
<?php the_posts_pagination( $args ); ?>
</div>
20ページ中の18ページ目ということで下記のような出力は出来ました。
< 1 … 18 … 20 >
しかしできれば、下記のような状態に持って行きたい。
< 18 / 20 >
「1」と「…」は不要、現在のページとページの合計の数字をスラッシュで区切りたい。
と思って、あれこれやってみたのですがかなわず。
検索かけても情報が皆無に等しいことに驚きました。
なので希望の表示はあきらめようかと思うのですが、
もし何かご存じの方がいらっしゃればご教授いただければ幸いです。
多い部分は、CSS
実際にテストはしていませんが、
ドットの部分は、dots 現在のページは、current 等のCSSクラスが記述されていると思いますので、それらのクラスを使って display:none;等で非表示
/ 等は、.current:after等で指定してやれば可能だと思いますので、トライしてみてください
再度のご回答ありがとうございました。
一番最後のページだと「< 20 / 20」という表示でないとおかしくなるのですが、最後の数字は一つしか表示されていないため、この形式での表示が不可能ということが分かりました。それに「page-numbers」というクラス名が全てに入るため、細かな操作にも無理があるようなので、CSSでの操作は難しいなと思いました。
ひとまず今回はあきらめようと思います。
重ね重ね回答していただきありがとうござい巻いた。
ちなみに、下記のようなソースが出力されます。
<nav class="navigation pagination" role="navigation">
<h2 class="screen-reader-text">投稿ナビゲーション</h2>
<div class="nav-links"><a class="prev page-numbers" href="#"><</a>
<a class='page-numbers' href='#'>1</a>
<span class='page-numbers current'>2</span>
<span class="page-numbers dots">…</span>
<a class='page-numbers' href='#'>20</a>
<a class="next page-numbers" href="#">></a></div>
</nav>
ひとまず今回はあきらめようと思います。
一番最後のページだと「< 20 / 20」という表示でないとおかしくなるのですが、
確かに、最後のページは 20/20 にするのは困難ですね、
可能だと思いますので、トライしてみてください
なんて言ってしまったので、自分でもやってみました。
テーマ twentyfifteen line:44-50を以下のように変更
index.php
// Previous/next page navigation.
the_posts_pagination( array(
'prev_text' => __( '«', 'twentyfifteen' ),
'next_text' => __( '»', 'twentyfifteen' ),
'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>',
'mid_size' => 0,
) );
style.css
.nav-links .dots,
.nav-links a:nth-child(2){
display:none;
}
.nav-links .page-numbers{
padding:0;
}
.nav-links a:first-child,
.nav-links a:last-child,
.nav-links a:nth-last-child(2),
.nav-links .current{
display:inline;
}
.nav-links a:nth-last-child(2):before{
content:'/';
}
実際にやってみると、20/20にならなくても、そんなに違和感は感じないですけど、
もし、気が向いたらやってみてください。
お礼が遅くなってしまい申し訳ございません。
ご丁寧な回答、ありがとうございました。
まだ試せていないのですが、ソースを拝見して、
漠然とではありますが、これでうまくいくかも…
と思った次第です。
長々とおつきあいいただきまして、重ね重ねありがとうございました。
ひとまずこれで解決とさせていただきますね。