Movable Typeでブログ記事やウェブページをページ分割する方法

Movable Typeでブログ記事やウェブページをページ分割する方法

Posted at November 8,2013 1:55 AM
Tag:[Customize, MovableType, PageBute, Paginate]

Movable Typeでブログ記事やウェブページをページ分割する方法を紹介します。

ブログ記事やウェブページをページ分割

1.はじめに

Movable Typeでは静的に出力したアーカイブページやブログ記事、ウェブページをページ分割する機能が用意されていません(ダイナミックパブリッシングやDynamic MTMLであれば可能)。

メインページやアーカイブページのページ分割については「Pagebuteプラグイン」でページ分割することが可能です。

PageBute プラグインによるページ分割

が、このプラグインでもブログ記事やウェブページのページ分割についてはサポートされていません。

ということで、ブログ記事やウェブページをページ分割する方法を紹介します。

2.プラグインのインストール

実は、ブログ記事やウェブページを分割する場合もPageButeプラグインの利用が可能です。

ただしちょっと細工が必要なため、プラグインがデフォルトでサポートしているという意味ではありません。

そういうわけで、PageButeプラグインのインストールから行います。

まず、下記のリンクからプラグインアーカイブ(2013年11月現在の最新バージョンは3.5.7 )をダウンロードし、任意のフォルダに保存してください。

静的ページ用ページ分割プラグイン:PageBute

プラグインアーカイブを展開し、中にあるPageBute.plをpluginsディレクトリにアップロードしてください。

ブログ管理画面より「システム」→「プラグイン」でプラグイン一覧を表示し、次のように「PageBute」が表示されればOKです。

プラグイン一覧

3.ブログ記事をページ分割する

MT管理画面でブログ記事アーカイブ(MT6以降は「記事アーカイブ」)テンプレートの編集画面を開き、以下の赤色部分を追加します。

テンプレートはMT6のものを使用していますが、設定位置は他のバージョン、他のテンプレートでも大体同じで、MTEntryBodyタグの前後を追加・修正します。

PageButeのバージョン3.5.7以降ではMTPageNextタグがMTPageAfterタグに変更されているので注意してください。

…前略…
<mt:If tag="EntryBody">
    <div class="asset-body">
<mt:PageContents count="1">
    <$mt:EntryBody mteval="1"$>
</mt:PageContents>
<div class="content-nav">
<mt:ifPageBefore>
    <span><$mt:PageBefore delim="&#65308;"$></span>
</mt:ifPageBefore>
<$mt:PageLists show_always="0"$>
<mt:ifPageAfter>
    <span><$mt:PageAfter delim="&#65310;"$></span>
</mt:ifPageAfter>
</div>
    </div>
</mt:If>
…後略…

設定内容は通常のアーカイブページのページ分割とそれほど変わりませんが、ポイントとしては以下の3点です。

  • MTEntryBodyタグに「mteval="1"」を追加
  • MTPageContentsタグのcountモディファイアは必ず「1」を設定
  • MTPageListsタグに「show_always="0"」を設定

そして分割したいブログ記事の本文に、次のようにMTPageSeparatorタグを埋め込みます。文末にも設定することを忘れないでください。

あいうえお
かきくけこ
<$mt:PageSeparator$>
さしすせそ
<$mt:PageSeparator$>
たちつてと
なにぬねの
<$mt:PageSeparator$>

設定イメージ(クリックで拡大)
設定イメージ

これで記事を保存すれば、MTPageSeparatorタグで区切った部分でページ分割されたブログ記事ページが出力されます。

1ページ目
1ページ目

2ページ目
2ページ目

3ページ目
3ページ目

ページナビゲーションのHTMLマークアップは自由に変更してください。

4.ウェブページをページ分割する

MT管理画面でウェブページアーカイブテンプレートの編集画面を開き、以下の赤色部分を追加します。

設定内容の説明は3項とほぼ同じなので割愛します。

…前略…
<mt:If tag="PageBody">
    <div class="asset-body">
<mt:PageContents count="1">
    <$mt:PageBody mteval="1"$>
</mt:PageContents>
<div class="content-nav">
<mt:ifPageBefore>
    <span><$mt:PageBefore delim="&#65308;"$></span>
</mt:ifPageBefore>
<$mt:PageLists show_always="0"$>
<mt:ifPageAfter>
    <span><$mt:PageAfter delim="&#65310;"$></span>
</mt:ifPageAfter>
</div>
    </div>
</mt:If>
…後略…

そして分割したいウェブページの本文に、次のようにMTPageSeparatorタグを埋め込みます。文末にも設定することを忘れないでください。

AAA
BBB
<$mt:PageSeparator$>
CCC
DDD
<$mt:PageSeparator$>
EEE
FFF
GGG
<$mt:PageSeparator$>

設定イメージ(クリックで拡大)
設定イメージ

これで記事を保存すれば、MTPageSeparatorタグで区切った部分でページ分割されたウェブページページが出力されます。

1ページ目
1ページ目

2ページ目
2ページ目

3ページ目
3ページ目

ページナビゲーションのHTMLマークアップは自由に変更してください。

5.リッチテキストで利用する場合

まずNGになるパターンです。

リッチテキストの状態のまま、MTPageSeparatorタグを記述すると、

(クリックで拡大)
MTPageSeparatorタグを記述

HTMLではこのように実体参照されて「&lt;$mt:PageSeparator$&gt;」となってしまい、ページ分割が正常に動作しません。

(クリックで拡大)
実体参照

また、「<$mt:PageSeparator$>」と書くと、HTML編集モードに切り替えたときにHTMLタグと認識されず誤って実体参照されてしまうようです。

ということで、リッチテキストモードでページ分割を行う場合、次の手順で作業を行ってください。

ここではTinyMCEをサンプルに使います。

まず、リッチテキストで入力したあと、HTML編集モードのアイコンをクリックして、HTML編集モードにします。

(クリックで拡大)
HTML編集モード

ページ分割を行いたい箇所に以下のフォーマットでMTPageSeparatorタグを記述します。

<mtpageseparator></mtpageseparator>

設定イメージ(クリックで拡大)

テンプレートタグを埋め込んだあと、リッチテキストモードに戻せば完了です。

(クリックで拡大)
リッチテキストモード

リッチテキストモードに戻したあと、文末に余分な改行が含まれるように見えるかもしれませんが削除しないでください。

6.その他

本カスタマイズでは、MTEntryBodyタグやMTPageBodyタグにmtevalモディファイアを設定するため、本文に記述したMTテンプレートタグが評価されます。

たとえば、本文にMTPageSeparatorタグ以外のテンプレートタグ(たとえばMTEntryTitleタグなど)を誤って記述すると、評価されて記事タイトルが出力されるので注意してください。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)