Movable Type CMSプラットフォーム Movable Type
ドキュメントサイト

Movable Type 5.1 ManualMovable Type 5.1 マニュアル

検索ページのカスタマイズ

最終更新日: 2017.10.06

検索フォームのカスタマイズ

検索フォームは、"検索"ウィジェットテンプレートで出力されます。

検索ウィジェットでは、次のように、そのブログのみを検索するように設定されています。

<input type="hidden" name="IncludeBlogs" value="<$mt:BlogID$>" />

IncludeBlogs パラメータにブログIDを追加することで、検索対象のブログを指定します。

<input type="hidden" name="IncludeBlogs" value="1,2,4" />

この例では、ブログID が 1,2,4 のブログを検索対象とするフォームです。

<form method="get" action="<$mt:CGIPath$><$MTSearchScript$>">
    <input type="text" id="search" name="search" value="<$mt:SearchString$>" />
    <input type="hidden" name="IncludeBlogs" value="1,2,4" />
    <input type="hidden" name="blog_id" value="1" />
    <input type="submit" value="GO" />
</form>
MT5.1
以降では、blog_id パラメータを指定すると、そのブログのテンプレートを検索結果の表示に利用します。blog_id を指定しない場合は、IncludeBlogs で最初に指定したブログのテンプレートを利用します。

Movable Type で管理している全てのブログを検索の対象にする

管理しているブログ全てを検索の対象にしたい場合は、検索フォームの IncludeBlogs を削除し、検索対象の絞り込みをしないようにします。

<form method="get" action="<$mt:CGIPath$><$MTSearchScript$>">
          <input type="text" id="search" name="search" value="<$mt:SearchString$>" />
          <input type="submit" value="GO" />
</form>

特定のブログを検索対象から外す

全てのブログ検索から、特定のブログ検索しないようにするには、環境設定ファイル (mt-config.cgi) に、環境変数 ExcludeBlogs を指定します。検索に含めないブログの BlogID を設定します。

ExcludeBlogs 1,2,4,7,10

この例では、BlogID が 1、2、4、7、10 のブログは検索の対象にはなりません。ただし、検索フォームの IncludeBlogs パラメーターで直接指定すると、検索できるようになります。

その他の検索パラメーター

検索フォームにさまざまなパラメーターを設定することで、検索機能をカスタマイズできます。次は、すべてのパラメーターを設定したフォームの例です。

<form method="post" action="<$MTCGIPath$><$MTSearchScript$>">
<dl>

<!-- 検索条件 -->
<dt><label for="search">検索条件</label></dt>
<dd><input size="30" name="search" value="<$MTSearchString$>" /></dd>

<!-- 検索範囲に関するパラメーター -->
<dt><label for="ExcludeBlogs">検索の対象外にするブログ</label></dt>
<dd>
<MTBlogs>
<input type="checkbox" name="ExcludeBlogs" value="<$MTBlogID$>" /> <$MTBlogName$>
</MTBlogs>
</dd>

<!-- 検索結果に関するパラメーター -->
<dt><label for="SearchSortBy">並べ替え基準</label></dt>
<dd>
<select name="SearchSortBy">
<option value="created_on">作成日時</option>
<option value="title">タイトル</option>
</select>
</dd>

<dt><label for="ResultDisplay">並べ替え順</label></dt>
<dd>
<select name="SearchResultDisplay">
<option value="ascend">昇順</option>
<option value="descend">降順</option>
</select>
</dd>

</dl>

<input type="submit" value="Search" /><br />

</form>

なお、これらのパラメーターは、環境設定ファイルmt-config.cgiに設定しておくことで、システム全体に共通の設定ができます。

このパラメーターでは設定できませんが、検索結果の個数を限定する"MaxResults"を>、mt-config.cgiに指定することが可能です。

MaxResults 20

検索結果のカスタマイズ

ウェブサイトやブログの検索結果ページ

検索結果は、"検索結果"システムテンプレートで出力されます。

  1. ウェブサイトまたはブログのサイドメニューから、 [デザイン] の [テンプレート] を選択します。
  2. [ウェブサイトテンプレートの管理] または [ブログテンプレートの管理] 画面で、 "システムテンプレート" の [検索結果] をクリックします。

検索結果テンプレートの内容は以下の通りです。

head部分

検索画面に必要な JavaScript の定義をおこないます。
getResults は、ajax 検索に利用される JavaSctipt です。検索結果が1ページにより多いの場合に利用されます。
swapContent は、ページ送り用の JavaScript です。検索結果が1ページより多いの場合と、そうでない場合で定義がかわります。

