LoginSignup
1

More than 1 year has passed since last update.

baserCMSのページネーション(ページャー)のカスタマイズ

Last updated at Posted at 2022-01-14

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">|&lt;</a></span> 
        <span class="prev"><a href="/pathToBlog/index/page:2" rel="prev">&lt;&lt;</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">&gt;&gt;</a></span> 
        <span><a href="/pathToBlog/index/page:10" rel="last">&gt;|</a></span>
    </div>
</div>

simple

<?php $this->BcBaser->pagination('simple'); ?>
<div class="pagination">
    <span class="prev"><a href="/pathToBlog/index/page:2" rel="prev">&lt; 前へ</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">次へ &gt;</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、有志のチートシートを読むと解決できるかもしれません。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
1