MovableType6でPagebuteを利用してページング処理を実装

どうもユーキです。
最近業務でMovableTypeやPowerCMSを使った案件をやることが多いので、
やれることや注意点など軽くまとめておこうと思います。

今回はページング処理です。

Pagebute

公式サイトに使い方は書いてあるので、こちらを元に使えばすんなりいけるはずです。

手順

  1. MTのバージョンに合わせてプラグインをダウンロード
  2. 解凍したファイルをpluginsに突っ込む
  3. MTのサイドバーのプラグインで有効になってるか確認、なってなければ有効にする

これでPagebute用のタグが使えるようになります。

実装例(バージョンは3.5.7です)

コンテンツ部分の実装

<ul>
  <li>
    <p class="link"><a href="<MTEntryURL abs2rel=">"></a></p>
  </li>
</ul>
<$MTPageSeparator$>

記事は未登録です

ページャーの実装

<ul class="linkList">
  <li style="list-style-type: none;">
    <ul class="linkList">
      <li><a class="link first" href="<$MTPaginationFirst$>">最初へ</a></li>
    </ul>
  </li>
</ul>
<ul class="linkList">
  <li style="list-style-type: none;">
    <ul class="linkList">
      <li><a class="link prev" href="<$MTPaginationPrev$>">前へ</a></li>
    </ul>
  </li>
</ul>
<ul class="linkList">
  <li style="list-style-type: none;">
    <ul class="linkList">
      <li><span class="link is-active"><$MTPaginationLink element="number"$></span></li>
    </ul>
  </li>
</ul>
<ul class="linkList">
  <li style="list-style-type: none;">
    <ul class="linkList">
      <li><a class="link" href="<$MTPaginationLink$>"><$MTPaginationLink element="number"$></a></li>
    </ul>
  </li>
</ul>
<ul class="linkList">
  <li style="list-style-type: none;">
    <ul class="linkList">
      <li><a class="link next" href="<$MTPaginationNext$>">次へ</a></li>
    </ul>
  </li>
</ul>
<ul class="linkList">
  <li style="list-style-type: none;">
    <ul class="linkList">
      <li><a class="link last" href="<$MTPaginationLast$>">最後へ</a></li>
    </ul>
  </li>
</ul>

こんな感じで実装したら、あとは再構築すると、勝手に分割されたページが作られます。
index_2.html,index_3.html…みたいな感じで。

About Me

プロフィール画像

ユーキと申します。北海道恵庭市という札幌と新千歳空港の間でフリーランスのWebエンジニアとして活動してます。

当サイトのブログでは、主にWeb制作全般、フリーランス周りの情報など色々なノウハウや知識を載せています。
その他日々気になったこと、思ったことも書いてます。

お仕事の相談など何かありましたら、お問い合わせかツイッターのDMからお気軽にご連絡くださいませ。

お問い合わせはこちら

ツイッターはこちら

ポートフォリオはこちら

Latest Posts

Popular Posts

TOP