ページネーション(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

  1. 開発開始:2021-12-23
  2. 最終更新:2023-02-10