Movable Typeの「最近のブログ記事」をページ分割する

Movable Typeの「最近のブログ記事」をページ分割する

Posted at March 23,2012 1:55 AM
Tag:[Customize, MovableType, PageBute]

Movable Typeの「最近のブログ記事」をページ分割するカスタマイズを紹介します。

このカスタマイズを行えば、サイドバーの「最近のブログ記事」でページ送りができるようになります。ページングはAjaxで行います。

完成イメージ
完成イメージ

以下にサンプルも用意しました。「最近のブログ記事」のページ送りを確認できます。

サンプル
完成イメージ

以下、「クラシックブログ」テーマをサンプルにしたカスタマイズを紹介します。

このカスタマイズにはPageButeプラグインが必要ですので、事前にインストールしてください。3.5.0(またはそれ以上)の利用をおすすめします。

このカスタマイズを応用すれば、たいていのリスト類はページ分割が行えると思います。

1.インデックステンプレートの作成

「最近のブログ記事」を出力するインデックステンプレートを作成します。テンプレートには以下の内容を貼り付けてください。テンプレート名は「最近のブログ記事」、出力ファイル名は「entries.html」としてください。保存後、再構築をしてください(再構築しないと後の手順でエラーになります)。

<div id="entries">
<div class="widget-recent-entries widget-archives widget">
  <h3 class="widget-header">最近のブログ記事</h3>
  <div class="widget-content">
    <div class="nav">
<mt:ifPageBefore>
  <$mt:PageBefore delim="&laquo; "$>
</mt:ifPageBefore>
  <$mt:PageLists show_always="0"$>
<mt:ifPageNext>
  <$mt:PageNext delim=" &raquo;"$>
</mt:ifPageNext>
    </div>
    <ul>
<mt:PageContents count="5" navi_count="3">
  <mt:Entries lastn="20">
      <li><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle encode_html="1"$></a></li>
  <$mt:PageSeparator$>
  </mt:Entries>
</mt:PageContents>
    </ul>
  </div>
</div>
</div>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
  $('.widget-content .nav a').click(function(){
    var url = $(this).attr('href');
    $.ajaxSetup({
        cache: false
    });
    $('#entries').load(url, function(text, status) {});
    return false;
  });
});
//]]>
</script>

お分かりと思いますが、ブログ記事一覧の中でPageButeのテンプレートタグを利用して、必要なページ分のファイルを出力しています。記事の表示件数などは以下の赤色部分で適宜調整してください。

<mt:PageContents count="5" navi_count="3">
  <mt:Entries lastn="20">

PageButeプラグインで出力するページナビゲーションではAjaxによるページングが行えないので、テンプレート後半のjQueryで制御し、「最近のブログ記事」部分のみコンテンツを入れ替えるようにしています。

jQueryをすでに利用している場合は上記テンプレートに含まれる以下の部分を削除してください。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

2.ウィジェットの作成

1項のインデックステンプレートで出力したファイルを読み込むウィジェットを作成します。「クラシックブログ」テーマを使っている場合は「最近のブログ記事」ウィジェットの内容を以下に変更してもかまいません。

<mt:SetVarBlock name="path"><mt:BlogSitePath>entries.html</mt:SetVarBlock>
<$mt:include file="$path"$>

3.CSSの追加

スタイルシートに以下の内容を追加します。

.widget-content .nav {
    text-align: center;
}

4.mt-congig.cgiの変更

MT5.13以降で本カスタマイズを利用する場合は、mt-config.cgiに環境変数AllowFileIncludeを追加してください。

AllowFileInclude 1

5.再構築

すべての設定が終わったら全体を再構築してください。

6.注意事項

2項のMTIncludeタグにidentifierモディファイアは利用できません。identifierモディファイアでインクルードすると、インクルードしたページ全体がページ分割対象になってしまいます。

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


コメント

はじめまして、いつも利用させていただいております。MT5でカスタムフィールドでフィルタリングしたリストをページ分割したページを作ろうとして、紆余曲折し、結局こちらの方法に落ち着きました。どうもありがとうございます。

ところでこちらで記載されているようにサイドバーに表示して使用する場合、ウェブサイトにインデックステンプレートを作成してグローバルウィジェットで傘下のブログのサイドバーに表示しようとしたのですが、<mt:SetVarBlock name="path"><mt:BlogSitePath>entries.html</mt:SetVarBlock>
<$mt:include file="$path"$>の点でエラーになってしまったようです。
<$mt:WebsitePath$>に書き換えるだけでもエラーだったのですが、どの点を修正すればよいのでしょうか?


またページ分割に関してなのですが、「Movable Typeのダイナミックパブリッシングでのページ分割ナビゲーションの不具合を解消する」でご教授されているblock.mtifmoreresults.phpの書き換えですが、試してみたところ不具合が治らなかったのですが、こちらはMT5.2だからでしょうか?それでは何卒よろしくお願い致します。

[1] Posted by https://me.yahoo.co.jp/a/frmi.31vYfN21LRKDB0lwkui6F.nwkc1#2f35a logo : December 28, 2012 4:05 AM
コメントする
greeting

*必須

*必須(非表示)


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

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

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

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