ページリストブロックのページ送りのカスタマイズ

対象：バージョン 5.7.4 以降

ページ送りの基本

ページリストブロックのビューテンプレート（ concrete/blocks/page_list/view.php ）では、ページ送りは下記のように記述されています。

<?php if ($showPagination): ?>
    <?php echo $pagination;?>
<?php endif; ?>

出力されるHTMLは次のようになります。

<div class="ccm-pagination-wrapper">
    <ul class="pagination">
        <li class="prev disabled"><span>&larr;  前へ</span></li>
        <li class="active"><span>1 <span class="sr-only">（このページ）</span></span></li>
        <li><a href="/index.php/blog?ccm_paging_p=2">2</a></li>
        <li><a href="/index.php/blog?ccm_paging_p=3">3</a></li>
        <li><a href="/index.php/blog?ccm_paging_p=4">4</a></li>
        <li><a href="/index.php/blog?ccm_paging_p=5">5</a></li>
        <li><a href="/index.php/blog?ccm_paging_p=6">6</a></li>
        <li><a href="/index.php/blog?ccm_paging_p=7">7</a></li>
        <li class="disabled"><span>…</span></li>
        <li><a href="/index.php/blog?ccm_paging_p=10">10</a></li>
        <li class="next"><a href="/index.php/blog?ccm_paging_p=2">次へ &rarr;</a></li>
    </ul>
</div>

オプションの指定

下記のように記述することで、用意されたオプションを指定して、class名や文言を変更することができます。

<?php if ($showPagination): ?>
    <?php
    $pagination = $list->getPagination();
    if ($pagination->getTotalPages() > 1) {
        $options = array(
            'proximity'           => 2,
            'prev_message'        => '前のページへ',
            'next_message'        => '次のページへ',
            'dots_message'        => '...',
            'active_suffix'       => '現在のページ',
            'css_container_class' => 'my-container-class',
            'css_prev_class'      => 'my-prev-class',
            'css_next_class'      => 'my-next-class',
            'css_disabled_class'  => 'my-disabled-class',
            'css_dots_class'      => 'my-dots-class',
            'css_active_class'    => 'my-active-class'
        );
        echo $pagination->renderDefaultView($options);
    }
    ?>
<?php endif; ?>

上記の例で出力されるページ送りのHTMLは次のようになります。

<div class="ccm-pagination-wrapper">
    <ul class="my-container-class">
        <li class="my-prev-class my-disabled-class"><span>前のページへ</span></li>
        <li class="my-active-class"><span>1 現在のページ</span></li>
        <li><a href="/index.php/blog?ccm_paging_p=2">2</a></li>
        <li><a href="/index.php/blog?ccm_paging_p=3">3</a></li>
        <li><a href="/index.php/blog?ccm_paging_p=4">4</a></li>
        <li><a href="/index.php/blog?ccm_paging_p=5">5</a></li>
        <li class="my-dots-class"><span>...</span></li>
        <li><a href="/index.php/blog?ccm_paging_p=10">10</a></li>
        <li class="my-next-class"><a href="/index.php/blog?ccm_paging_p=2">次のページへ</a></li>
    </ul>
</div>

テンプレートの差し替え

さらに細かいカスタマイズが必要な場合は、コアのページネーションビューマネージャーをリバインドすることで、テンプレートごと差し替えることができます。

まず、application/bootstrap/app.php に下記の記述を追記します。

Core::bind('manager/view/pagination', function($app) {
    return new \Application\Src\Search\Pagination\View\Manager($app);
});

コアで使われているページャーマネージャーは concrete/src/Search/Pagination/View/Manager.php ですので、このファイルを参考にクラスを作成します。

上記のコードでリバインドしているページャーマネージャーの作例が、以下のコードです。ファイル位置は application/src/Search/Pagination/View/Manager.php です。

<?php
namespace Application\Src\Search\Pagination\View;

use Concrete\Core\Support\Manager as CoreManager;
use Concrete\Core\Search\Pagination\View\ConcreteBootstrap3View;

class Manager extends CoreManager
{

    protected function createApplicationDriver()
    {
        return new ConcretePagerfantaDefaultView();
    }

    protected function createDashboardDriver()
    {
        return new ConcreteBootstrap3View();
    }

}

上記のページャーマネージャーで、デフォルトの ConcreteBootstrap3View() の代わりに ConcretePagerfantaDefaultView() クラスをページャーテンプレートとして登録しています。

ConcretePagerfantaDefaultView() クラスのページ位置は、 application/src/Search/Pagination/View/ConcretePagerfantaDefaultView.php で、コードは下記のように作りました。

<?php
namespace Application\Src\Search\Pagination\View;

use \Pagerfanta\View\DefaultView;
use \Concrete\Core\Search\Pagination\View\ViewInterface;

class ConcretePagerfantaDefaultView extends DefaultView implements ViewInterface
{

    protected function createDefaultTemplate()
    {
        return new \Pagerfanta\View\Template\DefaultTemplate();
    }

    public function getArguments()
    {
        return array(
            'previous_message' => '前へ',
            'next_message' => '次へ'
        );
    }

}

ここでようやく、ページャーテンプレートの実体が出てきました。concrete5.7では、Pagerfanta というライブラリをページ送りの表示に使用していますが、 \Pagerfanta\View\Template\DefaultTemplate() はそのライブラリのデフォルトテンプレートです。

以上のコードが正しく設置できていれば、ページリストブロックのテンプレートに何も変更を加えなくても、ページ送りのテンプレートが下記の様なHTML出力に差し代わります。

<nav>
    <span class="disabled">前へ</span>
    <span class="current">1</span>
    <a href="/index.php/blog?ccm_paging_p=2">2</a>
    <a href="/index.php/blog?ccm_paging_p=3">3</a>
    <a href="/index.php/blog?ccm_paging_p=4">4</a>
    <a href="/index.php/blog?ccm_paging_p=5">5</a>
    <span class="dots">...</span>
    <a href="/index.php/blog?ccm_paging_p=10">10</a>
    <a href="/index.php/blog?ccm_paging_p=2">次へ</a>
</nav>

Pagerfanta ライブラリには様々なオプションがあり、テンプレートを新規に作成することもできます。詳細は Pagerfanta の GitHub ページをご覧ください。

Pagerfanta ライブラリを使用せず直接HTMLを指定する

Pagerfanta ライブラリは便利ですが、柔軟にHTMLを変更できず困る場合もあります。そのような場合は、テンプレートを使用せずにページ送りを表示することもできます。下記は、ページリストブロックのテンプレートで、直接HTMLを出力している例です。

<?php if ($showPagination): ?>
    <?php
    /** @var \Concrete\Core\Utility\Service\Url $urlHelper */
    $urlHelper = Core::make('helper/url');
    /** @var \Concrete\Core\Search\Pagination\Pagination $pagination */
    $pagination = $list->getPagination();
    if ($pagination->getTotalPages() > 1) {
        echo '<ul class="pager">';
        if ($pagination->hasPreviousPage()) {
            echo sprintf(
                '<li class="previous"><a href="%s">&leftarrow;</a>',
                $urlHelper->setVariable($list->getQueryPaginationPageParameter(), $pagination->getPreviousPage())
            );
        }
        echo sprintf('<li>%d / %d</li>', $pagination->getCurrentPage(), $pagination->getNbPages());
        if ($pagination->hasNextPage()) {
            echo sprintf(
                '<li class="next"><a href="%s">&rightarrow;</a>',
                $urlHelper->setVariable($list->getQueryPaginationPageParameter(), $pagination->getNextPage())
            );
        }
        echo '</ul>';
    }
    ?>
<?php endif; ?>