クールにページ分割 for Movable Type – 基本コーディング

SCREAMO - Movable Type Tips - ページ分割:コーディング

Movable Typeに限らず、ブログを長く続けていると、どうしても気になってしまうのがアーカイブページが異常に長くなってしまう点。表示記事数を削ったり、思い切ってタイトルのみ表示してみるのも手だが、この方法ではどうしても閲覧者にエントリー内容がわかりにくくなってしまう。そんな時に是非お勧めするのが、ページ分割表示。Movable Typeの場合は、プラグインを導入して少々タグを書くだけで簡単に分割することができ、スタイルシートを組み合わせれば、ばっちりデザインも可能だ。

ブログをページ分割するメリット

ページを分割する利点は一言で言うとコンパクト化できるということだ。アーカイブページのように、情報をまとめたページは比較的縦に長く伸びていってしまう傾向にあり、せっかくの良質なブログでも、うまく管理・構築していかないと、表示させるだけで精一杯な、とてもテンパったページになってしまい、うまく閲覧者をページに誘導したとしてもそっから先はお先真っ暗な結果になってしまうだろう。なぜならば、アーカイブページを訪れる人は、何かの情報を探し求めている場合が多いからだ。そして整理し切れてない、ただ単に情報が膨大に表示しているだけのページを見ただけで、嫌気がさして逃げ帰ってしまうのが、インターネットを徘徊する人々の標準的行動なはずだ。

Google Page分割
Yahoo Page分割

そこで、今回はプラグインを使い、アーカイブページを分割してみる。そうするとページが短くなりコンパクトになる。見た目はもちろんすっきりしてユーザビリティも向上するし、ページ数を表示させてボリューム感は維持できるばかりか、作り込みによっては倍増するかもしれない。また、ページ数が増加するのでSEO的にもかなり有利になることだろう。もうウハウハだ。

ページ分割というのを知らない人もいるだろう。右の画像はサンプルで、超有名検索サイトの表示結果の下部に表示される部分。「あぁ!このことか!」とピンと来た人も多いことだろう。というか、大部分の人はこの画像を見れば、意味、仕組みが理解できたと思うので、これ以上は何も言うまい。さぁ!早速コーディングだ!

プラグイン:PageBute

その前に、まずはプラグインの導入から始めないといけない。今回利用するのは「PageBute」というプラグイン。このプラグインは、静的なページ分割を行うことがMovable Typeプラグインで「SKYARC System」が無料で開発・配布していて、Movable Type 4にも対応しているなど、とてもありがたいプラグイン。導入するには、ここからファイルをダウンロードし、解凍後に作成された「PageBute.pl」を、Movable Typeの「plugins」ディレクトリにアップロード。他のプラグイン同様のインストール方法なので簡単に導入できる。

分割できるページは <MTEntries> を書くことができるテンプレートなら問題なく分割可能で、主にトップページやカテゴリーページ、期間別アーカイブページなどだ。コーディングの仕方によっては、様々な用途に使うことができるが、前記したページに使用する場合が大半だろう。ちなみにシステムテンプレートには利用できないので注意されたし。検索結果やコメント・プレビューや検索結果のテンプレートがそうだ。

ちなみに、分割されるページのファイル名は、最初のページは変わりなく、2ページ目、3ページ目は「index_2.html」「index_3.html」と、ファイル名の後ろに"アンダーバー"+"数字"+"拡張子"が付く仕組み。もちろんPHPの場合は拡張子は「.php」が付く。

今度こそコーディングだ!

SCREAMOのカテゴリーページ月別アーカイブページのどこでもいいので、ページ下部の分割部分を観て欲しい。そして、数字ボタンや矢印ボタンをクリックして具合を確かめてみるべし。お気づきになっただろうか? 1ページ目の場合は左矢印(戻るボタン)が表示されず、中断に位置するページの場合は、左右に矢印(戻る、進むボタン)、最後のページの場合は右矢印(進むボタン)が表示されていない。つまり不必要なナビゲーションは、プラグインがページ生成時に自動で省いてくれているからだ。結構気の利いた、そしてスパイシーなプラグイン「PageBute」を使って、早速コーディングしていってみよう。

サンプルコード1

<div>
<MTPageContents count="5">
<MTEntries>
<$MTEntryTrackbackData$>
<$MTInclude module="Entry Summary"$>
<$MTPageSeparator$>
</MTEntries>
</MTPageContents>
</div>

上記のコードはエントリーを一覧させる部分。<MTEntries>~</MTEntries> の前に <MTPageContents> を書き、最後に</MTPageContents>でシメる。その時、<MTPageContents>のアトリビュート「count="※"」には1ページに表示させたいエントリーの数を記入する。たとえば5個づつエントリーを表示させるページにしたい場合は<MTPageContents count="5">と表記するのだ。

<$MTPageSeparator$>という名のファンクションタグは、<MTEntries>~</MTEntries> の間に入れておけば問題はない。サンプルコードの <$MTInclude module="Entry Summary"$> の前に書いても、後ろに書いても結果は変わらずだが、環境によって左右されるかもしれないので、</MTEntries>の直前に書いておくのが無難。深く詮索するのは無用というものだ。

サンプルコード2

<div>
<MTIfPageBefore>
<span><$MTPageBefore delim="前に戻る"$></span>
</MTIfPageBefore>

<span><$MTPageLists delim=", "$></span>

<MTIfPageNext>
<span><$MTPageNext delim="次に進む"$></span>
</MTIfPageNext>
</div>

エントリー表示部分のコーディングが完了したら次はナビゲーション部分のコーディングに取りかかろう。サンプルコード2を見てもらえばわかるが、少々エントリー部分よりも複雑になっているが、よくよく仕組みを理解すれば難しくはない。恐れることはないぞ!

<MTIfPageBefore>〜</MTIfPageBefore> の間には「前に戻る」部分のコードを表記する。その間に表記が必須な <$MTPageBefore delim="※"$> は、リンク部分がもろに投入されることになる。アトリビュート「delim="※"」には、リンクテキストを表記でき、たとえば"※"を「前に戻る」にすることで、「前に戻る」をクリックすると、前のページに戻ることができるようになる(そのまんま!)ので、できるだけ わかりやすい表記にすることをお勧めする。なお、表記しない場合は自動的に「<<」が表示される。

次の <$MTPageLists$> タグは、数字部分をリンク付きで出力する部分で、アトリビュート「delim="※"」の※部分は区切り文字を入れることができ、", "と入れることによって、「1, 2, 3, 4, 5, 6」といった、わかりやすくページ番号を並べることができる。なお、表記しない場合は自動的に「&nbsp;」が投入され、半角スペースが表示される。

<MTIfPageNext>〜</MTIfPageNext> は、「次に進む」部分のコードで、仕組みは「前に戻る」のと同じだ。<$MTPageNext$> が中に表記しよう。アトリビュートも「前に戻る」と意味は同様だが、表記しない場合の自動的に表示される内容は「>>」になる。

尚、上記コードは、<MTPageContents>~<MTPageContents> のブロックタグ外に表記することを忘れずに。

機能的には動作するページ分割が完成

これでページ分割のコーディングは完了。早速再生して結果を堪能してみよう。どうスカ? うまく分割はできただろうか。だがしかし、このままでは見づらいし、ちょっとかっこ悪いと思った輩! 君の直感は良い線行ってます。せっかくのページ分割なんだから、もっと装飾して格好良くしたいというのは許される範囲の要求だ!

よし、次回はコーディングを発展させながら、スタイルシートを使ってデザインしていく方法を解説しようと思う。

SCREAMO Page分割

related story