MovableType.net 活用ブログ

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

サイト内検索の検索ボックスを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つの検索ボックスを同一ページ内に設置することができます。

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

アカウント作成は無料!

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

アカウント作成