baserCMS公式の、ページネーションのドキュメントが少ないので、私が把握していることをまとめます。
基本的な使い方
baserCMSでは「ブログ」のアーカイブページでページネーションが使用できます。
pagination関数が提供されています。
<?php $this->BcBaser->pagination(); ?>
引数と出力内容
pagination関数には「出力するHTML」を変更する第1引数$name
があり、テーマ側で何もしていなければ(後述)、受け付ける引数は3種類です。
CSSのみでカスタマイズするのであれば、ordered_listで良いかと思います。
default(または引数なし)
<?php $this->BcBaser->pagination('default'); ?>
<div class="pagination">
<div class="pagination-result">結果: 00~00 件 / 総件数: 99 件</div>
<div class="pagination-numbers">
<span><a href="/pathToBlog/index/page:1" rel="first">|<</a></span>
<span class="prev"><a href="/pathToBlog/index/page:2" rel="prev"><<</a></span>
<span><a href="/pathToBlog/index/page:1">1</a></span> | <span><a href="/pathToBlog/index/page:2">2</a></span> | <span class="current">3</span> | <span><a href="/pathToBlog/index/page:4">4</a></span> | <span><a href="/pathToBlog/index/page:5">5</a></span> | <span><a href="/pathToBlog/index/page:6">6</a></span> | <span><a href="/pathToBlog/index/page:7">7</a></span> | <span><a href="/pathToBlog/index/page:8">8</a></span> | <span><a href="/pathToBlog/index/page:9">9</a></span>
<span class="next"><a href="/pathToBlog/index/page:4" rel="next">>></a></span>
<span><a href="/pathToBlog/index/page:10" rel="last">>|</a></span>
</div>
</div>
simple
<?php $this->BcBaser->pagination('simple'); ?>
<div class="pagination">
<span class="prev"><a href="/pathToBlog/index/page:2" rel="prev">< 前へ</a></span>
<span>
<span class="number"><a href="/pathToBlog/index/page:1">1</a></span>
<span class="number"><a href="/pathToBlog/index/page:2">2</a></span>
<span class="current number">3</span>
<span class="number"><a href="/pathToBlog/index/page:4">4</a></span>
<span class="number"><a href="/pathToBlog/index/page:5">5</a></span>
<span class="number"><a href="/pathToBlog/index/page:6">6</a></span>
<span class="number"><a href="/pathToBlog/index/page:7">7</a></span>
<span class="number"><a href="/pathToBlog/index/page:8">8</a></span>
<span class="number"><a href="/pathToBlog/index/page:9">9</a></span>
</span>
<span class="next"><a href="/pathToBlog/index/page:4" rel="next">次へ ></a></span>
</div>
ordered_list
<?php $this->BcBaser->pagination('ordered_list'); ?>
<nav class="c-pagination" aria-label="">
<div class="c-pagination__prev">
<a href="/pathToBlog/index/page:2" class="prev" rel="prev">prev</a>
</div>
<div class="c-pagination__next">
<a href="/pathToBlog/index/page:4" class="next" rel="next">next</a>
</div>
<ol class="c-pagination__numbers">
<li class="c-pagination__number"><a href="/pathToBlog/index/page:1">1</a></li>
<li class="c-pagination__number"><a href="/pathToBlog/index/page:2">2</a></li>
<li class="current c-pagination__number"><a aria-current="page">3</a></li>
<li class="c-pagination__number"><a href="/pathToBlog/index/page:4">4</a></li>
<li class="c-pagination__number"><a href="/pathToBlog/index/page:5">5</a></li>
<li class="c-pagination__number"><a href="/pathToBlog/index/page:6">6</a></li>
<li class="c-pagination__number"><a href="/pathToBlog/index/page:7">7</a></li>
<li class="c-pagination__number"><a href="/pathToBlog/index/page:8">8</a></li>
<li class="c-pagination__number"><a href="/pathToBlog/index/page:9">9</a></li>
</ol>
</nav>
ページネーションのテンプレートの場所
それぞれのページネーションの処理は、baserCMSのコアパッケージ内の、以下のパスにあるテンプレートを参照しています。
- /lib/Baser/View/Elements/paginations/default.php
- /lib/Baser/View/Elements/paginations/ordered_list.php
- /lib/Baser/View/Elements/paginations/simple.php
baserCMSはコアテンプレートを、管理画面からブラウザで見ることもできます。
- /admin/theme_files/view/core/Elements/paginations/default.php
- /admin/theme_files/view/core/Elements/paginations/ordered_list.php
- /admin/theme_files/view/core/Elements/paginations/simple.php
HTMLを細かくカスタマイズする
コーディングされた静的HTMLをテーマ化したい場合は、以下の通り作業します。
独自の引数を渡す
pagination関数の引数を、上記とは違う値にします。ここではpager
にしました。
<?php $this->BcBaser->pagination('pager'); ?>
コアテンプレートを複製
前項のどれかのテンプレートをコピーし、自作のテーマ(ここではmyBaserTheme
)の以下のパスに設置します。
/theme/myBaserTheme/Elements/paginations/pager.php
引数をなしにして、テンプレートを以下のパスに設置しても同じ結果となります。この場合はbaserCMSのdefaultテンプレートを上書きします。
/theme/myBaserTheme/Elements/paginations/default.php
テンプレートをカスタマイズ
テンプレートのHTMLを修正します。細かいページネーションの定義はPaginatorクラスを使用します。
PaginatorはCakePHPを継承しています。よほどがっつりしたカスタマイズでない限り不要と思いますが、細かい引数や処理を知りたい場合は、baserCMSのコアパッケージの以下のパスから参照できます。
/lib/Cake/View/Helper/PaginatorHelper.php
TIPS
よくありそうな細かいカスタマイズを書いておきます。
現在ページのマークアップをa要素にする
baserCMS = CakePHPではページネーションの現在ページはspanでマークアップされますが、最近のCSSフレームワークはクラス付きのa要素であることが多いです。
a要素にする場合は、Paginatorのnumbersクラスメソッド(関数)の、tagオプションを空にしてspanを削除しつつ、currentTagオプションを指定します。以下のように書いておけばまず大丈夫です。
<?php echo $this->Paginator->numbers([
'tag' => false,
'separator' => '',
'currentTag' => 'a href="' . $this->BcBaser->getHere() . '" class="is-current"',
'modulus' => $modules,
]); ?>
前後リンクがない場合に何も表示しない
Paginatorの、hasPrev・hasNextクラスメソッドで判定できます。
<?php if( $this->Paginator->hasPrev() ) : ?>
<?php echo $this->Paginator->prev('< 前のページ', ['class' => 'prev']) ?>
<?php endif; ?>
前後リンクにアイコンフォントを使う
デフォルトでは、prev・nextクラスメソッドはラベルがエスケープされてしまうので、以下のように引数escapeを渡します。
<?php echo $this->Paginator->next(
'次のページ<i class="fas fa-chevron-right"></i>',
[
'class' => 'next',
'escape' => false,
]
); ?>
変数の値を渡す
ページネーションに現在のブログIDなどの変数の値を渡す場合は、以下のように第2引数を配列で指定します。この場合は変数hoge
の値としてhuga
が渡ります。
<?php $this->BcBaser->pagination( 'default', [ 'hoge' => 'huga' ] ); ?>
以上です。
baserCMSはCakePHPをベースに開発されているためか、公式のドキュメントが少ないです。もうちょっと充実させてほしいですが、よくわからないときはとりあえずCakeのコアやCookBook、有志のチートシートを読むと解決できるかもしれません。