• 活用ブログTOP
  • サイト内検索の検索ボックスを1ページ内に2つ設置する方法
hayase hayase

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

閲覧者がウェブサイト内の検索を行える、サイト内検索機能ですがレスポンシブレイアウトなどのデザインの都合上スマホ用とPC用では別の場所に設置したい、というケースがあるかと思います。

今回は同じページ内(HTMLソース内)に2つの検索ボックスを設置する方法をご紹介します。

検索ボックスの設置の詳細については以下の記事をご覧ください。

設置方法

まず1つめの検索ボックスは通常の方法で設置します。例えば以下のような例です。

<$mt:SiteSearchSnippet blog_ids="website,blog" search_result_container="s-result" show_blog_name_on_result="1" form_action="/search.html"$>

これと同じ検索ボックスを2つ目として設置する方法は以下になります。

<$mt:SiteSearchSnippet element_id="search2" blog_ids="website,blog" search_result_container="s-result" show_blog_name_on_result="1" form_action="/search.html" no_script="1" $>
<script>
window.MTNetSearchDataLayer = window.MTNetSearchDataLayer || [];
function MTNetSearch() { return MTNetSearchDataLayer.push(arguments); }
MTNetSearch("createApp", "search2");
</script>

まず、2つ目の検索ボックスを設置したい場所にmt:SiteSearchSnippetを設置します。その際 element_id のアトリビュートでidを指定します(例では"search2")。
MTNetSearch("createApp", "search2")を実行すると、2つ目の検索ボックスが表示されるようになります。

2つ目のmt:SiteSearchSnippetでのポイントとしては、no_script="1" も設定しているところです。

以上で2つの検索ボックスを同一ページ内に設置することができます。