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

Movable Type 7 ManualMovable Type 7 マニュアル

コンテンツタイプの検索結果ページを用意する

最終更新日: 2020.10.09

コンテンツの検索結果ページは「コンテンツの検索結果」テンプレート(type が cd_search_results)をもとに表示されます。 検索結果は MTSearchResults タグの中で表示します。検索結果のみであれば、コンテンツタイプに関するテンプレートタグをこのブロックタグの中に記述することで検索結果画面として機能します。 また、検索関連のテンプレートタグは、mt-search.cgi の検索と同じものが使用できます。

「検索結果」テンプレートで使用される主なテンプレートタグ

  • MTSearchResults … 検索にヒットしたコンテンツデータの情報を表示するために使用します。
  • MTNoSearch … 何もキーワードを入力せずに検索したときに検索結果画面にメッセージを表示する場合に使用します。
  • MTNoSearchResults … 指定した条件での検索で 1 件もヒットしなかったときにメッセージを表示する場合に使用します。
  • MTIfMoreResults … 検索結果が 1 ページあたりに表示する件数より多い場合に真となり、囲んだ内容を処理します。
  • MTIfPreviousResults … 検索結果が複数ページにわたっている状態で、現在表示中の検索結果ページにひとつ前のページが存在する場合に真となり、囲んだ内容を処理します。
  • MTSearchResultsHeader … 検索にヒットしたコンテンツデータのうち、一番最初の結果を表示するときに、ヘッダー要素としてブロックタグ内の内容を出力します。
  • MTSearchResultsFooter … 検索にヒットしたコンテンツデータのうち、一番最後の結果を表示するときに、フッター要素としてブロックタグ内の内容を出力します。

「コンテンツの検索結果」テンプレートの主な構造

<mt:SearchResults>

<mt:SearchResultsHeader>
(検索にヒットした場合に最初に 1 度だけ処理される内容)
</mt:SearchResultsHeader>

(検索にヒットしたコンテンツデータで表示したい内容)

<mt:SearchResultsFooter>
(検索にヒットした場合に最後に 1 度だけ処理される内容)

<mt:IfMoreResults>
(次の検索結果ページに関する内容)
</mt:IfMoreResults>

<mt:IfPreviousResults>
(ひとつ前の検索結果ページに関する内容)
</mt:IfPreviousResults>

</mt:SearchResultsFooter>

</mt:SearchResults>

<mt:NoSearchResults>
(1 件もヒットしなかった場合に表示する内容)
</mt:NoSearchResults>

<mt:NoSearch>
(何もキーワードを入力せずに検索された場合に表示する内容)
</mt:NoSearch>

「コンテンツの検索結果」テンプレートのサンプル

ここでは、コンテンツデータのタイトルとして「Title」コンテンツフィールド、本文として「Text」コンテンツフィールドを使用しています。

<!DOCTYPE html>
<html lang="<$mt:BlogLanguage$>">
  <head>
    <script type="text/javascript">
      var user = <$mt:UserSessionState$>;
    </script>
    <meta charset="<$mt:PublishCharset$>">
    <title><$mt:SiteName encode_html="1"$> - 検索結果</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="<$mt:Link template="styles" encode_html="1"$>">
    <mt:Assets tag="@SITE_FAVICON" limit="1"><link rel="shortcut icon" href="<$mt:AssetURL encode_html="1"$>"></mt:Assets>
    <link rel="start" href="<$mt:SiteURL encode_html="1"$>">
    <link rel="alternate" type="application/atom+xml" title="Recent ContentData" href="<$mt:Link template="feed_recent"$>" />
    <$mt:CanonicalLink$>
    <$mt:StatsSnippet$>
    <script src="<$mt:Link template="javascript"$>"></script>
    <script>
<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-main');
      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>
    <div id="container">
      <div id="container-inner">
        <div id="content">
          <div id="content-inner">
            <div id="search-results-main" class="main" role="main">