<head>

    <script type="text/javascript">
    /* <![CDATA[ */
    var user = <$mt:UserSessionState$>;
    /* ]]> */
    </script>

    <$mt:Include module="HTMLヘッダー"$>
    <title><$mt:BlogName encode_html="1"$>: 検索結果</title>

    <mt:Ignore>Below Javascript adds ajax search capability</mt:Ignore>


    <script type="text/javascript">
    /* <![CDATA[ */

    <mt:IfMoreResults>

    function getResults(page) {
        page = parseInt(page);
        if (timer) window.clearTimeout(timer);
        var xh = mtGetXmlHttp();
        if (!xh) return false;
        var res = results[page];
        if (!res) return;
        var url = res['next_url'];
        if (!url) return;

        xh.open('GET', url + '&format=js', true);
        xh.onreadystatechange = function() {
            if ( xh.readyState == 4 ) {
                if ( xh.status && ( xh.status != 200 ) ) {
                    // error - ignore
                } else {
                    try {
                        var page_results = eval("(" + xh.responseText + ")");
                        if ( page_results['error'] == null )
                            results[page + 1] = page_results['result'];
                    } catch (e) {
                    }
                }
            }
        };
        xh.send(null);
    }

    function swapContent(direction) {
        if ( direction == undefined ) direction = 1;
        var page_span = document.getElementById('current-page');
        if (!page_span) return true;
        var next_page = direction + parseInt(page_span.innerHTML);
        var res = results[next_page];
        if (!res) return true;
        var content = res['content'];
        if (!content) return true;
        var div = document.getElementById('search-results');
        if (!div) return true;
        div.innerHTML = content;
        timer = window.setTimeout("getResults(" + next_page + ")", 1*1000);
        window.scroll(0, 0);
        return false;
    }

    <mt:Else>
        <mt:IfPreviousResults>

    function swapContent(direction) {
        return true;
    }

        </mt:IfPreviousResults>
    </mt:IfMoreResults>

    /* ]]> */
    </script>

</head>
ページヘッダー部分表示
<body id="<$mt:BlogThemeID$>" class="mt-search-results <$mt:Var name="page_layout"$>">
    <div id="container">
        <div id="container-inner">

            <$mt:Include module="バナーヘッダー"$>

            <div id="content">
                <div id="content-inner">


                    <div id="alpha">
                        <div id="alpha-inner">
検索結果表示

実行した検索の結果を表示するブロックタグ MTSearchResults を利用して、検索結果を表示しています。
MTSearchResultsHeader では、deMTIfStraightSearch, MTIfTagSearch を利用して、キーワード検索の場合とタグ検索の場合の表示を切り替えるように設定されています。
記事の一覧表示は、テンプレートモジュールの "ブログ記事の概要" を利用しています。
MTSearchResultsFooter では、ページ送りを表示しています。MTIfPreviousResults, MTIfMoreResults をそれぞれ利用して "前"、"次" のリンクを作成しています。

<mt:Ignore><!--
    Below is the block to show search results.
    This makes an independent block to support
    Ajax-based background retrieval of the next search results.
--></mt:Ignore>

<mt:SetVarTemplate id="search_results" name="search_results">  
<mt:SearchResults>
    <mt:SearchResultsHeader>
                            <div id="search-results">
                                <span id="current-page" class="hidden"><$mt:CurrentPage$></span>
                                <h1 id="page-title" class="search-results-header">
        <mt:IfStraightSearch>
                                    「<$mt:SearchString$>」と一致するもの
        </mt:IfStraightSearch>
        <mt:IfTagSearch>
                                    タグ「<$mt:SearchString$>」が付けられているもの
        </mt:IfTagSearch>
                                </h1>
                                <div class="search-results-container autopagerize_page_element">
    </mt:SearchResultsHeader>
                                    <$mt:Include module="ブログ記事の概要" hide_counts="1"$>
    <mt:SearchResultsFooter>
                                </div><div class="autopagerize_insert_before"></div>


    <mt:Ignore><!-- Used with the ajax search capability of the new search class --></mt:Ignore>

                                <div class="content-nav">
                                    <mt:IfPreviousResults>
                                        <a href="<$mt:PreviousLink$>" rel="prev" onclick="return swapContent(-1);">&lt; 前</a>&nbsp;&nbsp;
                                    </mt:IfPreviousResults>
                                    <mt:PagerBlock>
                                        <mt:IfCurrentPage>
                                            <$mt:Var name="__value__"$>
                                        <mt:Else>
                                            <a href="<$mt:PagerLink$>"><$mt:Var name="__value__"$></a>
                                        </mt:IfCurrentPage>
                                        <mt:Unless name="__last__">&nbsp;</mt:Unless>
                                    </mt:PagerBlock>
                                    <mt:IfMoreResults>
                                        &nbsp;&nbsp;<a href="<$mt:NextLink$>" rel="next" onclick="return swapContent();">次 &gt;</a>
                                    </mt:IfMoreResults>
                                </div>
                            </div>
    </mt:SearchResultsFooter>
