LoginSignup
1
1

More than 1 year has passed since last update.

@webbingstudio@github(Seiko Kuchida)

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
Sign upLogin
1
1