ページネーション(CSS描画アイコン)開発中
クラス名
bl_pagenation
マークアップ例
<nav class="navigation bl_pagenation" role="navigation" aria-label="投稿ページネーション"> <h2 class="screen-reader-text">投稿ページネーション</h2> <div class="nav-links"> <a class="prev page-numbers" href=""> <span class="el_arrow"></span> <span class="nav-prev-text">新しい<span class="nav-short">投稿</span></span> </a> <a class="page-numbers" href=""><span class="el_readerOnly">ページ </span>1</a> <a class="page-numbers" href=""><span class="el_readerOnly">ページ </span>2</a> <span class="page-numbers dots">…</span> <span aria-current="page" class="page-numbers current"><span class="el_readerOnly">ページ </span>22</span> <span class="page-numbers dots">…</span> <a class="page-numbers" href=""><span class="el_readerOnly">ページ </span>26</a> <a class="page-numbers" href=""><span class="el_readerOnly">ページ </span>27</a> <a class="next page-numbers" href=""> <span class="nav-next-text">古い<span class="nav-short">投稿</span></span> <span class="el_arrow"></span> </a> </div> </nav>
定義
機能
アーカイブが複数のページに分割される時、各ページへのリンクを提供。
基本的にWPの機能(the_posts_pagination関数)に準じる。
現在開いているページがわかるように。
次へ、前へをつける。
最初と最後の2ページを表示。
あしらい・振る舞い
ホバーエフェクト。
スマホでは文字サイズを小さく、間を詰めるなどしてなんとかおさめる(折り返さない仕様)
特記事項
コードはWPの仕様に準じる。
ファイルパス
assets/scss/block/pagenation
Change Log
- 開発開始:2021-12-23
- 最終更新:2023-02-10