Movable Type のページ分割によるナビゲーションの前後ページ表示を絞り込む
Movable Type の MTPaginate プラグインによるページ分割を行った際、ナビゲーションの前後ページの表示を絞り込む方法です。
どういうことかと言うと、デフォルトの設定では、分割されたページが下の画面のようにすべて表示されてしまうのですが、本エントリーのカスタマイズを行えば、(多分)直近の前後ページのみの表示に変更できる、というものです。

下は、カスタマイズを行った後のナビゲーションです。上の画面と同じ、5ページに分割されたサンプルで、1ページ目を表示している状態です(とりあえず前後1ページのナビゲーションを表示する設定にしています)。

2ページ目を表示している時のナビゲーションです。3ページ目のナビゲーションが現れました。

3ページ目を表示している時のナビゲーションです。4ページ目のナビゲーションが現れ、1ページの表示が消えます。

4ページ目を表示している時のナビゲーションです。5ページ目のナビゲーションが現れ、2ページの表示が消えました。

5ページ目を表示している時のナビゲーションです。3ページの表示が消えました。

以下、カスタマイズ方法です。
1.MTPaginate プラグインによるページ分割の設定
下記の記事を参考にして、MTPaginate プラグインを Movable Type に設定してください。
注:2項を実施する前に、必ずページ分割が正常に動作することを確認してください。すべてを一気に行うと、正常に動作しなかった場合の切り分けができなくなります。
2.プラグインファイルの修正
MTPaginate/lib/MTPaginate.pm を任意のエディタで開き、赤色部分(v1.28 では 498行~506行)を青色部分に置き換えます。
$format_title = " . sprintf(' title=\"$format_title\"', \$i)" if $format_title;
$res .=<<PHP;
for(\$i = $start; \$i <= $end; \$i++) {
if(\$i > $start)
echo '$separator';
if(\$i == \$paginate_current_page) {
echo sprintf("$format_current", \$i);
} else {
echo "<a href=\\\"\$paginate_self=\$i$anchor\\\"$target" $format_title . sprintf('>$format', \$i) . '</a>';
}
}
PHP
if ($format_all && $place_all eq 'after') {
下が置き換えた後のリストです。
$format_title = " . sprintf(' title=\"$format_title\"', \$i)" if $format_title;
$res .=<<PHP;
for (\$i = $start; \$i <= $end; \$i++) {
if (\$paginate_current_page == 'all') {
if(\$i > $start)
echo '$separator';
if(\$i == \$paginate_current_page) {
echo sprintf("$format_current", \$i);
} else {
echo "<a href=\\\"\$paginate_self=\$i$anchor\\\"$target" $format_title . sprintf('>$format', \$i) . '</a>';
}
} else {
if (\$i > $start) {
if (\$i == \$paginate_current_page && \$i != 1) {
echo '$separator';
} else if (\$i < \$paginate_current_page) {
if (\$paginate_current_page - \$i < $offset) {
echo '$separator';
}
} else {
if (\$i - \$paginate_current_page < ($offset+1)) {
echo '$separator';
}
}
}
if (\$i == \$paginate_current_page) {
echo sprintf("$format_current", \$i);
} else {
if(\$i < \$paginate_current_page) {
if(\$paginate_current_page - \$i < ($offset+1)) {
echo "<a href=\\\"\$paginate_self=\$i$anchor\\\"$target" $format_title . sprintf('>$format', \$i) . '</a>';
}
} else {
if(\$i - \$paginate_current_page < ($offset+1)) {
echo "<a href=\\\"\$paginate_self=\$i$anchor\\\"$target" $format_title . sprintf('>$format', \$i) . '</a>';
}
}
}
}
}
PHP
if ($format_all && $place_all eq 'after') {
追加した箇所の2行上に、さらに青色の行を1行追加してください。
$format_title = " . sprintf(' title=\"$format_title\"', \$i)" if $format_title;
my $offset = $args->{offset} || 2;
$res .=<<PHP;
for (\$i = $start; \$i <= $end; \$i++) {
if (\$paginate_current_page == 'all') {
if(\$i > $start)
echo '$separator';
if(\$i == \$paginate_current_page) {
echo sprintf("$format_current", \$i);
} else {
echo "<a href=\\\"\$paginate_self=\$i$anchor\\\"$target" $format_title . sprintf('>$format', \$i) . '</a>';
}
} else {
if (\$i > $start) {
if (\$i == \$paginate_current_page && \$i != 1) {
echo '$separator';
} else if (\$i < \$paginate_current_page) {
if (\$paginate_current_page - \$i < $offset) {
echo '$separator';
}
} else {
if (\$i - \$paginate_current_page < ($offset+1)) {
echo '$separator';
}
}
}
if (\$i == \$paginate_current_page) {
echo sprintf("$format_current", \$i);
} else {
if(\$i < \$paginate_current_page) {
if(\$paginate_current_page - \$i < ($offset+1)) {
echo "<a href=\\\"\$paginate_self=\$i$anchor\\\"$target" $format_title . sprintf('>$format', \$i) . '</a>';
}
} else {
if(\$i - \$paginate_current_page < ($offset+1)) {
echo "<a href=\\\"\$paginate_self=\$i$anchor\\\"$target" $format_title . sprintf('>$format', \$i) . '</a>';
}
}
}
}
}
PHP
if ($format_all && $place_all eq 'after') {
修正が終わったら保存し、元のディレクトリにアップロードして、ファイルを上書きしてください。
うまく動かないようでしたら、元のMTPaginateのプラグインアーカイブから同じファイルを取り出して、再度チャレンジしてください。
3.offset モディファイアの指定
テンプレートに記述している MTPaginateNavigator タグに offset モディファイアを与えれば、前後に表示するページ数を指定できます。
指定しない場合のデフォルト値は2になっているので、前後2ページを表示します。
<MTPaginateNavigator offset="3">
とすれば、表示ページの前後3ページのナビゲーションを表示します。
4.動作確認状況
このカスタマイズで確認している MTPaginateNavigator タグのオプションは、
<$MTPaginateNavigator offset="n" style="links" format_all="All pages" place_all="before" separator=" | ">
<$MTPaginateNavigator offset="n" style="links" format_all="All pages" place_all="after" separator=" | ">
の2種類のみです。これ以外のパターンは未確認ですので、予めご容赦ください。
アーカイブページのページ分割 for Movable Type 4.1
Movable Type 4.1 で、MTPaginate プラグインを用いたアーカイブページ(カテゴリーアーカイブ・月別アーカイブ等)のページ分割方法をご紹介します。
4.15でテンプレート構成が変わりそうなので、4.1(厳密には4.0~4.1)限定にしておきます。

このエントリーは「カテゴリーアーカイブと月別アーカイブのページ分割」を MT4.1 用に書き直したものです。
カスタマイズ手順には、PHP化の設定を含んでいます。PHP化の設定を行っていない場合は手順1~手順3を行った後、PHP化したメインページが正常に表示されることを確認してから、手順4以降のページ分割の設定を行ってください。
すでにPHP化が済んでいる場合は、手順5から開始してください。
1.ファイル・ディレクトリのパーミッションを変更
ファイルのパーミッションを変更するために、以下の作業を行ってください。
この作業を行うと、他のアーカイブページのファイルも同じパーミッションになるので、すべてのアーカイブのPHP化(拡張子を.phpにする)が必要です。
まず、mt-config.cgi を FTP ツールでダウンロードし、任意のエディタで開き、行末に以下の内容を追加してください。mt-config.cgi はアプリケーションディレクトリにあります。アプリケーションディレクトリとは、Movable Type をインストールしたディレクトリで、mt.cgi があるところです。
HTMLUmask 0072
DirUmask 0072
HTMLPerms 0777
修正後、mt-config.cgi を保存して、元のディレクトリにアップロードし、メインページを再構築してください。
この設定を行っておけば、出力されるメインページや他のHTMLファイルおよびディレクトリのパーミッションを常に705にします。パーミッションを 775 にする場合は、
HTMLUmask 0022
DirUmask 0022
HTMLPerms 0777
としてください。
2.拡張子の変更
ブログ管理画面の「設定」→「ブログの設定」→「公開」の一番下にある「アーカイブの拡張子」を html から php に変更して「変更を保存」をクリックします。

3.XML宣言の修正
ページを XHTML文書、例えば XHTML1.0 として適合させている場合、前項と同じ画面の「テンプレートの内容」の1行目、またはテンプレートモジュールの「ヘッダー」の1行目(またはどこか)に、
<?xml version="1.0" encoding="<$MTPublishCharset$>"?>
という XML 宣言が記述されているケースがあります(記述されていなければこの項目はスキップしてください)。
PHP化を行うと、サーバではこのXML宣言の行をPHPスクリプトとして誤認識してしまい、次のようなPHPエラー
Parse error: parse error, unexpected T_STRING in ~(省略)~index.php on line 1
となるか、500エラーが発生するか、真っ白なページが表示される可能性があります。
このような場合、前述のXML宣言を下記の内容に置き換えてください(ご利用になる際、リストに含まれる改行はすべて除去してください。)。
なお、他のアーカイブページ等も PHP 化されていることを前提にしています。
<MTUnless name="system_template">
<? php echo('
</MTUnless>
<?xml version="1.0" encoding="utf-8"?>
<MTUnless name="system_template">
'); ? >
</MTUnless>
よく分からない場合や、ページが表示されない場合は、このカスタマイズを行う代わりに、XML宣言自体を削除してください。
4.プラグインのダウンロード
MT Extensions より MTPaginate をダウンロード(ページ上の方にある「Download」をクリック)。ファイルは任意のフォルダ(デスクトップ等)に保存します。
5.プラグインのインストール
注:この情報はバージョン1.28のものです。
ダウンロードしたファイルを解凍し、その中の MTPaginate ディレクトリを下記のディレクトリ構成になるように plugins ディレクトリに丸ごとアップロードします。
plugins/MTPaginate/lib/MTPaginate.pm
plugins/MTPaginate/MTPaginate.pl
ブログ管理画面の「システム」→「プラグイン」で MTPaginate が表示されれば、プラグインのインストールは完了です。

6.ページ分割の設定
ブログ管理画面より、「デザイン」→「テンプレート」→「アーカイブテンプレート」→「ブログ記事リスト」を選択し、青色部分のページ分割用タグを設定します。デフォルトテンプレート/配布テンプレート共通です。
一見複雑にみえますが <MTEntries> の直前と </MTEntries> の前後に加えるだけです。
すべてのアーカイブにページ分割を設定する場合
:
<MTIf name="datebased_archive">
<MTPaginate>
<MTPaginateContent max_sections="5">
<MTEntries>
<$MTEntryTrackbackData$>
<$MTInclude module="ブログ記事の概要"$>
<$MTPaginateSectionBreak$>
</MTEntries>
</MTPaginateContent>
<MTPaginateIfMultiplePages>
<p class="paginate">
<MTPaginateIfPreviousPage_>
<a href="<$MTPaginatePreviousPageLink$>"><</a>
</MTPaginateIfPreviousPage_>
<$MTPaginateNavigator style="links" format_all="All pages" place_all="after" separator=" | ">
<MTPaginateIfNextPage_>
<a href="<$MTPaginateNextPageLink$>">></a>
</MTPaginateIfNextPage_>
</p>
</MTPaginateIfMultiplePages>
</MTPaginate>
<MTElse>
<MTPaginate>
<MTPaginateContent max_sections="5">
<MTEntries limit="auto">
<$MTEntryTrackbackData$>
<$MTInclude module="ブログ記事の概要"$>
<$MTPaginateSectionBreak$>
</MTEntries>
</MTPaginateContent>
<MTPaginateIfMultiplePages>
<p class="paginate">
<MTPaginateIfPreviousPage_>
<a href="<$MTPaginatePreviousPageLink$>"><</a>
</MTPaginateIfPreviousPage_>
<$MTPaginateNavigator style="links" format_all="All pages" place_all="after" separator=" | ">
<MTPaginateIfNextPage_>
<a href="<$MTPaginateNextPageLink$>">></a>
</MTPaginateIfNextPage_>
</p>
</MTPaginateIfMultiplePages>
</MTPaginate>
</MTIf>
:
日付ベースのアーカイブのみページ分割を設定する場合
:
<MTIf name="datebased_archive">
<MTPaginate>
<MTPaginateContent max_sections="5">
<MTEntries>
<$MTEntryTrackbackData$>
<$MTInclude module="ブログ記事の概要"$>
<$MTPaginateSectionBreak$>
</MTEntries>
</MTPaginateContent>
<MTPaginateIfMultiplePages>
<p class="paginate">
<MTPaginateIfPreviousPage_>
<a href="<$MTPaginatePreviousPageLink$>"><</a>
</MTPaginateIfPreviousPage_>
<$MTPaginateNavigator style="links" format_all="All pages" place_all="after" separator=" | ">
<MTPaginateIfNextPage_>
<a href="<$MTPaginateNextPageLink$>">></a>
</MTPaginateIfNextPage_>
</p>
</MTPaginateIfMultiplePages>
</MTPaginate>
<MTElse>
<MTEntries limit="auto">
<$MTEntryTrackbackData$>
<$MTInclude module="ブログ記事の概要"$>
</MTEntries>
</MTIf>
:
日付ベース以外のアーカイブのみページ分割を設定する場合
:
<MTIf name="datebased_archive">
<MTEntries>
<$MTEntryTrackbackData$>
<$MTInclude module="ブログ記事の概要"$>
</MTEntries>
<MTElse>
<MTPaginate>
<MTPaginateContent max_sections="5">
<MTEntries limit="auto">
<$MTEntryTrackbackData$>
<$MTInclude module="ブログ記事の概要"$>
<$MTPaginateSectionBreak$>
</MTEntries>
</MTPaginateContent>
<MTPaginateIfMultiplePages>
<p class="paginate">
<MTPaginateIfPreviousPage_>
<a href="<$MTPaginatePreviousPageLink$>"><</a>
</MTPaginateIfPreviousPage_>
<$MTPaginateNavigator style="links" format_all="All pages" place_all="after" separator=" | ">
<MTPaginateIfNextPage_>
<a href="<$MTPaginateNextPageLink$>">></a>
</MTPaginateIfNextPage_>
</p>
</MTPaginateIfMultiplePages>
</MTPaginate>
</MTIf>
:
日付ベース以外のアーカイブのみページ分割を設定する場合、MTEntries タグにある
limit="auto"
は削除した方がいいでしょう。
limit モディファイアに auto を設定した場合、表示するブログ記事数を、「設定」→「ブログの設定」→「ブログ記事」→「ブログ記事の表示数」にあわせます。
7.表示ブログ記事数の設定
リスト中の、
<MTPaginateContent max_sections="5">
<MTEntries>
にある
max_sections="5"
は、1ページに表示する最大ブログ記事数を設定します。ここでは5つのブログ記事表示する設定にしています。
ブログ記事数が30ある場合、max_sections が1ページに5ブログ記事ずつ表示する設定になっているので、ページは計6ページに分割して表示することになります。
8.スタイルの設定
赤色の p 要素はスタイルを設定するために付与しています。必要に応じて下記のようなCSSをスタイルシートに追加してください。
.paginate {
text-align: center;
font-size: 9px;
}
設定が完了したら保存し、再構築します。
これで各アーカイブページがページ分割されていることを確認してください。
9.ページリンクの設定
ページリンクは冒頭のスクリーンショットのように表示され、各ページへのリンクと現在のページから前後のページへジャンプするのリンク、および全ページを一括表示するリンクがあります。
各ページのリンクの現在のページはテキスト表示になります。また一番最初のページは「<」を表示せず、最後のページは「>」を表示しません。
上のサンプルではページリンクをページの一番下に表示するように配置していますが、ページの上に表示したい場合は、
:
<MTPaginate>
<MTPaginateIfMultiplePages>
<p class="paginate">
<MTPaginateIfPreviousPage_>
<a href="<$MTPaginatePreviousPageLink$>"><</a>
</MTPaginateIfPreviousPage_>
<$MTPaginateNavigator style="links" format_all="All pages" place_all="after" separator=" | ">
<MTPaginateIfNextPage_>
<a href="<$MTPaginateNextPageLink$>">></a>
</MTPaginateIfNextPage_>
</p>
</MTPaginateIfMultiplePages>
<MTPaginateContent max_sections="5">
<MTEntries>
<$MTEntryTrackbackData$>
<$MTInclude module="ブログ記事の概要"$>
<$MTPaginateSectionBreak$>
</MTEntries>
</MTPaginateContent>
</MTPaginate>
:
と、青色部分を追加してください(すべてのアーカイブに適用させる場合は、上のリストを日付アーカイブベースのサブテンプレートと、それ以外のサブテンプレートの2ヶ所に設定してください)。上下両方にページリンクを付与することも可能です。
注意点としては、ページリンクを必ず MTPaginate タグと MTPaginateContent タグの間に設定してください。誤って MTPaginate の上に設定すると再構築エラーになり、MTPaginateContent の下に貼り付けると再構築はできますが、何も表示されなくなりますのでご注意ください。
2008.04.25
カスタマイズ手順に PHP 化の手順を追加し、手順の順番を見直しました。
メインページのページ分割 for Movable Type 4
Movable Type 4 で、MTPaginate プラグインを用いた、メインページのページ分割方法をご紹介します。

このエントリーは「トップページのページ分割」を MT4 用に書き直したものです。
以前、ご質問を頂いていたものの回答ですが、公開が大変遅くなってしまい、申し訳ございません。
カスタマイズ手順には、PHP化の設定を含んでいます。PHP化の設定を行っていない場合は手順1~手順4を行った後、PHP化したメインページが正常に表示されることを確認してから、手順5以降のページ分割の設定を行ってください。
すでにPHP化が済んでいる場合は、手順5から開始してください。
1.ファイル・ディレクトリのパーミッションを変更
ファイルのパーミッションを変更するために、以下の作業を行ってください。
この作業を行うと、他のアーカイブページのファイルも同じパーミッションになるので、すべてのアーカイブのPHP化(拡張子を.phpにする)が必要です。
まず、mt-config.cgi を FTP ツールでダウンロードし、任意のエディタで開き、行末に以下の内容を追加してください。mt-config.cgi はアプリケーションディレクトリにあります。アプリケーションディレクトリとは、Movable Type をインストールしたディレクトリで、mt.cgi があるところです。
HTMLUmask 0072
DirUmask 0072
HTMLPerms 0777
修正後、mt-config.cgi を保存して、元のディレクトリにアップロードし、メインページを再構築してください。
この設定を行っておけば、出力されるメインページや他のHTMLファイルおよびディレクトリのパーミッションを常に705にします。パーミッションを 775 にする場合は、
HTMLUmask 0022
DirUmask 0022
HTMLPerms 0777
としてください。
2.ファイル名の変更
テンプレートのメインページの編集画面を開き、「出力ファイル名」を index.html から index.php に変更して「保存」をクリックします。
もしファイル名が index.html のままになっていると、カスタマイズ終了後、ページを表示した時に
Make sure that the document extension is .php and that your server supports PHP documents.
というメッセージが表示されますのでご注意ください。
3.XML宣言の修正
利用しているテンプレートによっては、メインページテンプレート、またはテンプレートモジュールの「ヘッダー」の1行目(またはどこか)に、
<?xml version="1.0" encoding="<$MTPublishCharset$>"?>
という XML 宣言が記述されているケースがあります(記述されていなければこの項目はスキップしてください)。
PHP化を行うと、サーバではこのXML宣言の行をPHPスクリプトとして誤認識してしまい、次のようなPHPエラー
Parse error: parse error, unexpected T_STRING in ~(省略)~index.php on line 1
となるか、500エラーが発生するか、真っ白なページが表示される可能性があります。
このような場合、前述のXML宣言を下記の内容に置き換えてください(ご利用になる際、リストに含まれる改行はすべて除去してください。)。
なお、他のアーカイブページ等も PHP 化されていることを前提にしています。
<MTUnless name="system_template">
<? php echo('
</MTUnless>
<?xml version="1.0" encoding="utf-8"?>
<MTUnless name="system_template">
'); ? >
</MTUnless>
よく分からない場合や、ページが表示されない場合は、このカスタマイズを行う代わりに、XML宣言自体を削除してください。
4.index.html の削除
トップページを index.html という出力ファイル名で再構築したことがある場合、index.html がサーバ上に残ります。このファイルが残っていると、
http://~/
という、最後が "/" で終了するURLの場合、html ファイルを優先に検索します。html ファイルが表示されるとページ分割は正常に動作しません。レンタルサーバの場合は任意のFTPソフトを使って index.html を直接削除してください
インデックステンプレートにはファイル名変更後に元ファイルを削除する機能はありません。
5.プラグインのダウンロード
MT Extensions より MTPaginate をダウンロード(ページ上の方にある「Download」をクリック)。ファイルは任意のフォルダ(デスクトップ等)に保存します。
6.プラグインのインストール
注:この情報はバージョン1.28のものです。
ダウンロードしたファイルを解凍し、その中の MTPaginate ディレクトリを下記のディレクトリ構成になるように plugins ディレクトリに丸ごとアップロードします。
plugins/MTPaginate/lib/MTPaginate.pm
plugins/MTPaginate/MTPaginate.pl
ブログ管理画面の「システム」→「プラグイン」で MTPaginate が表示されれば、プラグインのインストールは完了です。

7.ページ分割の設定
ブログ管理画面より、「デザイン」→「テンプレート」→「メインページ」を選択し、ページ分割用タグを設定します。
テンプレート編集画面のテキストエリアに、リストのように青色部分を追加します。一見複雑にみえますが <MTEntries> の直前と </MTEntries> の前後に加えるだけですので MTEntries という文字列を検索して編集すると良いでしょう。
デフォルトテンプレート/配布テンプレート共通
:
<MTPaginate>
<MTPaginateContent max_sections="5">
<MTEntries>
<$MTEntryTrackbackData$>
<$MTInclude module="ブログ記事の概要"$>
<$MTPaginateSectionBreak$>
</MTEntries>
</MTPaginateContent>
<MTPaginateIfMultiplePages>
<div class="paginate">
<MTPaginateIfPreviousPage_>
<a href="<$MTPaginatePreviousPageLink$>"><</a>
</MTPaginateIfPreviousPage_>
<$MTPaginateNavigator style="links" format_all="All pages" place_all="after" separator=" | ">
<MTPaginateIfNextPage_>
<a href="<$MTPaginateNextPageLink$>">></a>
</MTPaginateIfNextPage_>
</div>
</MTPaginateIfMultiplePages>
</MTPaginate>
:
7.1 表示ブログ記事数の設定
リスト中の、
<MTPaginateContent max_sections="5">
<MTEntries>
にある
max_sections="5"
は、1ページに表示する最大ブログ記事数を設定します。ここでは5つのブログ記事表示する設定にしています。
また全ページ合計の表示ブログ記事数は、「設定」→「ブログの設定」→「ブログ記事」→「ブログ記事の表示数」で設定します。
「ブログ記事の表示数」を30にした場合、max_sections が1ページに5ブログ記事ずつ表示する設定になっているので、トップページは計6ページに分割して表示することになります。「ブログ記事の表示数」の値が max_sections より小さい場合はページ分割が行われません。
7.2 スタイルの設定
赤色の div 要素はスタイルを設定するために付与しています。必要に応じて下記のようなCSSをスタイルシートに追加してください。
.paginate {
text-align: center;
font-size: 9px;
}
設定が完了したら保存し、再構築します。 注:7項の作業を終えるまでページは確認しないでください。
8.ページリンクの設定
ページリンクは冒頭のスクリーンショットのように表示され、各ページへのリンクと現在のページから前後のページへジャンプするのリンク、および全ページを一括表示するリンクがあります。
各ページのリンクの現在のページはテキスト表示になります。また一番最初のページは「<」を表示せず、最後のページは「>」を表示しません。
サンプルリストではページリンクをページの一番下に表示するように配置していますが、ページの上に表示したい場合は、
:
<MTPaginate>
<MTPaginateIfMultiplePages>
<div class="paginate">
<MTPaginateIfPreviousPage_>
<a href="<$MTPaginatePreviousPageLink$>"><</a>
</MTPaginateIfPreviousPage_>
<$MTPaginateNavigator style="links" format_all="All pages" place_all="after" separator=" | ">
<MTPaginateIfNextPage_>
<a href="<$MTPaginateNextPageLink$>">></a>
</MTPaginateIfNextPage_>
</div>
</MTPaginateIfMultiplePages>
<MTPaginateContent max_sections="5">
<MTEntries>
<$MTEntryTrackbackData$>
<$MTInclude module="ブログ記事の概要"$>
<$MTPaginateSectionBreak$>
</MTEntries>
</MTPaginateContent>
</MTPaginate>
:
としてください。ページの上下にページリンクを付与することも可能です。
注意点としては、必ず MTPaginate タグと MTPaginateContent タグの間に設定してください。誤って MTPaginate の上に設定すると再構築エラーになり、MTPaginateContent の下に貼り付けると再構築はできますが、何も表示されなくなりますのでご注意ください。
2008.04.25
カスタマイズ手順に PHP 化の手順を追加し、手順の順番を見直しました。
ページ分割の Ajax 化
Movable Type で MTPaginate を利用したページ分割の Ajax 化です。
このカスタマイズは1年以上前に作ったもので、実装がいまひとつなため公開していなかったのですが、「こういうやり方もあります」という、案レベルの位置づけで公開します。
サンプルを用意しましたのでお試しください(ファイルサイズが小さいため効果が分かりにくいです)。
仕組みは、ページナビゲーションのリンクをクリックした時、リンク先のページを Ajax 経由で呼び出し、取得したファイルから必要な部分だけを切り出して、ページに表示させるというものです。
以下、カスタマイズ方法です。
ページ分割用プラグインは MTPaginate バージョン 1.28 を利用しています。プラグインは「MT Extensions: MTPaginate」よりダウンロードし、Movable Type に予めインストールし、ページ分割の設定まで行っておいてください。ページ分割の方法については「ページ分割」のカテゴリーを参照願います。
本エントリーのカスタマイズはトップページまたはエントリー・アーカイブ以外のアーカイブページでのみ有効です。またブログの文字コードが UTF-8 のみ適用可能です。
1.prototype.js のダウンロード・アップロード
上記のサイトにある Download the latest version のリンクをクリックし、アーカイブをダウンロードします。アーカイブを解凍して、dist フォルダの中にある prototype.js を使用します(他は使いません)。
prototype.js は index.php と同じディレクトリにアップロードしてください。
2.paginate.js のダウンロード・アップロード
下記の paginate.js をダウンロードし、index.php と同じディレクトリにアップロードしてください。
3.プラグインファイル修正
MTPaginate/lib/MTPaginate.pm
を任意のエディタで開き、下記の赤色部分を青色の内容に書き換えます。
sub PaginateNavigator {
:
(中略)
:
} else {
my $target = $args->{target} || "";
if($pg->{mode} eq 'cgi') {
$target = " target=\"$target\"" if $target;
if ($format_all && $place_all ne 'after') {
my $title = "";
$title = sprintf(" title=\"$format_all_title\"", $num_pages) if $format_all_title;
if($pg->{current_page} eq 'all') {
$res .= "$all_current$separator";
} else {
$res .= "<a href=\"" . $pg->{paginate_self} . "=all$anchor\"$title$target>$all</a>$separator";
$res .= "<a href=\"\#\" onclick=\"changePage('" . $pg->{paginate_self} . "=all$anchor')\"$title$target>$all</a>$separator";
}
}
$start = ($list_pages eq 'after') ? $pg->{current_page}+1 : 1;
$end = ($list_pages eq 'before') ? $pg->{current_page}-1 : $num_pages;
$format_title = " title=\"$format_title\"" if $format_title;
for(my $i = $start; $i <= $end; $i++) {
$res .= $separator if($i > $start);
if($i eq $pg->{current_page}) {
$res .= sprintf("$format_current", $i);
} else {
$res .= "<a href=\"" . $pg->{paginate_self} . "=$i$anchor\"$target" . sprintf($format_title, $i) . sprintf(">$format", $i) . '</a>';
$res .= "<a href=\"\#\" onclick=\"changePage('" . $pg->{paginate_self} . "=$i$anchor')\"$target" . sprintf($format_title, $i) . sprintf(">$format", $i) . '</a>';
}
}
if ($format_all && $place_all eq 'after') {
my $title = "";
$title = sprintf(" title=\"$format_all_title\"", $num_pages) if $format_all_title;
if($pg->{current_page} eq 'all') {
$res .="$all_current$separator";
} else {
$res .= "<a href=\"" . $pg->{paginate_self} . "=all$anchor\"$title$target>$all</a>$separator";
$res .= "<a href=\"\#\" onclick=\"changePage('" . $pg->{paginate_self} . "=all$anchor')\"$title$target>$all</a>$separator";
}
}
} else {
$target = " target=\\\"$target\\\"" if $target;
$res = "<?php\n";
if ($format_all && $place_all ne 'after') {
my $title = "";
$title = sprintf(" title=\\\"$format_all_title\\\"", $num_pages) if $format_all_title;
$res .=<<PHP
if(\$paginate_current_page == 'all') {
echo '$all_current$separator';
} else {
echo "<a href=\\\"\$paginate_self=all$anchor\\\"$title$target>$all</a>$separator";
echo "<a href=\\\"\#\\\" onclick=\\\"changePage('\$paginate_self=all$anchor')\\\"$title$target>$all</a>$separator";
}
PHP
}
$format_title = " . sprintf(' title=\"$format_title\"', \$i)" if $format_title;
$res .=<<PHP;
for(\$i = $start; \$i <= $end; \$i++) {
if(\$i > $start)
echo '$separator';
if(\$i == \$paginate_current_page) {
echo sprintf("$format_current", \$i);
} else {
echo "<a href=\\\"\$paginate_self=\$i$anchor\\\"$target" $format_title . sprintf('>$format', \$i) . '</a>';
echo "<a href=\\\"\#\\\" onclick=\\\"changePage('\$paginate_self=\$i$anchor')\\\"$target" $format_title . sprintf('>$format', \$i) . '</a>';
}
}
PHP
if ($format_all && $place_all eq 'after') {
my $title = "";
$title = sprintf(" title=\\\"$format_all_title\\\"", $num_pages) if $format_all_title;
$res .=<<PHP
if(\$paginate_current_page == 'all') {
echo '$separator$all_current';
} else {
echo "$separator<a href=\\\"\$paginate_self=all$anchor\\\"$title$target>$all</a>";
echo "$separator<a href=\\\"\#\\\" onclick=\\\"changePage('\$paginate_self=all$anchor')\\\"$title$target>$all</a>";
}
PHP
}
$res .=<<PHP;
?>
PHP
}
}
return $res;
}
修正後、保存して元のディレクトリにアップロードしてください。
4.テンプレートに script 要素追加
ページ分割を行いたいテンプレートに、下記の script 要素を追加します。
<script type="text/javascript" src="<$MTBlogURL$>prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>paginate.js"></script>
5.Ajax 対象部分にHTMLコメント追加
Ajax 化を行ないたい部分に、下の HTML コメント(青色)を追加します。ここでは当サイトの配布テンプレートを使用しているので、中央カラム全体を括っている div 要素(id 属性 content)のすぐ内側に設定します。
:
<div id="content">
<!-- AjaxStart -->
:
(中略)
:
<!-- AjaxEnd -->
</div>
:
2007.12.06
最後のリストより、<!-- /content --> を削除(MT4でコメントタグを削除したため)
検索結果のページ分割(3.3x 版)
Tag:[Counter, Customize, MovableType, MTPaginate, Plugin, SearchResult]
Permalink
MTPaginate プラグインを利用することで、テキスト検索・タグ検索のページ分割が可能ですが、Movable Type 3.3x ではメインページや他のアーカイブと同じような設定では、例えばデフォルトテンプレートでは 2カラム表示が崩れるという問題が発覚しました。*1
ということで、3.3x 版の検索結果のページ分割方法について改めて説明致します。
なお、テンプレートの修正内容が複雑なため、今回は理由を説明しながらタグの設定を行っていきます。作業をスキップしたい方は1項、2項を実施した後、5項のタグをそのまま検索結果ページの該当部分と置き換えてください。
1.プラグインファイルのダウンロード
プラグイン配布サイト
よりプラグインをダウンロードします(ページ上方にある「Download」をクリック)。
2.プラグインファイルのアップロード
ダウンロードしたファイルを解凍し、その中の MTPaginate ディレクトリを下記のディレクトリ構成になるように plugins ディレクトリに丸ごとアップロードします。
plugins/MTPaginate/lib/MTPaginate.pm
plugins/MTPaginate/MTPaginate.pl
3.ページ分割用タグを挿入
検索結果テンプレートを修正していきます。
最初に、ページ分割用のタグ
MTPaginateMTPaginateContentMTPaginateSectionBreak
と、ナビゲーション表示の
MTPaginateIfMultiplePagesMTPaginateIfPreviousPage_MTPaginateNavigatorMTPaginateIfNextPage_
を追加します(青色部分)。挿入位置は他の既存タグを参考にしてください。基本的には
<MTSearchResults>の前</MTSearchResults>の前後
の辺りです。
:
<MTIgnore>
########## 検索結果表示
</MTIgnore>
<MTPaginate mode="cgi">
<MTPaginateIfMultiplePages>
<div class="paginate">
<MTPaginateIfPreviousPage_>
<a href="<$MTPaginatePreviousPageLink$>" title="previous page link"><</a>
</MTPaginateIfPreviousPage_>
<$MTPaginateNavigator format_all="All Pages" place_all="after"$>
<MTPaginateIfNextPage_>
<a href="<$MTPaginateNextPageLink$>" title="next page link">></a>
</MTPaginateIfNextPage_>
</div>
</MTPaginateIfMultiplePages>
<MTPaginateContent max_sections="3">
<MTSearchResults>
<MTBlogResultHeader>
<h3 class="search-results-header">
<MTIfStraightSearch>
ブログ: <$MTBlogName$> での検索結果
</MTIfStraightSearch>
<MTIfTagSearch>
<$MTBlogName$>でタグ <$MTSearchString$> が指定されているエントリー
</MTIfTagSearch>
</h3>
<div class="search-results-container">
</MTBlogResultHeader>
<h3><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h3>
<p><$MTEntryExcerpt$> <$MTEntryEditLink$></p>
<MTIfTagSearch>
<div class="entry-tags">
<h4 class="entry-tags-header">タグ:</h4>
<ul class="entry-tags-list">
<MTEntryTags>
<li class="entry-tag"><a href="<$MTTagSearchLink$>&IncludeBlogs=<$MTSearchIncludeBlogs$>" rel="tag"><$MTTagName$></a></li>
</MTEntryTags>
</ul>
</div>
</MTIfTagSearch>
<p class="entry-footer">
<span class="post-footers"><MTIfNonEmpty tag="EntryAuthorDisplayName">投稿者: <$MTEntryAuthorDisplayName$> </MTIfNonEmpty>日時: <$MTEntryDate$></span>
</p>
<MTBlogResultFooter>
</div>
</MTBlogResultFooter>
<$MTPaginateSectionBreak$>
</MTSearchResults>
</MTPaginateContent>
</MTPaginate>
<MTIgnore>
########## 検索結果がないときのメッセージ
</MTIgnore>
:
MTPaginateContent の max_sections 属性(赤色部分)の「3」が1ページの表示件数です。この部分はお好みの値に変更してください。
ナビゲーションを後方に表示したい場合は、<MTPaginateIfMultiplePages>~</MTPaginateIfMultiplePages> を </MTPaginate> の直前に追加してください。
4.検索結果ヘッダおよび検索結果フッタ用タグを削除
MTSearchResults の中に記述された検索結果ヘッダおよび検索結果フッタ用タグ
MTBlogResultHeaderMTBlogResultFooter
を削除します(赤色部分)。タグで括られた内容は後で利用しますので、メモ帳にでもペーストしておいてください。
:
<MTIgnore>
########## 検索結果表示
</MTIgnore>
<MTPaginate mode="cgi">
<MTPaginateIfMultiplePages>
<div class="paginate">
<MTPaginateIfPreviousPage_>
<a href="<$MTPaginatePreviousPageLink$>" title="previous page link"><</a>
</MTPaginateIfPreviousPage_>
<$MTPaginateNavigator format_all="All Pages" place_all="after"$>
<MTPaginateIfNextPage_>
<a href="<$MTPaginateNextPageLink$>" title="next page link">></a>
</MTPaginateIfNextPage_>
</div>
</MTPaginateIfMultiplePages>
<MTPaginateContent max_sections="3">
<MTSearchResults>
<MTBlogResultHeader>
<h3 class="search-results-header">
<MTIfStraightSearch>
ブログ: <$MTBlogName$> での検索結果
</MTIfStraightSearch>
<MTIfTagSearch>
<$MTBlogName$>でタグ <$MTSearchString$> が指定されているエントリー
</MTIfTagSearch>
</h3>
<div class="search-results-container">
</MTBlogResultHeader>
<h3><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h3>
<p><$MTEntryExcerpt$> <$MTEntryEditLink$></p>
<MTIfTagSearch>
<div class="entry-tags">
<h4 class="entry-tags-header">タグ:</h4>
<ul class="entry-tags-list">
<MTEntryTags>
<li class="entry-tag"><a href="<$MTTagSearchLink$>&IncludeBlogs=<$MTSearchIncludeBlogs$>" rel="tag"><$MTTagName$></a></li>
</MTEntryTags>
</ul>
</div>
</MTIfTagSearch>
<p class="entry-footer">
<span class="post-footers"><MTIfNonEmpty tag="EntryAuthorDisplayName">投稿者: <$MTEntryAuthorDisplayName$> </MTIfNonEmpty>日時: <$MTEntryDate$></span>
</p>
<MTBlogResultFooter>
</div>
</MTBlogResultFooter>
<$MTPaginateSectionBreak$>
</MTSearchResults>
</MTPaginateContent>
</MTPaginate>
<MTIgnore>
########## 検索結果がないときのメッセージ
</MTIgnore>
:
この2つのタグは、検索結果全体の最初と最後に1度しか実行されません。ページ分割処理に含めると、1ページ目の最初と最後のページの最後にしか適用されないため、削除します。
5.検索結果ヘッダと検索結果フッタを移動
4項で削除した検索結果ヘッダと検索結果フッタの内容を MTPaginateContent の外側に設定します(青色部分)。注:</MTPaginateContent> の下にもあります。
:
<MTIgnore>
########## 検索結果表示
</MTIgnore>
<MTPaginate mode="cgi">
<MTPaginateIfMultiplePages>
<div class="paginate">
<MTPaginateIfPreviousPage_>
<a href="<$MTPaginatePreviousPageLink$>" title="previous page link"><</a>
</MTPaginateIfPreviousPage_>
<$MTPaginateNavigator format_all="All Pages" place_all="after"$>
<MTPaginateIfNextPage_>
<a href="<$MTPaginateNextPageLink$>" title="next page link">></a>
</MTPaginateIfNextPage_>
</div>
</MTPaginateIfMultiplePages>
<h3 class="search-results-header">
<MTIfStraightSearch>
ブログ: <$MTBlogName$> での検索結果
</MTIfStraightSearch>
<MTIfTagSearch>
<$MTBlogName$>でタグ <$MTSearchString$> が指定されているエントリー
</MTIfTagSearch>
</h3>
<div class="search-results-container">
<MTPaginateContent max_sections="3">
<MTSearchResults>
<h3><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h3>
<p><$MTEntryExcerpt$> <$MTEntryEditLink$></p>
<MTIfTagSearch>
<div class="entry-tags">
<h4 class="entry-tags-header">タグ:</h4>
<ul class="entry-tags-list">
<MTEntryTags>
<li class="entry-tag"><a href="<$MTTagSearchLink$>&IncludeBlogs=<$MTSearchIncludeBlogs$>" rel="tag"><$MTTagName$></a></li>
</MTEntryTags>
</ul>
</div>
</MTIfTagSearch>
<p class="entry-footer">
<span class="post-footers"><MTIfNonEmpty tag="EntryAuthorDisplayName">投稿者: <$MTEntryAuthorDisplayName$> </MTIfNonEmpty>日時: <$MTEntryDate$></span>
</p>
<$MTPaginateSectionBreak$>
</MTSearchResults>
</MTPaginateContent>
</div>
</MTPaginate>
<MTIgnore>
########## 検索結果がないときのメッセージ
</MTIgnore>
:
MTPaginateContent の外側に設定することで、検索結果ヘッダと検索結果フッタがページ分割に依存せず常に表示されるようになります。
6.検索結果ヘッダと検索結果フッタに MTSearchResults を適用
5項で設定した検索結果ヘッダと検索結果フッタを MTSearchResults で括ります。
:
<MTIgnore>
########## 検索結果表示
</MTIgnore>
<MTPaginate mode="cgi">
<MTPaginateIfMultiplePages>
<div class="paginate">
<MTPaginateIfPreviousPage_>
<a href="<$MTPaginatePreviousPageLink$>" title="previous page link"><</a>
</MTPaginateIfPreviousPage_>
<$MTPaginateNavigator format_all="All Pages" place_all="after"$>
<MTPaginateIfNextPage_>
<a href="<$MTPaginateNextPageLink$>" title="next page link">></a>
</MTPaginateIfNextPage_>
</div>
</MTPaginateIfMultiplePages>
<MTSearchResults>
<h3 class="search-results-header">
<MTIfStraightSearch>
ブログ: <$MTBlogName$> での検索結果
</MTIfStraightSearch>
<MTIfTagSearch>
<$MTBlogName$>でタグ <$MTSearchString$> が指定されているエントリー
</MTIfTagSearch>
</h3>
<div class="search-results-container">
</MTSearchResults>
<MTPaginateContent max_sections="3">
<MTSearchResults>
<h3><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h3>
<p><$MTEntryExcerpt$> <$MTEntryEditLink$></p>
<MTIfTagSearch>
<div class="entry-tags">
<h4 class="entry-tags-header">タグ:</h4>
<ul class="entry-tags-list">
<MTEntryTags>
<li class="entry-tag"><a href="<$MTTagSearchLink$>&IncludeBlogs=<$MTSearchIncludeBlogs$>" rel="tag"><$MTTagName$></a></li>
</MTEntryTags>
</ul>
</div>
</MTIfTagSearch>
<p class="entry-footer">
<span class="post-footers"><MTIfNonEmpty tag="EntryAuthorDisplayName">投稿者: <$MTEntryAuthorDisplayName$> </MTIfNonEmpty>日時: <$MTEntryDate$></span>
</p>
<$MTPaginateSectionBreak$>
</MTSearchResults>
</MTPaginateContent>
<MTSearchResults>
</div>
</MTSearchResults>
</MTPaginate>
<MTIgnore>
########## 検索結果がないときのメッセージ
</MTIgnore>
:
MTSearchResults で括らないと、検索文字列がヒットしなかった場合や、検索文字列が設定されていない場合にも検索結果ヘッダと検索結果フッタが表示されてしまうためです。
7.検索結果ヘッダと検索結果フッタに Counter プラグインを適用
6項で設定した検索結果ヘッダと検索結果フッタを、さらに Counter プラグインのタグを追加します(青色部分)。
:
<MTIgnore>
########## 検索結果表示
</MTIgnore>
<MTPaginate mode="cgi">
<MTPaginateIfMultiplePages>
<div class="paginate">
<MTPaginateIfPreviousPage_>
<a href="<$MTPaginatePreviousPageLink$>" title="previous page link"><</a>
</MTPaginateIfPreviousPage_>
<$MTPaginateNavigator format_all="All Pages" place_all="after"$>
<MTPaginateIfNextPage_>
<a href="<$MTPaginateNextPageLink$>" title="next page link">></a>
</MTPaginateIfNextPage_>
</div>
</MTPaginateIfMultiplePages>
<MTCounter>
<MTSearchResults>
<$MTCounterPlus$>
<MTCounterIfEqual value="1">
<h3 class="search-results-header">
<MTIfStraightSearch>
ブログ: <$MTBlogName$> での検索結果
</MTIfStraightSearch>
<MTIfTagSearch>
<$MTBlogName$>でタグ <$MTSearchString$> が指定されているエントリー
</MTIfTagSearch>
</h3>
<div class="search-results-container">
</MTCounterIfEqual>
</MTSearchResults>
</MTCounter>
<MTPaginateContent max_sections="3">
<MTSearchResults>
<h3><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h3>
<p><$MTEntryExcerpt$> <$MTEntryEditLink$></p>
<MTIfTagSearch>
<div class="entry-tags">
<h4 class="entry-tags-header">タグ:</h4>
<ul class="entry-tags-list">
<MTEntryTags>
<li class="entry-tag"><a href="<$MTTagSearchLink$>&IncludeBlogs=<$MTSearchIncludeBlogs$>" rel="tag"><$MTTagName$></a></li>
</MTEntryTags>
</ul>
</div>
</MTIfTagSearch>
<p class="entry-footer">
<span class="post-footers"><MTIfNonEmpty tag="EntryAuthorDisplayName">投稿者: <$MTEntryAuthorDisplayName$> </MTIfNonEmpty>日時: <$MTEntryDate$></span>
</p>
<$MTPaginateSectionBreak$>
</MTSearchResults>
</MTPaginateContent>
<MTCounter>
<MTSearchResults>
<$MTCounterPlus$>
<MTCounterIfEqual value="1">
</div>
</MTCounterIfEqual>
</MTSearchResults>
</MTCounter>
</MTPaginate>
<MTIgnore>
########## 検索結果がないときのメッセージ
</MTIgnore>
:
MTSearchResults はループ処理用のタグで、上記までの設定ではヒットした回数分タグの内容が繰り返して表示されるためです。
Counter プラグインについては「Counter プラグイン」を参照してインストールまで行ってください。
カウンタ系のプラグインは他にも出回ってますので、そちらを利用しても構いません。
これでページ分割の設定は完了です。
8.その他
- ナビゲーションを後方に設定した場合は下マージンが若干少ないので適宜追加してください。
- 検索で「現在検索中です。検索が終わるまでお待ちください。」というメッセージが表示されて困る方は「Movable Type の検索でエラーになる問題について」を参照願います。
*1:以前の検索結果ページは 1カラムであったため、たまたま正常に動作しているようにみえていただけかもしれません。
画像でエントリー・アーカイブをページ分割する
Movable Type でページ分割用プラグイン MTPaginate を用い、エントリーアーカイブを画像(およびテキスト)で分割するカスタマイズです。
下記のように img 要素だけを記述したエントリーで、パラグラフ(p)要素でページ分割をする場合、MTPaginate をそのまま利用すると分割されず、全て同じページに表示されます(空行部分、つまり img 要素の前後には Movable Type の機能で自動的に p 要素が付与されます)。
<img src="http://yourhost/path/hoge1.jpg" alt="hoge1" />
<img src="http://yourhost/path/hoge2.jpg" alt="hoge2" />
<img src="http://yourhost/path/hoge3.jpg" alt="hoge3" />
これは、ページ分割のセクションサイズ等の計算をHTMLタグを除いたテキストだけで行うためです。
ということで、プラグインソースを改変し、img 要素等のHTMLタグでページ分割する方法を紹介します。
下記に改変内容を記します。なおエントリーアーカイブのページ分割の基本的な設定が完了していることが前提です。設定方法については、エントリーアーカイブのページ分割を参照ください。
また、ここではパラグラフ要素をセパレータとした動作のみ確認しています(下記の設定)。
section_start_tag="p"
これ以外の要素や、他のオプションによる分割については動作を確認しておりませんので予めご容赦ください。
1.プラグインの修正
MTPaginate.pl に下記のパッチを適用します。プラグインファイルのTAB文字は半角空白4文字に予め置き換えてください。
--- MTPaginate.pl.bak Fri May 19 13:14:15 2006
+++ MTPaginate.pl Fri May 19 13:20:44 2006
@@ -146,7 +146,7 @@
} elsif($pg->{max_bytes}) {
$sectionSize = length($stripped_section);
} else {
- my @words = split /[\s]+/, remove_html($stripped_section);
+ my @words = split /[\s]+/, $stripped_section;
$sectionSize = scalar(@words);
}
@@ -156,12 +156,12 @@
my $sz = length($p);
my @words = split /[\s]+/, remove_html($p);
my $words = scalar(@words);
- $pageCount++;
$debugContent .= "<div style=\"background: yellow; margin-left: -10px; margin-right: -10px; padding: 5px 10px 5px 10px\"><b>Page $pageCount</b>, $pageSectionCount sections
, $words words, $sz bytes</div>" . $debugPage;
$debugPage = '';
$pageSectionCount = 0;
}
- push @pages, $page;
+ push @pages, $page if $pageCount;
+ $pageCount++;
$count = 0;
$page = [];
}
パッチのあてかたが分からない方は、下記のリストを参照して、赤色を削除し、青色を追加してください。*1
:
} elsif($pg->{max_bytes}) {
$sectionSize = length($stripped_section);
} else {
my @words = split /[\s]+/, remove_html($stripped_section);
my @words = split /[\s]+/, $stripped_section;
$sectionSize = scalar(@words);
}
:
(中略)
:
my $sz = length($p);
my @words = split /[\s]+/, remove_html($p);
my $words = scalar(@words);
$pageCount++;
$debugContent .= "<div style=\"background: yellow; margin-left: -10px; margin-right: -10px; padding: 5px 10px 5px 10px\"><b>Page $pageCount</b>, $pageSectionCount sections
ytes</div>" . $debugPage;
$debugPage = '';
$pageSectionCount = 0;
}
push @pages, $page;
push @pages, $page if $pageCount;
$pageCount++;
$count = 0;
$page = [];
}
:
2.プラグインのアップロード
修正した MTPaginate.pl を元のディレクトリにアップロードします。
以上です。
*1:色覚障害等で色が識別できない場合は、サイト右上の「Styles」メニューにある Gray Scale をクリックしてください。IEではグレースケール表示され、青色部分が下線表示、赤色部分が二重下線で表示されます。Firefox/Opera ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。
検索結果ページのページ分割
ページ分割シリーズの締めくくりは「検索ページのページ分割」です。
このカスタマイズを行うことで通常の検索エンジンのように一定件数毎にページを分割することができます。
この技は自分で発見したのではなく、かなり以前に caramell*vnilla さんと Document_Not_Bound さんのコメントのやりとりでみつけましたので、ご紹介まで(カスタマイズ方法は掲載されていないようです)。
以下、カスタマイズ方法です。
1.プラグインファイルのダウンロード
MT Extensions より MTPaginate をダウンロード(ページ上の方にある「Download」をクリック)。ファイルは任意のフォルダ(デスクトップ等)に保存します。古いバージョン(1.24)では2ページ目以降の表示ができなかったため、既にお使いの方も最新版をダウンロードされることをお勧めします。1.26では正常に動作しました。
2.プラグインファイルのアップロード
ダウンロードしたファイルを解凍し、その中の MTPaginate.pl を plugins ディレクトリにアップロードします。
注:この情報はバージョン1.28のものです。
ダウンロードしたファイルを解凍し、その中の MTPaginate ディレクトリを下記のディレクトリ構成になるように plugins ディレクトリに丸ごとアップロードします。
plugins/MTPaginate/lib/MTPaginate.pm
plugins/MTPaginate/MTPaginate.pl
3.検索用テンプレートの修正
検索用テンプレートは管理画面から編集できないため、ファイルを直接編集します。なお元のファイルはバックアップ(同じ内容のものを別のファイル名で保存)しておきましょう。
- search_templates/default.tmpl
をダウンロード、任意のエディタで開き、検索結果テンプレートの MTSearchResults タグの前後に、下記のリストのように青色部分のタグを追加します。
<MTPaginate mode="cgi">
<MTPaginateIfMultiplePages>
<div class="paginate">
<MTPaginateIfPreviousPage_>
<a href="<$MTPaginatePreviousPageLink$>" title="previous page link"><</a>
</MTPaginateIfPreviousPage_>
<$MTPaginateNavigator format_all="All Pages" place_all="after"$>
<MTPaginateIfNextPage_>
<a href="<$MTPaginateNextPageLink$>" title="next page link">></a>
</MTPaginateIfNextPage_>
</div>
</MTPaginateIfMultiplePages>
<MTPaginateContent max_sections="10">
<MTSearchResults>
<MTBlogResultHeader>
<h2><MT_TRANS phrase="Search Results from"> <$MTBlogName$></h2>
</MTBlogResultHeader>
<h3><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h3>
<p><$MTEntryExcerpt$> <$MTEntryEditLink$></p>
<p class="posted"><MT_TRANS phrase="Posted in"> <$MTBlogName$> <MT_TRANS phrase="on"> <$MTEntryDate$></p>
<$MTPaginateSectionBreak$>
</MTSearchResults>
</MTPaginateContent>
</MTPaginate>
検索用テンプレートはCGIとして動作するため、上記リスト1行目の
mode="cgi"
は必須です。この設定を行っていない状態で検索を実行すると、検索結果画面で
Make sure that the document extension is .php and that your server supports PHP documents.
というメッセージが表示されます。
赤色で示している div 要素はページ分割機能とは直接関係ありませんが、ページリンク用のスタイルを指定する場合を考慮して設定しています。必要に応じて下記のようなCSSをスタイルシート(styles-site.css)に追加してください。
.paginate {
text-align: center;
font-size: 9px;
}
編集が完了したら元のディレクトリにアップロードします。これで各ページから検索を実行してみてください。
4.日本語を利用する場合
このテンプレートに日本語を直接記述すると正常に動作しなくなる可能性があります。
日本語を表示したい場合、例えばページリンクの title 属性で日本語を表示したい場合は
<a href="<$MTPaginatePreviousPageLink$>" title="previous page link"><</a>
:
<a href="<$MTPaginateNextPageLink$>" title="next page link">></a>
の赤色部分を青色の
<a href="<$MTPaginatePreviousPageLink$>" title="<MT_TRANS phrase="Previous Page Link">"><</a>
:
<a href="<$MTPaginateNextPageLink$>" title="<MT_TRANS phrase="Next Page Link">">></a>
に変更します。
そして
- lib/MT/L10N/ja.pm
を任意のエディタで開いて下記を追加します。
'Next Page Link' => '次のページへ',
'Previous Page Link' => '前のページへ',
「Previous Page Link」「Next Page Link」という文字列やそれに対応する日本語名ですが、MT_TRANS タグの phrase 属性の内容と
ja.pm の '' で括った英語が一致すればOKですので、お好きな内容を設定してください。
ただし ja.pm 内ですでに使われている phrase 属性と重複しないように気をつけてください。
また上記2行を挿入する位置はどこでも構いませんが、全体を括っている
%Lexicon = (
:
);
の間に挿入してください。他と同じような設定があるので、それに並べて挿入すれば大丈夫でしょう。最初から設定されているものは行頭にタブがありますが、なくても問題ありません。
5.注意事項
当サイトで動作確認したところ、ページリンクの表示で若干不具合("All Pages" 横のセパレータ位置が妙)があるようです。
またページ遷移の度にCGIが起動されるため、サーバに若干負荷がかかりますのでご注意ください。
2007.05.04 追記
プラグインのバージョンアップに伴い、アップロード方法を修正しました。また 3.3 よりテンプレート化されたので、本文の一部を修正しました。
エントリーアーカイブのページ分割
MTPaginate プラグインを利用したページ分割はかなり普及していますが、このプラグインはひとつのエントリーをさらにページ分割することも可能です。
ということで、エントリーアーカイブ(個別エントリーアーカイブ)のページ分割をご紹介します。エントリーが長文になる場合の分割はもちろん、例えばアフィリエイトで Movable Type を利用している場合、カテゴリーアーカイブに複数の商品を紹介してエントリーアーカイブではひとつの商品を表示するというのが一般的と思われますが、エントリーアーカイブで複数の商品をすっきりと表示することも可能になります。
まず画像を使って完成イメージをご説明します。左のサンプルはデフォルトテンプレートを使ったページ分割イメージです。上がタイトル、その下にカスタマイズで追加された分割ページのリンクがあり、その下が本文です。サンプルでは計3ページ(3段落)に分割されており、1ページ目の「段落1」という本文を表示している状態です。 |
「2」という2ページ目のリンクをクリックすると、分割された「段落2」という本文に切り替わります。 |
「All Pages」をクリックすると全ての段落が表示されます。この状態が通常の1エントリー表示と同じです。 |
このエントリーも実験台としてページ分割を施しています。ページリンクはエントリーの上下に設置しています。エントリー先頭がナビゲーションだらけになってるとかいうツッコミはおいといて、エントリーのページ分割を体感頂ければ幸いです。
次にカスタマイズ方法です。
1.プラグインファイルのダウンロード
MT Extensions より MTPaginate をダウンロード(ページ上の方にある「Download」をクリック)。ファイルは任意のフォルダ(デスクトップ等)に保存します。
2.プラグインファイルのアップロード
ダウンロードしたファイルを解凍し、その中の MTPaginate.pl を plugins ディレクトリにアップロードします。
注:この情報はバージョン1.28のものです。
ダウンロードしたファイルを解凍し、その中の MTPaginate ディレクトリを下記のディレクトリ構成になるように plugins ディレクトリに丸ごとアップロードします。
plugins/MTPaginate/lib/MTPaginate.pm
plugins/MTPaginate/MTPaginate.pl
3.(3.2以降の場合)アーカイブURL/アーカイブ・パスの設定
管理メニューの「設定」→「公開」にある「アーカイブの設定」のチェックボックスをチェックします。チェックするとその下に「アーカイブURL」「アーカイブ・パス」の項目が表示されるので、下記のように設定します。
- アーカイブURL:サイトURL/archives/
- アーカイブ・パス:サイト・パス/archives
サイトURLとサイト・パスは同じページに表示されている「サイトURL」「サイト・パス」の内容をそのままあてはめてください。例えばサイトURLが http://www.koikikukan.com/ であれば、アーカイブURLは
http://www.koikikukan.com/archives/
となります。
なおこれらはページ分割を行わない場合も設定することをお勧めします。
4.ファイル名の変更
3.1x まで:管理メニュー左の「ウェブログの設定」→「アーカイブの設定」の下にある「アーカイブ」欄の「アーカイブの種類」が「個別」の「アーカイブ・ファイルのテンプレート」のテキストボックス欄に下記を設定。
3.2x 以降:管理メニュー左の「設定」→「公開」で「アーカイブ・マッピング」欄の「アーカイブ種類」が「エントリー」の「出力フォーマット」のテキストボックス欄に下記を設定。
<$MTArchiveDate format="%Y/%m/%d/%H%M%S"$>.php
上記はMTタグを利用したものですが、3.2x 以降はフォーマットの簡略化が可能になっていますので下記の設定でもOKです。
%y/%m/%d/%h%n%s.php
設定フォーマットは「年/月/日/時分秒.php」というファイルを出力するようになっていますが、エントリーIDを利用した設定、
<$MTEntryID pad="1"$>.php
でも問題ありません(3.2 以降の簡略化フォーマットであれば "%e.php" )。フォーマットの詳細は公式サイトのユーザーズマニュアル・日付タグのフォーマットを参照ください(2005.11.15現在ではMTタグ用のフォーマットのみ記載されています)。
設定したら「変更を保存」をクリックしてください。
5.XML宣言の修正
ページを XHTML文書、例えば XHTML1.0 として適合させている場合、前項と同じ画面の「テンプレートの内容」の1行目に、
<?xml version="1.0" encoding="<$MTPublishCharset$>"?>
という XML 宣言が記述されているケースがあります(記述されていなければこの項目はスキップしてください)が、php ファイルに変更するとサーバではこの行をPHPスクリプトとして誤認識してしまい、PHPエラーとなります。エラーが発生するとページが正常に生成されないため、結果的に真っ白なページが表示される可能性があります。
このような場合、下記のようにPHPスクリプトとして動作するように修正します。
<?php echo('<?xml version="1.0" encoding="<$MTPublishCharset$>"?>') ?>
6.テンプレートの修正
エントリーアーカイブテンプレートにページ分割用タグを設定します。
エントリーを分割するには分割するためのキーワード(セパレータ)が必要ですが、ここでは
- HTML要素
- エントリー内の文字列
- セパレータ
の3種類を使った分割方法について説明します。
6.1 HTML要素でページ分割する
エントリーアーカイブの MTEntryBody の前後に下記の青色部分を追加します。リストはデフォルトテンプレートの場合です。
<MTPaginate>
<h3 class="entry-header"><$MTEntryTitle$></h3>
<div class="entry-content">
<MTPaginateIfMultiplePages>
<div class="paginate">
<MTPaginateIfPreviousPage_>
<a href="<$MTPaginatePreviousPageLink$>" title="前のページへ"><</a>
</MTPaginateIfPreviousPage_>
<$MTPaginateNavigator format_all="All Pages" place_all="after"$>
<MTPaginateIfNextPage_>
<a href="<$MTPaginateNextPageLink$>" title="次のページへ">></a>
</MTPaginateIfNextPage_>
</div>
</MTPaginateIfMultiplePages>
<MTPaginateContent max_words="1" section_start_tag="p">
<div class="entry-body">
<$MTEntryBody$>
</div>
<div id="more" class="entry-more">
<$MTEntryMore$>
</div>
</MTPaginateContent>
</div>
</MTPaginate>
3.2-ja 公開テンプレートの場合は下記の通りです。HTMLは若干異なっていますがページ分割用タグの挿入位置は同じです。
<!-- エントリータイトル -->
<MTPaginate>
<h3 class="entry-header">●<$MTEntryTitle$></h3>
<!-- エントリー -->
<div class="entry-content">
<MTPaginateIfMultiplePages>
<div class="paginate">
<MTPaginateIfPreviousPage_>
<a href="<$MTPaginatePreviousPageLink$>" title="前のページへ"><</a>
</MTPaginateIfPreviousPage_>
<$MTPaginateNavigator format_all="All Pages" place_all="after"$>
<MTPaginateIfNextPage_>
<a href="<$MTPaginateNextPageLink$>" title="次のページへ">></a>
</MTPaginateIfNextPage_>
</div>
</MTPaginateIfMultiplePages>
<MTPaginateContent max_words="1" section_start_tag="p">
<div class="entry-body"><$MTEntryBody$></div>
<!-- 追記 -->
<MTEntryIfExtended>
<div id="more" class="entry-more"><$MTEntryMore$></div>
</MTEntryIfExtended>
</MTPaginateContent>
</div><!-- /entry-content -->
</MTPaginate>
上記リストの15行目(公開テンプレートのリストは18行目)にある、
section_start_tag="p"
が分割対象のタグを指定する部分です。赤色の p は p 要素を示しており、つまりこの例では p 要素で分割する設定になっています。この部分にセパレータにしたい任意のHTML要素名を設定してください。
p 要素はエントリーの編集画面の下にある「改行設定(3.1x以前は「テキストフォーマット」)」で「改行を変換する」という指定になっていれば、空行が p 要素に変換されます。したがって手動で付与する必要はありませんが、上記リストの設定では空行がページ分割のセパレータとなりますので、分割ページに空行を含む場合は他のHTML要素を指定するか、6.2項または6.3項の設定をお勧めします。
また section_start_tag 属性でページ分割する場合、max_words 属性(または max_bytes 属性)の設定が必須のようです。また max_xxx の設定が section_start_tag より優先されるため、これらに大きな値を設定していると、section_start_tag で指定したHTML要素が含まれていても、そこでページ分割されない可能性があります。
本来は両者を使ってページ分割を制御するようですが、とりあえずここでは最小値("1")を設定して常にHTML要素でページ分割される設定にしています。
赤色で示している div 要素はページ分割機能とは直接関係ありませんが、ページリンク用のスタイルを指定する場合を考慮して設定しています。必要に応じて下記のようなCSSをスタイルシート(styles-site.css)に追加してください。6.2項、6.3項も同様です。
.paginate {
text-align: center;
font-size: 9px;
}
6.2 エントリー内の文字列でページ分割する
次にエントリー内の文字列でページ分割する方法です。ここでは section_start 属性を利用します。
6.1項の
<MTPaginateContent max_words="1" section_start_tag="p">
の部分を
<MTPaginateContent max_words="1" section_start="<div class="section">">
に置き換えて設定します。赤色部分がセパレータとなります。この例では
<div class="section">
がセパレータですが、これは
<div class="section">
と同じで、つまりエントリー内に挿入した、class 属性が "section" という div 要素をセパレータとしてページ分割が行われます。タグの「<」 と「>」およびクォート「"」は文字実体参照にします。他の設定は6.1と同様です。
6.3 page_break で分割する
3つめは、エントリーにページ分割専用のセパレータを挿入する方法です。プラグインはこの特定のセパレータ(文字列)をサーチしてページ分割します。
例えば「=====」という文字列をセパレータにする場合、ページ分割したい段落と段落の間に、
段落1
=====
段落2
という具合にセパレータを挿入します(ここではセパレータの上下に空行を挿入することとします)。
6.2項と同様6.1項のリストの、
<MTPaginateContent max_words="1" section_start_tag="p">
の部分を、
<MTPaginateContent page_break="<p>=====</p>">
に置き換えて設定します。赤色部分がセパレータとなります。この例では
<p>=====</p>
がセパレータですが、エントリー登録時、エントリーの編集画面で「改行を変換する」という設定になっている場合、セパレートには p 要素が付与されて、実際のHTMLページでは
<p>=====</p>
となりますので、page_break 属性にはセパレータ文字列の「=====」と、その前後に文字実体参照にした 「<p>」と「</p>」で挟んだ形で設定します。
注意点は、エントリーアーカイブでセパレータが設定されたページを一括表示した時、セパレータは表示されませんが、他のアーカイブやメインページ等ではセパレータが表示されます(他のページでは同じカスタマイズを施していないので当然ですが)。これが6.2項との大きな違いです。
ということで、本項の場合は表示されても差し支えないセパレータを付与するようにしてください。なお6.2項と同様にHTML要素を指定すると
まず画像を使って完成イメージをご説明します。
「2」という2ページ目のリンクをクリックすると、分割された「段落2」という本文に切り替わります。
「All Pages」をクリックすると全ての段落が表示されます。この状態が通常の1エントリー表示と同じです。