123456
111
222
333
444
555
666
このサンプルは、数字をクリックすると、赤い3桁の数字を表示するだけのサンプルですが、応用するとWordPressのアーカイブ等のページングなども作ることが出来ます
CSS ページネーションCSSでページングするメリットは、WordPressがページングに使用するクエリ―文字列の制約を受けない点です。サンプルは、get_posts()関数で取得したデータを整形しただけのものですが、wp-json や ajax等と組み合わせることで、これまでちょっと難しかった。ページ内での複数ページネーション等が簡単にできるかもしれません。
タブパネルなども、CSSだけで簡単に作成できます。(このサンプルでは、リンクなどを置いた場合クリックできません、CSSページネーションのCSSを参照してみてください）
サンプルはデータ属性や tabindexを指定する事で、CSSだけのページネーションを作り出していますが、クラスやボタン要素でも同様の機能は実現できると思います。
HTML
<div class="test"> <span data-target="1" tabindex="-1">1</span><span data-target="2" tabindex="-1">2</span><span data-target="3" tabindex="-1">3</span><span data-target="4" tabindex="-1">4</span><span data-target="5" tabindex="-1">5</span><span data-target="6" tabindex="-1">6</span> <div data-contents> <div data-content="1" class="content">111</div> <div data-content="2" class="content">222</div> <div data-content="3" class="content">333</div> <div data-content="4" class="content">444</div> <div data-content="5" class="content">555</div> <div data-content="6" class="content">666</div> </div>
CSS
span[data-target]{
padding:1em;
border:1px solid #ccc;
margin-right:5px;
display:inline-block;
}
span[data-target]:focus{
background:#e67e22;
color:#fff;
}
span[data-target="1"]:focus ~ div[data-contents] > div[data-content="1"]{
visibility:visible;
color:red;
}
span[data-target="2"]:focus ~ div[data-contents] > div[data-content="2"]{
visibility:visible;
color:red;
}
span[data-target="3"]:focus ~ div[data-contents] > div[data-content="3"]{
visibility:visible;
color:red;
}
span[data-target="4"]:focus ~ div[data-contents] > div[data-content="4"]{
visibility:visible;
color:red;
}
span[data-target="5"]:focus ~ div[data-contents] > div[data-content="5"]{
visibility:visible;
color:red;
}
span[data-target="6"]:focus ~ div[data-contents] > div[data-content="6"]{
visibility:visible;
color:red;
}
span[data-target="ja"]:focus{
background:green;
color:#fff;
}
div[data-contents] {
position:relative;
margin:40px 0 200px;
}
div[data-contents] div{
visibility:hidden;
position:absolute;
}
.test{
position:relative;
}