• 解決済 heppoko

    (@heppoko)


    このソースを使用させていただいてページ送りを表示しております。

    <?php function wp_pagination() {
      global $wp_query;
      $big = 99999999;
      $page_format = paginate_links( array(
        'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
        'format' => '?paged=%#%',
        'current' => max( 1, get_query_var('paged') ),
        'total' => $wp_query->max_num_pages,
        'type'  => 'array'
      ) );
      if( is_array($page_format) ) {
        $paged = ( get_query_var('paged') == 0 ) ? 1 : get_query_var('paged');
        echo '<div><ul>';
        echo '<li><span>'. $paged . ' / ' . $wp_query->max_num_pages .'</span></li>';
        foreach ( $page_format as $page ) {
            echo "<li>$page</li>";
        }
          echo '</ul></div>';
      }
      wp_reset_query();
    }
    ?>

    表示、動作共に問題はないのですが、スマフォで見た時に、ページ数が多いところだとボタンが多数表示されてしまって見づらい、押しにくい状態になってしまいます。

    全体のうちの何ページ目かと、前後へのボタンの3つだけを表示できないものか…

    < 1 / 123 >

    こんな感じにしたいのですが思うように行かず苦戦しております。
    ご教授いただければ幸いです。よろしくお願いいたします。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • こんにちは

    ワードプレスのテンプレート関数を使って

    echo get_the_posts_pagination(array('mid_size' => 0,));

    これでも多い部分は、CSSで非表示にすればいいです。

    トピック投稿者 heppoko

    (@heppoko)

    ご回答ありがとうございました。
    バージョン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等で指定してやれば可能だと思いますので、トライしてみてください

    トピック投稿者 heppoko

    (@heppoko)

    再度のご回答ありがとうございました。

    一番最後のページだと「< 20 / 20」という表示でないとおかしくなるのですが、最後の数字は一つしか表示されていないため、この形式での表示が不可能ということが分かりました。それに「page-numbers」というクラス名が全てに入るため、細かな操作にも無理があるようなので、CSSでの操作は難しいなと思いました。

    ひとまず今回はあきらめようと思います。
    重ね重ね回答していただきありがとうござい巻いた。

    トピック投稿者 heppoko

    (@heppoko)

    ちなみに、下記のようなソースが出力されます。

    <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">&hellip;</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'          => __( '&laquo;', 'twentyfifteen' ),
    				'next_text'          => __( '&raquo;', '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にならなくても、そんなに違和感は感じないですけど、

    もし、気が向いたらやってみてください。

    トピック投稿者 heppoko

    (@heppoko)

    お礼が遅くなってしまい申し訳ございません。
    ご丁寧な回答、ありがとうございました。
    まだ試せていないのですが、ソースを拝見して、
    漠然とではありますが、これでうまくいくかも…
    と思った次第です。

    長々とおつきあいいただきまして、重ね重ねありがとうございました。
    ひとまずこれで解決とさせていただきますね。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • トピック「paginate_linksでのページナビの表示をシンプルにしたい」には新たに返信することはできません。