結果が10件くらいならともかく、50件とか、100件とかになっちゃうと、結構大変なことになってきます。
Movable Typeのデフォルトだと、結果は20件まで同じページに表示されますが、21件目以降へのリンクが自動生成されません。
つまり、21件目以降の検索結果が分からない、ということになります。
この『検索結果をページ分割して出力する手順』を以下に書き残す次第。
なぜ思い立ったかと言うと、このブログの検索結果の表示がおかしい事に気が付いたから。
ふつう、自分のブログの記事を自分では検索しませんよね。だから、今まで気が付かなかったのですが、検索結果が複数ヒットした場合でも、最初の1件しか表示されない、という、なんともお粗末な感じになっていたのです。もしかしたら、ご迷惑をおかけしていたかもしれません。ごめんなさい。
特にカスタマイズしなくても、MTのデフォルトだと20件までは表示されるはず。おかしいなぁ、と思って、検索結果テンプレートをチェックしても、特に問題なし。で、よくよく考えてみると、検索テンプレート内に後述するmt:SearchMaxResultsを記述していなかったのでした。チャンチャン。
これでとりあえずすべての検索結果が表示されるようになったのですが、ついでなので、検索結果ページをカスタマイズしてみようかと。完全に行き当たりばったりの思い付きです。
毎度のことですが、すべて自己流なので、詳しい人が見たら無駄なタグとか、間違ったソースを書いているかも知れません。一応は自分の環境での正常動作は確認済みですが、それ以上のテストは行っておりませんので、あしからずご了承ください。
その辺を踏まえた上で、今回は、以下の設定でカスタマイズしていきたいと思います。
- デフォルトの20件表示を解除して、1ページに5件の表示で出力する。
- 5件以上の検索結果があるときには、ページを分割して出力する。
- 分割された各ページへのリンクを出力する。
- このリンクは、前後最大5件の表示とする。例えば、20ページ中7ページ目だったら、2から12のみ表示するように出力する。
- 検索結果が1ページに収まるときは、このリンクを非表示にする。
といった感じです。
mt-config.cgiの編集
mt-config.cgiの結構下の方に、
# The maximum number of results to return in a search. If this is a straight
# search, the number of results is per-blog--if you set MaxResults to 5,
# for example, that would mean a maximum of 5 results for each blog in your
# system. In a new comment search, this is the maximum number of entries
# with new comments.
#
#MaxResults 5
というところがあるので、
#MaxResults 5
のコメントアウトを解除して、
MaxResults 5
にします。
mt:SearchMaxResultsの挿入
言い訳になりますが、前述したように、MTは不親切なので、mt-config.cgiを編集しただけでは検索結果に反映されません。
検索テンプレートに、
<input type="hidden" name="limit" value="<$mt:SearchMaxResults$>" />
を追加してください。
場所は、
<input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" />
の行の下あたりで。これでやっと1ページの表示件数が反映されます。
検索結果ページを分割して出力する
ページ分割するには、検索結果テンプレートを編集していきます。
直接、検索結果テンプレートに書き足してもいいのですが、あとあとの編集のために、このページ分割出力関係をモジュール化しておくことにします。
検索結果テンプレートの、MTSearchResultsタグを閉じたあたりに、
<$MTInclude module="検索結果ページ分割リンク"$>(仮称。モジュールの名前はお好きにどうぞ)
と記入して、新しいモジュールを作成します。
このモジュールに、必要なタグを書き込んでいきます。
以下に見本ソースを書きましたのでご参考に。
このソースでは、検索結果の総ページ数を出力し、ページが分割出力(今回の設定だと、6件以上ヒットした場合)された場合には、ページ数の数字に各々のページへのリンクが付きます。
そして、直接各ページへ飛ぶリンクの前後に、前後1ページへリンクする『前』というリンクと、『次』というリンクも表示させます。
<div class="content-nav">
<MTPagerBlock>
<MTIfCurrentPage>
<MTVar name="__value__" setvar="page_next" value="5" op="+">
<MTVar name="__value__" setvar="page_prev" value="5" op="-">
</MTIfCurrentPage>
</MTPagerBlock>
<mt:IfPreviousResults>
<a href="<$mt:PreviousLink$>" rel="prev" onclick="return swapContent(-1);">< 前</a>
</mt:IfPreviousResults>
<mt:PagerBlock>
<mt:IfCurrentPage>
<$mt:Var name="__value__"$>
<mt:Else>
<MTIf name="__value__" le="$page_next"><MTIf name="__value__" ge="$page_prev"><a href="<$mt:PagerLink$>"><$mt:Var name="__value__"$></a></MTIf></MTIf>
</mt:IfCurrentPage>
</mt:PagerBlock>
<mt:IfMoreResults> <a href="<$mt:NextLink$>" rel="next" onclick="return swapContent();">次 ></a>
</mt:IfMoreResults>
</div>
検索結果が1ページで収まる場合の調整
上記のソースでは、分割された最初のページで『前』、最後のページで『次』は表示されないようになるのですが、検索結果が1ページで収まる場合(今回の設定だとヒットしたのが5件以下)に、リンクが付かないページ番号『1』が表示されてしまいます。
『検索結果は1ページしかありませんよ』というメッセージだと理解してもいいのですが、結果が1ページで収まるのであれば、この『1』は必要ないような気がします。
お好みになってしまいますが、この『1』を消すために、mt:unlessタグを使用して、結果が1ページの時には、リンクを出力しないようにします。
mt:unlessを反映させたソースがこちらです。
<div class="content-nav">
<MTPagerBlock>
<mt:getVar name="__value__" setvar="result_number" />
<MTIfCurrentPage>
<MTVar name="__value__" setvar="page_next" value="5" op="+">
<MTVar name="__value__" setvar="page_prev" value="5" op="-">
</MTIfCurrentPage>
</MTPagerBlock>
<mt:unless name="result_number" eq="1">
<mt:IfPreviousResults>
<a href="<$mt:PreviousLink$>" rel="prev" onclick="return swapContent(-1);">< 前</a>
</mt:IfPreviousResults>
<mt:PagerBlock>
<mt:IfCurrentPage>
<$mt:Var name="__value__"$>
<mt:Else>
<MTIf name="__value__" le="$page_next"><MTIf name="__value__" ge="$page_prev"><a href="<$mt:PagerLink$>"><$mt:Var name="__value__"$></a></MTIf></MTIf>
</mt:IfCurrentPage>
<mt:Unless name="__last__"> </mt:Unless>
</mt:PagerBlock>
<mt:IfMoreResults> <a href="<$mt:NextLink$>" rel="next" onclick="return swapContent();">次 ></a>
</mt:IfMoreResults>
</mt:unless>
</div>
一応、このソースが今回設定したカスタマイズの完成形ということになります。
あとは、細かい調整をお好みでカスタマイズすれば完了ですね。
例えば、数字を少し大きく表示させたければテキストサイズを変更してみるとか、センタリングしたければcenterタグなどで整えるとかすればよろしいのかと。
0 件のコメント:
コメントを投稿