サイト制作ではパーツやレイアウトの装飾として、CSSのフレームワークはとても便利で重宝します。

個人的にありがたいのはページネーションのボタンの装飾。程よく丸みがあり、アクティブな時や次へなどの遷移に対する装飾も用意されているからよく利用してしまいます。

その為か、表用のフレームワークと管理画面用のフレームワークを分けて使うという贅沢なことをしてしまう場合があります。そうなるとページネーション用としてconfigディレクトリにテンプレートファイルを設置しhelperで読み込むという作業をすると便利だけど、1ファイルで1テンプレートだから、また別で用意するのもなんかちょっと面倒くさくなってしまいます。

なので、今回は管理画面側に専用のテンプレートをhelperに記述して適応させる方法をとってみました。

ここに残す内容利用するCSSフレームワークは「semantic ui」の場合。bootstrapではページネーション用のクラスが用意されているので吐き出すタグの親タグに一つ専用のクラスを当てればある程度適応してくれたりするけど、semanticは準備されておらず、基本はボタンの装飾クラスを充てます。

管理画面用のページネーションは例えば「admin」と言うprefixを設定し、そのAppControllerにhelperでテンプレート設定し、各controllerに継承させます。

semantic uiでは、親タグにui buttonsを充て、ページ遷移ボタンにはui buttonを充てます。

public $helpers = ['Paginator' => [
    'templates' => [
        'nextActive' => '<span class="ui button"><a rel="next" href="{{url}}">{{text}}</a></span>',
        'nextDisabled' => '',
        'prevActive' => '<span class="ui button"><a rel="prev" href="{{url}}">{{text}}</a></span>',
        'prevDisabled' => '',
        'number' => '<span class="ui button"><a href="{{url}}">{{text}}</a></span>',
        'current' => '<span class="ui button"><a>{{text}}</a></span>',
        'first' => '<span class="ui button"><a href="{{url}}">{{text}}</a></span>',
        'last' => '<span class="ui button"><a href="{{url}}">{{text}}</a></span>',
    ]]];

disabledには”で空を設定。何も設定しないとliタグで生成され、思ったような装飾にならないみたいです。