PowerCMS™

PowerCMS ブログ

ホーム > PowerCMS ブログ > 静的ページ分割(Pager機能)のページ送りナビゲーションをカスタマイズする

2014年05月27日

静的ページ分割(Pager機能)のページ送りナビゲーションをカスタマイズする

PowerCMSのPager機能でアーカイブの分割を行う場合、以下のようなテンプレートでページ送り部分のナビゲーションを表示させることができます。

<MTPager>
    <MTIfPagerHeader>
    <ul class="pager">
    <MTIfPagerPrev>
        <li class="prev"><a href="<MTPagerPrevLink>">前</a></li>
    <MTElse>
        <li class="prev"><span>前</span></li>
    </MTIfPagerPrev>
    </MTIfPagerHeader>
    <MTIfPagerCurrent>
        <li class="index"><span><$MTPagerCounter$></span></li>
    <MTElse>
        <li class="index"><a href="<MTPagerLink>"><$MTPagerCounter$></a></li>
    </MTIfPagerCurrent>
    <MTIfPagerFooter>
    <MTIfPagerNext>
        <li class="next"><a href="<MTPagerNextLink>">次</a></li>
    <MTElse>
        <li class="next"><span>次</span></li>
    </MTIfPagerNext>
    </ul>
    </MTIfPagerFooter>
</MTPager>

このテンプレートは以下のようなナビゲーションを出力します。

PowerCMSテーマデフォルトのページ送り表示

サポートにいただいた質問に、以下のようなカスタマイズの実現方法へのお問い合わせがありました。

  • 前、次の代わりに「最初」「最後」にしたい
  • ページ送りの数が多いときに、「...」のように省略表示したい

Pagerタグにはトータル件数を取得するタグ/変数が用意されていませんので、表示の前に一度ループを回します(このループ処理には殆ど負荷はかかりません)。

(追記: 2014年5月28日) トータル件数は MTPagerTotal タグで取得することができます。このタグを使って書き換えたテンプレートの例を追記しました。

以下、ページ送り数が16、最初の3ページと最後の3ページのリンクを表示し、その間を ... と表示するテンプレートの例です。

<MTPager>
<MTIgnore>
最初のループで件数、最初のリンク、最後のリンクを取得
</MTIgnore>
<MTIfPagerHeader>
     <MTPagerLink setvar="pager_first">
</MTIfPagerHeader>
<MTIfPagerFooter>
    <MTPagerLink setvar="pager_last">
    <mt:var name="__counter__" setvar="pager_count">
</MTIfPagerFooter>
</MTPager>
<MTIgnore>
pager_first <mt:var name="pager_first"> 最初のリンク /index.html
pager_last <mt:var name="pager_last"> 最後のリンク /index_16.html
pager_count <mt:var name="pager_count"> トータル件数 16
</MTIgnore>

<mt:if name="pager_count" gt="6">
<mt:setvar name="abbr_first" value="4">
<mt:var name="pager_count" value="3" op="-" setvar="abbr_last">
</mt:if>
<MTIgnore>
abbr_first <mt:var name="abbr_first"> 4(4件未満は出力)
abbr_last <mt:var name="abbr_last"> 13(14件以上は出力)
</MTIgnore>

<MTIgnore>以下、ページ送りナビの表示</MTIgnore>

<MTPager>
    <MTIfPagerHeader>
    <ul class="pager">
        <li class="prev"><a href="<mt:var name="pager_first">">最初</a></li>
    </MTIfPagerHeader>
    <MTIgnore>4回目のループ</MTIgnore>
    <mt:if name="__counter__" eq="$abbr_first">
    ...
    </mt:if>
    <MTIgnore>1〜3件</MTIgnore>
    <mt:if name="__counter__" lt="$abbr_first">
    <MTIfPagerCurrent>
        <li class="index"><span><$MTPagerCounter$></span></li>
    <MTElse>
    <li class="index"><a href="<MTPagerLink>"><$MTPagerCounter$></a></li>
    </MTIfPagerCurrent>
    </mt:if>
    <MTIgnore>14〜16件</MTIgnore>
    <mt:if name="__counter__" gt="$abbr_last">
    <MTIfPagerCurrent>
        <li class="index"><span><$MTPagerCounter$></span></li>
    <MTElse>
    <li class="index"><a href="<MTPagerLink>"><$MTPagerCounter$></a></li>
    </MTIfPagerCurrent>
    </mt:if>
    <MTIfPagerFooter>
        <li class="next"><a href="<mt:var name="pager_last">">最後</a></li>
    </ul>
    </MTIfPagerFooter>
</MTPager>

このテンプレートで、ページ送りナビゲーションの表示は下記のようになります。

最初 1 2 3 ... 14 15 16 最後

(追記: 2014年5月28日) 上記テンプレートを MTPagerTotal タグを使って書き換えたテンプレートの例

<MTPager>
    <MTIfPagerHeader>
    <MTPagerTotal setvar="pager_count">
    <mt:if name="pager_count" gt="6">
    <mt:setvar name="abbr_first" value="4">
    <mt:var name="pager_count" value="3" op="-" setvar="abbr_last">
    </mt:if>

    <ul class="pager">
        <li class="prev"><a href="<MTPagerLink>">最初</a></li>
    </MTIfPagerHeader>
    <mt:if name="__counter__" eq="$abbr_first">
    ...
    </mt:if>
    <mt:if name="__counter__" lt="$abbr_first">
    <MTIfPagerCurrent>
        <li class="index"><span><$MTPagerCounter$></span></li>
    <MTElse>
    <li class="index"><a href="<MTPagerLink>"><$MTPagerCounter$></a></li>
    </MTIfPagerCurrent>
    </mt:if>
    <mt:if name="__counter__" gt="$abbr_last">
    <MTIfPagerCurrent>
        <li class="index"><span><$MTPagerCounter$></span></li>
    <MTElse>
    <li class="index"><a href="<MTPagerLink>"><$MTPagerCounter$></a></li>
    </MTIfPagerCurrent>
    </mt:if>
    <MTIfPagerFooter>
        <li class="next"><a href="<MTPagerLink>">最後</a></li>
    </ul>
    </MTIfPagerFooter>
</MTPager>

ただ、これらのテンプレート例には:

  • 4から13ページ目へのリンク項目がなくなる。
  • 4から13ページ目であってもナビゲーションの表示項目が変わらず固定される。

......という問題があるので、最初のテンプレートを置き換えたり、そのまま貼り付けたりして使うことができるテンプレートではありません。あくまでもカスタマイズの参考としてください。

より実用的に、そのまま利用することができるページ送りナビゲーションのテンプレート例について、近日あらためて記事を書く予定です。どうぞ楽しみに。


カテゴリー
テンプレート作成Tips

Recent Entries