📃

【Movable Type】PageButeプラグインを利用してページネーションを実装する

2025/01/05に公開

Web

frontend

Movable Type

tech

 概要PageButeプラグインを利用してページネーション（ページャー）を実装する方法について解説しています。
MTにおいては、カテゴリや月別、コンテンツタイプなど記事一覧を表示する際に、ページネーションを出力するための機能およびMTタグが用意されていません（タグリファレンスにあるページング一覧は、検索結果でのみ利用できます）

そのため、ページネーションの実装はPageButeプラグインを利用して行うのが一番簡単です。
PageButeプラグインを利用することにより、以下のことが可能となります。
記事一覧ページにおけるページネーションの実装
記事個別ページ内での分割表示
!PowerCMSでは独自にページネーション機能が用意されており、そちらの利用を推奨します。詳細は以下公式ブログの記事をご覧ください。
静的ページ分割(Pager機能)のページ送りナビゲーションをカスタマイズする
静的ページ分割機能のページ送りナビゲーションをカスタマイズする (実践編)
!シックス・アパート社が提供しているSaas型のMovable Type.netにおいては、ページ送り機能が実装されています。
ページ送り機能を追加
新機能「ページ送り」のご紹介

 記事一覧にページネーションを実装する以下、記事一覧でページネーションを実装するためのサンプルコードです。
<!-- MTEntries -->
<mt:PageContents count="10">
  <mt:Entries lastn="0">
    <mt:PageContentsHeader>
      <ul>
    </mt:PageContentsHeader>
        <li><a href="<$mt:EntryPermalink$>"><$mt:EntryDate format="%Y.%m.%d"$>  <$mt:EntryTitle$></a></li>
      <mt:PageContentsFooter>
      </ul>
    </mt:PageContentsFooter>
    <$mt:PageSeparator$>
  </mt:Entries>
</mt:PageContents>
<!-- MTPages -->
<mt:PageContents count="10">
  <mt:Pages lastn="0">
    <mt:PageContentsHeader>
      <ul>
    </mt:PageContentsHeader>
        <li><a href="<$mt:PagePermalink$>"><$mt:PageDate format="%Y.%m.%d"$>  <$mt:PageTitle$></a></li>
      <mt:PageContentsFooter>
      </ul>
    </mt:PageContentsFooter>
    <$mt:PageSeparator$>
  </mt:Pages>
</mt:PageContents>
<!-- MTContents / コンテンツタイプID:2、タイトルをテキストフィールドで設定 -->
<mt:PageContents count="10">
  <mt:Contents content_type="2">
    <mt:PageContentsHeader>
      <ul>
    </mt:PageContentsHeader>
        <li><a href="<$mt:ContentPermalink$>"><$mt:ContentDate format="%Y.%m.%d"$>  <mt:ContentField content_field="テキスト"><mt:ContentFieldValue></mt:ContentField></a></li>
      <mt:PageContentsFooter>
      </ul>
    </mt:PageContentsFooter>
    <$mt:PageSeparator$>
  </mt:Contents>
</mt:PageContents>
<!-- ページネーション（共通） -->
<mt:Pagination>
  <mt:PaginationHeader>
    <nav>
      <ol>
        <mt:IfPaginationPrev><li><a href="<$mt:PaginationPrev$>" rel="prev" class="prev">newer</a></li></mt:IfPaginationPrev>
      </mt:PaginationHeader>
      <mt:IfPaginationCurrent>
        <li><a class="current"><$mt:PaginationLink element="number"$></a></li>
      <mt:Else>
        <li><a href="<$mt:PaginationLink$>"><$mt:PaginationLink element="number"$></a></li>
      </mt:IfPaginationCurrent>
      <mt:PaginationFooter>
        <mt:IfPaginationNext><li><a href="<mt:PaginationNext$>" rel="next" class="next">older</a></li></mt:IfPaginationNext>
      </ol>
    </nav>
  </mt:PaginationFooter>
</mt:Pagination>

 サンプルコード解説
 記事一覧のページ分割記事一覧のページ分割の基本構造は以下です。
<!-- MTEntriesの場合 -->
<mt:PageContents count="N">
  <mt:Entries lastn="0">
    <!-- 出力（処理）内容 -->
    <$mt:PageSeparator$>
  </mt:Entries>
</mt:PageContents>

<!-- MTPagesの場合 -->
<mt:PageContents count="N">
  <mt:Pages lastn="0">
    <!-- 出力（処理）内容 -->
    <$mt:PageSeparator$>
  </mt:Pages>
</mt:PageContents>

<!-- MTContentsの場合 -->
<mt:PageContents count="N">
  <mt:Contents content_type="N">
    <!-- 出力（処理）内容 -->
    <$mt:PageSeparator$>
  </mt:Contents>
