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

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

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

サイト内検索機能を徹底解説！ - MovableType.net 活用ブログ

設置方法

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

<$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" も設定しているところです。

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