MovableType.net のサイト内検索機能をお使いの場合は、下記リンクの記事を御覧ください。

サイト内検索の検索ボックスを1ページ内に２つ設置する方法

今回は、MovaleType.net サイトサーチで同じページ内に２つ検索ボックスを表示する方法をご紹介します。

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

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

その場合は、まず１つ目は通常通り指定された埋め込みコードを貼り付けます。

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

２つ目の検索ボックスは以下のコードを記述します。
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>

上記で検索ボックスは表示されますが、検索結果の表示後に元の検索ワードが２つ目のボックスに挿入されないので、以下のスクリプトを追加します。

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

以上で２つの検索ボックスの設置が完了です。

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

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

その場合は１つ目は通常通り埋め込みコードを設置します。

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

２つ目は以下のように、挿入します。ポイントは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>

さらに、１つ目と同じscriptが重複してしまうので、<div class="mt-site-search-container"><div id="mt-site-search-2" ... </div>内にある以下のscriptを削除します。

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

以上で２つのサーチエンジンの検索ボックスを１ページ内に表示させ、実行させることができます。