</mt:PageContents>
MTEntriesなどページ分割したい記事一覧を出力するブロックタグをMTPageContentsで囲います。countモディファイアの値が、1ページに表示される件数です。出力する記事の最大数は、記事一覧を出力するブロックタグのlastnモディファイア（MTContentsは指定する場合はlimitモディファイアを利用する / モディファイアの指定がなければ全件出力）で指定します。

MTPageSeparatorの記述がある位置で、ページ分割が実行されます。

 ページネーション出力手っ取り早くページネーションを出力したい場合は、MTPageListsのみで出力が可能です。以下のHTMLが出力されます。
<!-- MTML -->
<$mt:PageLists$>

<!-- 出力結果 -->
<span class="current_page">1</span>&nbsp;
<a href="ページリンクURL" class="link_page">2</a>&nbsp;
<a href="ページリンクURL" class="link_page">3</a>
より詳細に出力結果をカスタマイズしたい場合は、前述のサンプルコードにあるようにMTPaginationを利用します。

 とりあえず覚えておくといいタグとモディファイア以下、よく利用するタグとモディファイアのみ記載しています。

 記事一覧のページ分割MTPageContentsこのタグで囲んだ記事一覧を出力するブロックタグ（MTEntriesなど）をページ分割する。
count1ページに表示する記事の件数を指定する。

記事一覧全体の表示件数は、MTPageContentsで囲んだ記事一覧を出力するブロックタグ（MTEntriesなど）のモディファイアで指定する。
MTPageSeparator分割する位置を指定する。このタグを記述しないとページ分割されない。
MTPageContentsHeaderMTPageContentsで囲んだ中で、一番はじめのときだけ実行されるブロックタグ。ページ分割を行う際は、MTEntriesHeaderやMTContentsHeaderの代わりに利用することが多い。

MTPageSeparatorよりも前に記述する。
MTPageContentsFooterMTPageContentsで囲んだ中で、一番最後のときだけ実行されるブロックタグ。ページ分割を行う際は、MTEntriesFooterやMTContentsFooterの代わりに利用することが多い。

MTPageSeparatorよりも前に記述する。

 ページネーション出力MTPageListsプラグイン側で用意されているページネーションのセットを出力する。
<!-- MTML -->
<$mt:PageLists$>

<!-- 出力結果 -->
<span class="current_page">1</span>&nbsp;
<a href="ページリンクURL" class="link_page">2</a>&nbsp;
<a href="ページリンクURL" class="link_page">3</a>
いくつかモディファイアが用意されており出力結果をカスタマイズ可能ですが、以下のMTPaginationを利用したほうがより柔軟にカスタマイズできます。
MTPaginationMTPageListsの代わりに使用することで、ページネーションをより柔軟にカスタマイズするためのブロックタグ。
!以降に記載するタグとモディファイアは、MTPaginationで囲んだ中に記述することで動作します。
MTPaginationHeaderMTPaginationで囲んだ中で、一番はじめのときだけ実行されるブロックタグ。
PaginationFooterMTPaginationで囲んだ中で、一番最後のときだけ実行されるブロックタグ。
MTIfPaginationCurrent現在のページがカレントページの場合に実行されるブロックタグ。
MTIfPaginationPrevカレントページより前にページが存在する場合（1ページ目でない場合）に実行されるブロックタグ。
MTIfPaginationNextカレントページより後にページが存在する場合（最終ページ目でない場合）に実行されるブロックタグ。
MTPaginationLinkページリンクのURLを出力（処理）する。
elementこのモディファイアを指定することで、以下の値を取り出すことができる。

number：出力されるページリンクのうち、「番号」を出力（処理）する。

base：出力されるページリンクのうち、番号と拡張子を除いた「ページリンク」を出力（処理）する。

suffix：出力されるページリンクのうち、「拡張子」を出力（処理）する。
それぞれの値の処理は以下になります。
<!-- デフォルトの出力（ページリンクURLのみ記載） -->
- 1ページ目：http://localhost/pager/pager.html
- 2ページ目：http://localhost/pager/pager_2.html
- 3ページ目：http://localhost/pager/pager_3.html

<!-- element="number"を指定した出力結果 -->
- 1ページ目：1
- 2ページ目：2
- 3ページ目：3

<!-- element="base"を指定した出力結果 -->
- 1ページ目：http://localhost/pager/pager
- 2ページ目：http://localhost/pager/pager
- 3ページ目：http://localhost/pager/pager

<!-- element="suffix"を指定した出力結果 -->
- 1ページ目：.html
- 2ページ目：.html
- 3ページ目：.html
MTPaginationPrevカレントページから見て前のページリンクのURLを出力する。
elementこのモディファイアを指定することで、以下の値を取り出すことができる。

それぞれの値の処理は前述のMTPaginationLinkの項目を参照。

number：出力されるページリンクのうち、「番号」のみを出力（処理）する。

base：出力されるページリンクのうち、「ファイル名」のみを出力（処理）する。

