MovableType.net 活用ブログ

MovableType.net の新機能の使い方や、ウェブサイトの構築・運用に役立つTIPSを紹介しています。

MovableType.net サイトサーチで1つのページに検索ボックスを2つ設置する方法

こちらは MovableType.net サイトサーチ に関する記事です。

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

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

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

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

その場合は、まず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>

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

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

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

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

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

その場合は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");
</script>

さらに、1つ目と同じ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>

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

このエントリーをはてなブックマークに追加

アカウント作成は無料!

同じアカウントでウェブサイトをいくつでも作成でき、
作成したウェブサイト毎に14日間無料で利用可能です。

アカウント作成