ページ分割の装飾

分割を行う場合のタグ

<!--nextpage-->

利用するテンプレートタグ

<div class="pagesprit">
    <?php wp_link_pages( 'before=<div class="page-numbers">&after=</div>&next_or_number=number&pagelink=<span class="numbers">%</span>' ); ?>
</div>

装飾するためのSCSS

@charset "utf-8";

.pagesprit {
    color: #000000;
    background:white;
    margin: 1em auto;
    line-height:2em;
    text-align:center;
}
.page-numbers{
  .numbers{
    display: inline-block;
    padding: 5px 20px;
    font-size: rem-calc(12);
    border: 1px solid $iron;
  }
  a {
    .numbers{
      background-color: $vapor;
      border: none;
      &:hover {
        background-color: #000;
        color: #fff;
      }
    }
  }
}
投稿日:
カテゴリー: WordPress