ページネーションの「前へ」と「次へ」のliの幅だけを変えたい

wordpressのアーカイブページにページネーションを実装したいのですが
「前へ」と「次へ」の幅の大きさを変える方法が分からずに困っています

「function.php」

function the_pagination() {
 global $wp_query;
 $bignum = 999999999;
 if ( $wp_query->max_num_pages <= 1 )
   return;
 echo '<nav class="pagination">';
 echo paginate_links( array(
   'base'         => str_replace( $bignum, '%#%', esc_url( get_pagenum_link($bignum) ) ),
   'format'       => '',
   'current'      => max( 1, get_query_var('paged') ),
   'total'        => $wp_query->max_num_pages,
   'prev_text'    => '前へ',
   'next_text'    => '次へ',
   'type'         => 'list',
   'end_size'     => 3,
   'mid_size'     => 3
 ) );
 echo '</nav>';
}

「生成されるコード」

<nav class="pagination">
<ul class="page-numbers">
<li><a class="prev page-numbers" href="http://mutou3.local/news/page/1/">前へ</a>
</li>
<li><a class="page-numbers" href="http://mutou3.local/news/page/1/">1</a>
</li>
<li><span aria-current="page" class="page-numbers current">2</span>
</li>
<li><a class="page-numbers" href="http://mutou3.local/news/page/3/">3</a>
</li>
<li><a class="next page-numbers" href="http://mutou3.local/news/page/3/">次へ</a>
</li>
</ul>

試したこと

・first-of-type等を使用し区別しようとしたがページが偏移するとliが変更されるため、「前へ、次へ」が表示されていないページだと数字のwidthも変更されてしまい失敗

・function.phpのページネーションのコードに何かしらを追加してclass名を付与できないか調べたが該当するページが見当たらなかった

・class名「prev、next」を使用しaタグの幅にliを合わせるやり方を調べたが見当たらなかった

・'prev_text' => '←　前へ',
'next_text' => '次へ　→',
と変更して文字数を変えたがliの幅に依存しているため折り返してしまった

・liの幅を指定しない状態を試したら見えなくなってしまい失敗

何を追加したら特定のliの幅を変化できるかわかる方ご回答よろしくおねがいします

SASS

  margin-top:4rem;

  .page-numbers {
    text-align: center;

    li {
      margin: 0 2px;
      padding: 0;
      display: inline-block;
      background: $lightblue3;
      width: 50px;
      height: 50px;
      text-align: center;
      position: relative;
      border-radius: 10px;

      .current {
      background: $blue;
      border-radius: 10px;
        
      }


      a {
        vertical-align: middle;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        display: table;
        color: #fff;
        text-decoration: none;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;

        span {
          display: table-cell;
          vertical-align: middle;

        }

        &:hover,
        &:active {
          color: #000;
          background: #ccf;
          border-color: #00f;
          border-radius: 10px;
        }


      }

      span {
        display: table-cell;
        vertical-align: middle;
        vertical-align: middle;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        display: table;
        color: #fff;
        text-decoration: none;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;

      }

      .prev {
    
      }

      .next {
        

      }


    }
  }
}

コード

hatena19

2020/11/05 11:32

現状のCSSを提示てもらえますか。うまくいってないものでもいいので。

KazuhiroHatano

2020/11/05 11:39

CSSのコードも出してください

kawausomaru

2020/11/05 12:27

すみませんコード追加しましたご確認のほどよろしくおねがいします

行動規範の内容に同意します

回答1件

ベストアンサー

現状のCSSが不明なので当てずっぽうで。

li には幅を設定しないで、li の子要素のa または　span に幅を設定すればいいでしょう。

css
1ul.page-numbers > li {
2  display: inline-block; /* 横並び */
3}
4
5ul.page-numbers > li > a.page-numbers,
6ul.page-numbers > li > span.page-numbers{
7  display: inline-block;
8  width: 30px;
9  text-align: center;
10  background-color: aqua;
11}
12
13ul.page-numbers > li > a.prev,
14ul.page-numbers > li > a.next {
15  width: 50px;
16}

CSSが提示されたので、それを元に改修。

liには幅を設定しないで子要素の.page-numbersに幅を設定
「前へ」.prev「次へ」.nextには上記と異なる幅を設定
liにdisplay: inline-block;を設定すれば横並びになるので、position: absolute;は不要。複雑になるだけ。
冗長な設定が多かったので、それを排除してシンプルに修正。

scss
1$lightblue3: lightblue;
2$blue: blue;
3
4.page-numbers {
5  text-align: center;
6
7  >li {
8    margin: 0 2px;
9    padding: 0;
10    display: inline-block;
11
12    >.page-numbers {
13      width: 50px;
14      height: 50px;
15      display: table-cell;
16      vertical-align: middle;
17      color: #fff;
18      background: $lightblue3;
19      border-radius: 10px;
20      text-decoration: none;
21      -webkit-transition: all 0.3s ease;
22      -moz-transition: all 0.3s ease;
23      -o-transition: all 0.3s ease;
24      transition: all 0.3s ease;
25      &:hover,
26      &:active {
27        color: #000;
28        background: #ccf;
29        border-color: #00f;
30      }
31      &.current {
32        color: #fff;
33        background: $blue;
34      }
35    }
36
37    >.prev,
38    >.next {
39      width: 80px;
40    }
41  }
42}