同じページに検索ボックスを2つ表示する際には、挿入するソースコードをカスタマイズする必要があります。

MovableType.net のサイト内検索機能をお使いの場合は、サイト内検索の検索ボックスを1ページ内に２つ設置する方法をご参照ください。

同じサーチエンジンの検索ボックスを２つ設置する場合

同じサーチエンジンの検索ボックスを、「グローバルメニューと検索結果ページの上部に表示したい…」、「PC用とスマホ用で違う場所に２つ表示したい」という場合に活用できます。

1. １つ目の検索ボックスを設置したい場所に、通常通り指定された埋め込みコードを貼り付ける

   <div class="mt-site-search-container">〜</div>

2. ２つ目の検索ボックスを設置したい場所に、以下のコードを記述する
   actionに関してはサーチエンジンの設定にあわせて記述してください。

   <div id=“mt-site-search-container2">
   <form action=“/search-resut.html"><input name=“mtssq" /><button class=“mt-site-search-form__button" type=“submit">検索</button></form>
   </div>

3. 以下のスクリプトを追加する

   <script>
   (function() {
     window.MTNetSearchDataLayer = window.MTNetSearchDataLayer || [];
     function MTNetSearch() { return MTNetSearchDataLayer.push(arguments); }
     MTNetSearch(“registerHandler", function(data) {
       var secondarySearchForm = document.getElementById(“mt-site-search-container2");
       var input = secondarySearchForm.getElementsByTagName(“input")[0];
       input.value = data.query;
     });
   })();
   </script>

２つのサーチエンジンの検索ボックスを１ページ内に表示する場合

グローバルメニューには常にサイト全体の検索ボックス、特定のページ配下ではそれとは別の検索対象の範囲が絞られた検索ボックス、といったように１ページ内に２つ設置する場合、以下の手順を行ってください。

1. １つ目の検索ボックスを設置したい場所に、通常通り指定された埋め込みコードを貼り付ける
   

   <div class="mt-site-search-container"><div id="mt-site-search" ... </div>

2. ２つ目の検索ボックスを設置したい場所に、以下のコードを記述する
   「id」が重複しないように変更します。

   <div class="mt-site-search-container"><div id="mt-site-search-2" ... </div>
   <script>
   window.MTNetSearchDataLayer = window.MTNetSearchDataLayer || [];
   function MTNetSearch() { return MTNetSearchDataLayer.push(arguments); }
   MTNetSearch("createApp", "mt-site-search-2", {
     queryKey: "mtssq2",
   });
   </script>

3. １つ目と同じ script が重複しないよう、以下の script を削除する
   以下のスクリプトは、<div class="mt-site-search-container"><div id="mt-site-search-2" ... </div>内にあります。
   

   <script src="https://site-search.movabletype.net/v1/assets/20445/js/search.js" id="mt-site-search-script" async defer></script>