＞ ＞ ＞ ＞ 検索結果のページ分割（3.3x 版）

検索結果のページ分割（3.3x 版）

Posted at May 31,2007 1:31 AM
Tag：[Counter, Customize, MovableType, MTPaginate, Plugin, SearchResult]

MTPaginate プラグインを利用することで、テキスト検索・タグ検索のページ分割が可能ですが、Movable Type 3.3x ではメインページや他のアーカイブと同じような設定では、例えばデフォルトテンプレートでは 2カラム表示が崩れるという問題が発覚しました。*1

ということで、3.3x 版の検索結果のページ分割方法について改めて説明致します。

なお、テンプレートの修正内容が複雑なため、今回は理由を説明しながらタグの設定を行っていきます。作業をスキップしたい方は1項、２項を実施した後、５項のタグをそのまま検索結果ページの該当部分と置き換えてください。

１．プラグインファイルのダウンロード

プラグイン配布サイト

MT Extensions：MTPaginate

よりプラグインをダウンロードします（ページ上方にある「Download」をクリック）。

２．プラグインファイルのアップロード

ダウンロードしたファイルを解凍し、その中の MTPaginate ディレクトリを下記のディレクトリ構成になるように plugins ディレクトリに丸ごとアップロードします。

plugins/MTPaginate/lib/MTPaginate.pm
plugins/MTPaginate/MTPaginate.pl

３．ページ分割用タグを挿入

検索結果テンプレートを修正していきます。
最初に、ページ分割用のタグ

  • MTPaginate
  • MTPaginateContent
  • MTPaginateSectionBreak

と、ナビゲーション表示の

  • MTPaginateIfMultiplePages
  • MTPaginateIfPreviousPage_
  • MTPaginateNavigator
  • MTPaginateIfNextPage_

を追加します（青色部分）。挿入位置は他の既存タグを参考にしてください。基本的には

  • <MTSearchResults> の前
  • </MTSearchResults> の前後

の辺りです。

　　　　：
<MTIgnore>
    ##########  検索結果表示
</MTIgnore>
 
<MTPaginate mode="cgi">
    <MTPaginateIfMultiplePages>
        <div class="paginate">
            <MTPaginateIfPreviousPage_>
                <a href="<$MTPaginatePreviousPageLink$>" title="previous page link">&#65308;</a>
            </MTPaginateIfPreviousPage_>
            <$MTPaginateNavigator format_all="All Pages" place_all="after"$>
            <MTPaginateIfNextPage_>
                <a href="<$MTPaginateNextPageLink$>" title="next page link">&#65310;</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$>&amp;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> の直前に追加してください。

４．検索結果ヘッダおよび検索結果フッタ用タグを削除

MTSearchResults の中に記述された検索結果ヘッダおよび検索結果フッタ用タグ

  • MTBlogResultHeader
  • MTBlogResultFooter

を削除します（赤色部分）。タグで括られた内容は後で利用しますので、メモ帳にでもペーストしておいてください。

　　　　：
<MTIgnore>
    ##########  検索結果表示
</MTIgnore>
 
<MTPaginate mode="cgi">
    <MTPaginateIfMultiplePages>
        <div class="paginate">
            <MTPaginateIfPreviousPage_>
                <a href="<$MTPaginatePreviousPageLink$>" title="previous page link">&#65308;</a>
            </MTPaginateIfPreviousPage_>
            <$MTPaginateNavigator format_all="All Pages" place_all="after"$>
            <MTPaginateIfNextPage_>
                <a href="<$MTPaginateNextPageLink$>" title="next page link">&#65310;</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$>&amp;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ページ目の最初と最後のページの最後にしか適用されないため、削除します。

５．検索結果ヘッダと検索結果フッタを移動

４項で削除した検索結果ヘッダと検索結果フッタの内容を MTPaginateContent の外側に設定します（青色部分）。注：</MTPaginateContent> の下にもあります。

　　　　：
<MTIgnore>
    ##########  検索結果表示
</MTIgnore>
 
<MTPaginate mode="cgi">
    <MTPaginateIfMultiplePages>
        <div class="paginate">
            <MTPaginateIfPreviousPage_>
                <a href="<$MTPaginatePreviousPageLink$>" title="previous page link">&#65308;</a>
            </MTPaginateIfPreviousPage_>
            <$MTPaginateNavigator format_all="All Pages" place_all="after"$>
            <MTPaginateIfNextPage_>
                <a href="<$MTPaginateNextPageLink$>" title="next page link">&#65310;</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$>&amp;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 の外側に設定することで、検索結果ヘッダと検索結果フッタがページ分割に依存せず常に表示されるようになります。

６．検索結果ヘッダと検索結果フッタに MTSearchResults を適用

５項で設定した検索結果ヘッダと検索結果フッタを MTSearchResults で括ります。

　　　　：
<MTIgnore>
    ##########  検索結果表示
</MTIgnore>
 
<MTPaginate mode="cgi">
    <MTPaginateIfMultiplePages>
        <div class="paginate">
            <MTPaginateIfPreviousPage_>
                <a href="<$MTPaginatePreviousPageLink$>" title="previous page link">&#65308;</a>
            </MTPaginateIfPreviousPage_>
            <$MTPaginateNavigator format_all="All Pages" place_all="after"$>
            <MTPaginateIfNextPage_>
                <a href="<$MTPaginateNextPageLink$>" title="next page link">&#65310;</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$>&amp;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 で括らないと、検索文字列がヒットしなかった場合や、検索文字列が設定されていない場合にも検索結果ヘッダと検索結果フッタが表示されてしまうためです。

７．検索結果ヘッダと検索結果フッタに Counter プラグインを適用

６項で設定した検索結果ヘッダと検索結果フッタを、さらに Counter プラグインのタグを追加します（青色部分）。

　　　　：
<MTIgnore>
    ##########  検索結果表示
</MTIgnore>
 
<MTPaginate mode="cgi">
    <MTPaginateIfMultiplePages>
        <div class="paginate">
            <MTPaginateIfPreviousPage_>
                <a href="<$MTPaginatePreviousPageLink$>" title="previous page link">&#65308;</a>
            </MTPaginateIfPreviousPage_>
            <$MTPaginateNavigator format_all="All Pages" place_all="after"$>
            <MTPaginateIfNextPage_>
                <a href="<$MTPaginateNextPageLink$>" title="next page link">&#65310;</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$>&amp;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 プラグイン」を参照してインストールまで行ってください。
カウンタ系のプラグインは他にも出回ってますので、そちらを利用しても構いません。

これでページ分割の設定は完了です。

８．その他

  • ナビゲーションを後方に設定した場合は下マージンが若干少ないので適宜追加してください。
  • 検索で「現在検索中です。検索が終わるまでお待ちください。」というメッセージが表示されて困る方は「Movable Type の検索でエラーになる問題について」を参照願います。

*1：以前の検索結果ページは 1カラムであったため、たまたま正常に動作しているようにみえていただけかもしれません。

Posted by yujiro   このページの先頭に戻る
関連記事
関連記事をもっと読む
トラックバックURL


トラックバック

≫ 検索結果ページ分割 from MSF-NET
　右上のサイドバーにあるブログ内検索での検索結果はMT4.2のデフォルト値で最大... [続きを読む]

Tracked on July 6, 2009 8:03 PM
コメントする
greeting

*必須

*必須（非表示）


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

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

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

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