更新履歴 [2021年09月18日]「Illustrator で図形の塗と線の色を変更する方法」を更新。

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

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

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

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

1. ページ送りとは

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

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

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

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

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__"」の箇所に手を加えれば見た目を変更することができる。

関連記事