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

Movable Type 7 ManualMovable Type 7 マニュアル

記事とウェブページの検索結果ページを用意する

最終更新日: 2020.10.01

検索結果ページは「検索結果」テンプレート（type が search_results）をもとに表示されます。 検索結果は MTSearchResults タグの中で表示します。検索結果のみであれば、記事やウェブページに関するテンプレートタグをこのブロックタグの中に記述することで検索結果画面として機能します。

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

  • 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>

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

<!DOCTYPE html>
<html lang="<$mt:BlogLanguage$>">
  <head>
    <script type="text/javascript">
      var user = <$mt:UserSessionState$>;
    </script>
    <meta charset="<$mt:PublishCharset$>">
    <title><$mt:BlogName 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:BlogURL encode_html="1"$>">
    <link rel="alternate" type="application/atom+xml" title="Recent Entries" 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="search_results" name="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:EntryID$>" 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:EntryPermalink encode_html="1"$>"><$mt:EntryTitle$></a></h2>
                    <footer class="asset-meta">
                      <ul class="asset-meta-list">
                        <li class="asset-meta-list-item">投稿日:<time datetime="<$mt:EntryDate format_name="iso8601"$>" itemprop="datePublished"><$mt:EntryDate format="%x"$></time></li>
                        <li class="asset-meta-list-item">by <span class="author entry-author vcard"><$mt:EntryAuthorLink show_hcard="1"$></span></li>
                <mt:IfArchiveTypeEnabled archive_type="Category">
                  <mt:If tag="EntryPrimaryCategory">
                        <li class="asset-meta-list-item">カテゴリ: <mt:EntryPrimaryCategory><a itemprop="articleSection" rel="tag" href="<$mt:CategoryArchiveLink$>"><$mt:CategoryLabel$></a></mt:EntryPrimaryCategory></li>
                  </mt:If>
                </mt:IfArchiveTypeEnabled>
                      </ul>
                    </footer>
                  </div>
                  <div class="asset-content entry-content" itemprop="articleBody">
                    <$mt:EntryBody$>
                  </div>
                  <div class="entry-more-link">
                    <a href="<$mt:EntryPermalink 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="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>
目次
リファレンス
製品別マニュアル
旧バージョン
リリースノート
リリースノート TOP

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

サイト内検索

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

MTを使う

MTを知る

MTを導入する