</mt:SearchResults>
</mt:SetVarTemplate>
検索結果が見つからなかった場合の表示

検索結果が見つからなかった場合に表示する部分を生成しています。

<mt:Ignore><!-- Display search results constructed in the block above --></mt:Ignore>
<$mt:Var name="search_results"$>


<mt:Ignore><!-- Display no results message --></mt:Ignore>

<mt:NoSearchResults>
                            <h1 id="page-title" class="search-results-header">
    <mt:IfStraightSearch>
                                「<$mt:SearchString$>」と一致するもの
    </mt:IfStraightSearch>
    <mt:IfTagSearch>
                                タグ「<$mt:SearchString$>」が付けられているもの
    </mt:IfTagSearch>
                            </h1>
                            <p>「<$mt:SearchString$>」と一致する結果は見つかりませんでした。</p>
</mt:NoSearchResults>
検索を行わなかった場合 (初期表示) の表示部分

検索ページの初期表示を生成しています。Movable Type の検索 CGI に、検索キーワードが渡されなかった場合に表示されます。

<mt:Ignore><!-- Display instructions for searching if search script was accessed without a query --></mt:Ignore>

<mt:NoSearch>
                            <h1 id="page-title" class="search-results-header">例</h1>
                            <p>すべての単語が順序に関係なく検索されます。フレーズで検索したいときは引用符で囲んでください。</p>
                            <blockquote>
                                <p><code>"movable type"</code></p>
                            </blockquote>
                            <p>AND、OR、NOTを入れることで論理検索を行うこともできます。</p>
                            <blockquote>
                                <p><code>個人 OR 出版</code></p>
                                <p><code>個人 NOT 出版</code></p>
                            </blockquote>
</mt:NoSearch>
ページ送り用 JavaScript
<mt:Ignore><!-- Used with the ajax search capability of the new search class --></mt:Ignore>
<mt:IfMoreResults>

<script type="text/javascript">
<!--
var div = document.getElementById('search-results');
var results = {
    '<$mt:CurrentPage$>': {
        'content': div.innerHTML,
        'next_url': '<$mt:NextLink$>'
    }
};
var timer = window.setTimeout("getResults(" + <$mt:CurrentPage$> + ")", 1*1000);
//-->
</script>

</mt:IfMoreResults>
ページフッター部分表示
</div>
                    </div>
                    <$mt:Include module="サイドバー"$>
                </div>
            </div>

            <$mt:Include module="バナーフッター"$>

        </div>
    </div>
</body>
</html>

システム全体の検索結果ページ

アプリケーションディレクトリの下に、search_templates ディレクトリがあります。このディレクトリ内の default.tmpl ファイルをカスタマイズします。新規のコメントを検索の対象にする場合は、comments.tmpl ファイルです。FTP プログラム等でローカルにバックアップをとり、通常のテンプレートの変更と同様にカスタマイズしていきます。

代替テンプレート

複数のブログで、検索結果のテンプレートを共通にする方法に、代替テンプレートがあります。これは、前述の方法と異なり、検索フォームの中で、検索結果テンプレートを指定するものです。代替テンプレートの設定は、次のとおりです。

代替テンプレートの作成

標準の検索結果テンプレートを元に、テンプレートを作成します。

代替テンプレートのアップロード

作成したテンプレートを、FTPクライアント等でアップロードします。アップロード先は、アプリケーション・ディレクトリの下の、search_templates ディレクトリです。

代替テンプレートの登録

代替テンプレートの登録は、環境設定ファイル (mt-config.cgi) に、環境変数 SearchAltTemplate を使って設定を追加します。たとえば、作成したテンプレートのファイル名が、altsearch.tmplだった場合、mt-config.cgiに次のとおり記述します。

SearchAltTemplate altsearch altsearch.tmpl

ファイル名 altsearch.tmpl の前の altsearch は代替テンプレートの名前で、検索フォームの設定で利用します。

Movable Type 4.15 以前のバージョンでは、AltTemplate を使用してください。

リファレンス
製品別マニュアル
旧バージョン
リリースノート
リリースノート TOP

よく検索されているキーワード

サイト内検索

よく検索されているキーワード

MTを使う

MTを知る

MTを導入する