タグ: Movable Type

トップページ > サイト作成 > CMS > Movable Type で複数ページ存在する場合にページ送りのリンクを表示する方法

Movable Type で複数ページ存在する場合にページ送りのリンクを表示する方法

[初回公開] 2021年06月25日

Movable Type で 1 ページあたりに表示するブログの記事数やウェブページのリンクが一定数以上になった場合にページ分割して切り替えるリンク（ページ送り）を表示する方法について紹介する。

1. ページ送りとは

ページ送りとは 1 つのページやコンテンツが複数に分割して掲載する場合は、検索結果など 1 ページあたりに表示する件数を超えた場合に表示しているページ位置と他のページに切り替えるためのリンクを表示する機能である。
ページャー、ページネーションとも呼ばれることがある。
ページ送りにはページ数を数値で表示する場合や、「次へ」「前へ」と前後の移動のみを行うものも該当する。

2. Movable Type のページ送りの初期状態

Movable Type のページ送りの初期状態は下図のように記事が一定数に達すると自動的にページ送りが表示されるようになっており、ページ数では無いが「新しい記事」と「過去の記事」の 2 つのリンクが表示される
今回はこの 2 つのリンクに加えてページ数と表示中のページは非リンクになるように行う。

3. Movable Type でページ送りを表示する方法

Movable Type でページ送りを表示する方法として、既にページ送りのテンプレートとして「デザイン -> テンプレート -> テンプレートモジュール『ページネーション』」が用意されているため、このテンプレートを流用する。

ページ数を表示するページ送りには MT タグの MTPagerBlock を利用し、記事の総ページ数だけ繰り返し処理を行う。
例えば、1 ページに表示する検索結果の件数を 10 件と設定したとき、35 件の記事数なら 10 件表示するページは 3 ページ、5 件表示するページは 1 ページの合計 4 ページに分割される。
既存のページネーションのテンプレートと組み合わすなら下記のようにする。

<mt:SetVarBlock name="pagination_navigation">
  <mt:If name="search_results">
    <mt:IfMoreResults>
      <li><a rel="prev" href="<$mt:NextLink encode_html="1"$>">過去の記事</a></li>
    </mt:IfMoreResults>

    <mt:PagerBlock>
      <mt:IfCurrentPage>
    <$mt:Var name="__value__"$>
      <mt:Else>
    <a href="<$mt:PagerLink$>"><$mt:Var name="__value__"$></a>
      </mt:IfCurrentPage>
    <mt:Unless name="__last__"> </mt:Unless>
    </mt:PagerBlock>

    <mt:IfPreviousResults>
      <li><a rel="next" href="<$mt:PreviousLink encode_html="1"$>">新しい記事</a></li>
    </mt:IfPreviousResults>

  <mt:Else>

    <mt:If name="archive_template">
      <$mt:ArchiveCount setvar="total_entries"$>
    <mt:Else>
      <$mt:BlogEntryCount setvar="total_entries"$>
    </mt:If>

    <mt:If name="total_entries" gt="$entries_per_page">
      <li><a rel="prev" href="<$mt:Var name="search_link"$>2">過去の記事</a></li>
    </mt:If>
  </mt:If>
</mt:SetVarBlock>

<mt:If name="pagination_navigation">
<$mt:Var name="pagination_navigation" strip_linefeeds="1" trim="1" setvar="pagination_navigation"$>
<nav class="pagination">
  <ul>
<$mt:Var name="pagination_navigation"$>
  </ul>
</nav>
</mt:If>

テンプレートモジュール『ページネーション』の編集した後は保存して再構築し、ページ送りがあるページを確認すると下図のようにページ送りが表示されるのがわかる。

ページ送りの数値の装飾を行いたい場合は上記ソースの「mt:Var name="__value__"」の箇所に手を加えれば見た目を変更することができる。

関連記事