<mt:SetVarTemplate id="cd_search_results" name="cd_search_results">
  <mt:SearchResults>
    <mt:SearchResultsHeader>
              <section id="search-results">
                <span id="current-page" class="hidden"><$mt:CurrentPage$></span>
                <h1 class="title">
      <MTIfStatic><mt:IfStraightSearch>
                  「<$mt:SearchString$>」と一致するもの
      </mt:IfStraightSearch></MTIfStatic>
      <mt:IfTagSearch>
                  タグ「<$mt:SearchString$>」が付けられているもの
      </mt:IfTagSearch>
                </h1>
    </mt:SearchResultsHeader>
                <article id="entry-<$mt:ContentID$>" class="entry-asset entry asset hentry" itemscope itemType="http://schema.org/BlogPosting">
                  <div class="asset-header">
                  <h2 class="asset-name entry-title" itemprop="name"><a href="<$mt:ContentPermalink encode_html="1"$>"><mt:ContentField content_field="Title"><$mt:ContentFieldValue$></mt:ContentField></a></h2>
                    <footer class="asset-meta">
                      <ul class="asset-meta-list">
                        <li class="asset-meta-list-item">投稿日:<time datetime="<$mt:ContentDate format_name="iso8601"$>" itemprop="datePublished"><$mt:ContentDate format="%x"$></time></li>
                        <li class="asset-meta-list-item">by <span class="author entry-author vcard"><$mt:ContentAuthorLink show_hcard="1"$></span></li>
                <mt:IfArchiveTypeEnabled archive_type="ContentType-Category" content_type="コンテンツタイプ名、ID、ユニークID のいずれかを指定">
                  <mt:If tag="CategoryLabel">
                        <li class="asset-meta-list-item">カテゴリ: <a itemprop="articleSection" rel="tag" href="<$mt:CategoryArchiveLink$>"><$mt:CategoryLabel$></a></li>
                  </mt:If>
                </mt:IfArchiveTypeEnabled>
                      </ul>
                    </footer>
                  </div>
                  <div class="asset-content entry-content" itemprop="articleBody">
                    <mt:ContentField content_field="Text"><$mt:ContentFieldValue$></mt:ContentField>
                  </div>
                  <div class="entry-more-link">
                    <a href="<$mt:ContentPermalink encode_html="1"$>" itemprop="url">コンテンツページへ</a>
                  </div>
                </article>
    <mt:SearchResultsFooter>
              </section>
              <nav class="pagination">
                <ul>
      <mt:IfMoreResults>
                  <li><a rel="prev" href="<$mt:NextLink encode_html="1"$>" onclick="return swapContent();">過去のコンテンツ</a></li>
      </mt:IfMoreResults>
      <mt:IfPreviousResults>
                  <li><a rel="next" href="<$mt:PreviousLink encode_html="1"$>" onclick="return swapContent(-1);">新しいコンテンツ</a></li>
      </mt:IfPreviousResults>
                </ul>
              </nav>
    </mt:SearchResultsFooter>
  </mt:SearchResults>
</mt:SetVarTemplate>

<$mt:Var name="cd_search_results"$>

<mt:NoSearchResults>
              <section>
                <h1 class="search-results-header">
  <MTIfStatic><mt:IfStraightSearch>
                  「<$mt:SearchString$>」と一致するもの
  </mt:IfStraightSearch></MTIfStatic>
  <mt:IfTagSearch>
                  タグ「<$mt:SearchString$>」が付けられているもの
  </mt:IfTagSearch>
                </h1>
                <p>「<$mt:SearchString$>」と一致する結果は見つかりませんでした。</p>
              </section>
</mt:NoSearchResults>

<mt:NoSearch>
              <section>
                <h1 class="search-results-header">例</h1>
                <p>すべての単語が順序に関係なく検索されます。フレーズで検索したいときは引用符で囲んでください。</p>
                <pre><code>"movable type"</code></pre>
                <p>AND、OR、NOTを入れることで論理検索を行うこともできます。</p>
                <pre><code>個人 OR 出版</code></pre>
                <pre><code>個人 NOT 出版</code></pre>
              </section>
</mt:NoSearch>

<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>
        </div>
      </div>
    </div>
    <script src="<$mt:StaticWebPath encode_html="1"$>jquery/jquery.min.js"></script>
  </body>
</html>
目次