archive.phpのページネーションのデザインを変えたい

やりたいこと

wordpressのarchive.phpにオリジナルデザインのページネーションを実装したい。

こういうの。↓

普通に番号付きでページネーションを出したり↓

「次へ」「前へ」などの文字を表示したり、
正規表現でのアイコンの出し方は色々ヒットしたのですが、
完全オリジナルデザインで実装するやり方にめちゃめちゃ苦戦したのでメモ。

ひとまずこれで解決

the_posts_navigationを使い、生成されたhtmlの疑似要素のcontent、
もしくはbackground-imageで画像（今回はSVG画像）を指定することで解決しました。

the_posts_navigationを使う

まずはページネーションを出したいところに以下の関数を書く。

  <?php the_posts_navigation(array(
    'prev_text' => '',//前ページリンクの表記（ここでは空文字）
    'next_text' => ''//次ページリンクの表記（ここでは空文字）
  )); ?>

それぞれ空文字にすることで、見た目上は何も表示されないが、以下のhtmlが出力される。

  <div class="nav-links">
    <div class="nav-previous">
     <a href="前ページへのリンク">
    </div>
    <div class="nav-next">
     <a href="次ページへのリンク">
    </div>
  </div>

それに対し、css(scss)を以下のように指定する。

.nav {
  //全体を整える
  &-links {
    position: relative;
    width: 100%;
   }

　　　//左側のポジション指定
  &-previous {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);

    // ○ のスタイリング
    & > a {
      position: relative;
      background-color: #b8b8b8;
      border: 1px solid #000000;
      border-radius: 50px;
      display: block;
      height: 34px;
      width: 34px;
  
　　　　　　　　　　//中の矢印 ←
      &::before {
        content: url('data:image/svg+xml;utf-8,<svg>...</svg>');//画像の指定
        display: block;
        width: 50%;
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
  
    }
  
 
  }

　　　　//右側のポジション指定
  &-next {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);

   // ○ のスタイリング
    & > a {
      position: relative;
      background-color: #ffffff;
      border: 1px solid #000000;
      border-radius: 50px;
      display: block;
      height: 34px;
      width: 34px;
  
　　　　　　　　　　//中の矢印 →
      &::before {
        content: url('data:image/svg+xml;utf-8,<svg>...</svg>');//画像の指定
        display: block;
        width: 50%;
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
  
    }
  
  }
}