suffix：出力されるページリンクのうち、「拡張子」のみを出力（処理）する。
MTPaginationNextカレントページから見て次のページリンクのURLを出力する。
elementこのモディファイアを指定することで、以下の値を取り出すことができる。

それぞれの値の処理は前述のMTPaginationLinkの項目を参照。

number：出力されるページリンクのうち、「番号」のみを出力（処理）する。

base：出力されるページリンクのうち、「ファイル名」のみを出力（処理）する。

suffix：出力されるページリンクのうち、「拡張子」のみを出力（処理）する。

 記事個別ページにページネーションを実装する以下、記事個別ページでページネーションを実装するためのサンプルコードです。

記事アーカイブのサンプルですが、ウェブページアーカイブやコンテンツタイプアーカイブも大枠は同じです。
<!-- MTML -->
<mt:PageContents count="1">
  <$mt:EntryBody mteval="1"$>
  <$mt:PageSeparator$>
</mt:PageContents>

<!-- 記事作成時 -->
1ページ目に表示する内容
<$mt:PageSeparator$>
2ページ目に表示する内容
<$mt:PageSeparator$>
3ページ目に表示する内容
また、以下のように記述することも可能です。
<!-- MTML -->
<mt:PageContents count="1">
  <$mt:EntryBody$>
  <$mt:PageSeparator$>
</mt:PageContents>

<!-- 記事作成時 -->
1ページ目に表示する内容
<!-- Separator for PageBute -->
2ページ目に表示する内容
<!-- Separator for PageBute -->
3ページ目に表示する内容
ページネーション出力は、前項の「記事一覧にページネーションを実装する」と同様のため、以下「サンプルコード解説」の項目ともども割愛します。

 サンプルコード解説記事個別ページでのページ分割の基本構造は以下です。
<mt:PageContents count="1">
  <!-- 出力（処理）内容 -->
  <$mt:PageSeparator$>
</mt:PageContents>
MTPageContentsには、必ずcount="1"モディファイアを付与します。これを付与しないと、ページ分割が行われません。

<!-- 出力（処理）内容 -->の部分には、MTEntryBodyなどページ分割する内容を出力するタグを挿入します。また、内容を出力するタグにはmteval="1"モディファイアを付与します。

MTPageSeparatorの記述がある位置で、ページ分割が実行されます。
なお、mtevalは「付与したタグの値に含まれるテンプレートタグを実行する」モディファイアです。
記事投稿画面では、ページ分割する内容を以下のように入力します。
1ページ目に表示する内容
<$mt:PageSeparator$>
2ページ目に表示する内容
<$mt:PageSeparator$>
3ページ目に表示する内容
<$mt:PageSeparator$>が挿入された箇所でページ分割が行われます。

（ここに含まれるMTPageSeparatorを実行するため、前述のページ分割する内容を出力するタグにmteval="1"モディファイアを付与しています）
なお、公式ドキュメントには含まれませんが、記事投稿画面で以下のように記述することも可能です。
1ページ目に表示する内容
<!-- Separator for PageBute -->
2ページ目に表示する内容
<!-- Separator for PageBute -->
3ページ目に表示する内容
<$mt:PageSeparator$>の代わりに、<!-- Separator for PageBute -->が挿入された箇所でページ分割が行われます。

ページ分割にこのコメントアウト形式を使用する場合は、mteval="1"モディファイアは不要です。

 記事個別ページのページ分割時の留意事項ページ分割する内容の入力に「リッチテキストエディタ」を使用している場合は、記事保存時や編集時に<や>がエスケープ処理されるため、ページ分割がうまくいきません。

（「HTML編集モードの切り替え」をして挿入するとうまくいきますが、次回編集保存時にエスケープ処理されてしまいます）

 公式リファレンスなどhttps://www.movabletype.jp/documentation/mt8/designers-guide/manage-templates/pagebute/
https://plugins.movabletype.jp/movable_type/pagebute.html
!PageButeプラグインはもともと式会社スカイアークが開発・配布されていました。2024年12月にシックス・アパート株式会社に譲渡されました。
Movable Type用プラグイン「PageBute」をスカイアーク社より譲受
ページ分割プラグインPageButeを譲受、シックス・アパートからPageBute 4.0.0の提供を開始

概要

記事一覧にページネーションを実装する

サンプルコード解説

記事一覧のページ分割

ページネーション出力

とりあえず覚えておくといいタグとモディファイア

記事一覧のページ分割

MTPageContents

count

MTPageSeparator

MTPageContentsHeader

MTPageContentsFooter

ページネーション出力

MTPageLists

MTPagination

MTPaginationHeader

PaginationFooter

MTIfPaginationCurrent

MTIfPaginationPrev

MTIfPaginationNext

MTPaginationLink

element

MTPaginationPrev

element

MTPaginationNext

element

記事個別ページにページネーションを実装する

サンプルコード解説

記事個別ページのページ分割時の留意事項

公式リファレンスなど

Discussion