Stingerでページ上部に検索フォームを表示する方法
Stingerテーマでスマホで開いた時にページの一番上(ナビゲーションバーの位置)に検索フォーム(検索窓)を表示する方法です。
パターンは大きく分けて2つあります。
1.ページ上部のメニューボタン(アコーディオン)の代わりに検索フォームを表示する
2.ページ上部のメニューボタン(アコーディオン)を押した時に検索フォームを表示する
この2つです。
現時点(2016/08/25)では基本的にStinger5でもStinger7でもStinger Plus+でも有効。
1.ページ上部のメニューボタン(アコーディオン)の代わりに検索フォームを表示する方法
まずページ上部のメニューボタンを消します。
WordPress管理画面からstyle.css(スタイルシート)を開いて、その一番下に以下のコードを貼り付けましょう。
/*--------------------------------
アコーディオン非表示
---------------------------------*/
.acordion
{
display: none;
}
これで上部のメニューボタンは表示されなくなります。
参考記事Stingerで上部メニューボタン(アコーディオン)を非表示にする方法
次にheader.php(テーマヘッダー)を開いて、「アコーディオン」という語句を検索、以下のような部分を探しましょう。※使っているStingerのバージョンによって若干の差異がある場合があります
<!-- アコーディオン -->
<nav id="s-navi" class="pcnone">
<dl class="acordion">
<dt class="trigger">
<p><span class="op"><i class="fa fa-bars"></i> MENU</span></p>
</dt>
<dd class="acordion_tree">
<ul>
<?php wp_nav_menu(array('theme_location' => 'navbar'));?>
</ul>
<div class="clear"></div>
</dd>
</dl>
</nav>
<!-- /アコーディオン -->
この一番下の</nav>の直前に検索フォームの呼び出しコードを追記します。以下のような感じです。
<!-- アコーディオン -->
<nav id="s-navi" class="pcnone">
<dl class="acordion">
<dt class="trigger">
<p><span class="op"><i class="fa fa-bars"></i> MENU</span></p>
</dt>
<dd class="acordion_tree">
<ul>
<?php wp_nav_menu(array('theme_location' => 'navbar'));?>
</ul>
<div class="clear"></div>
</dd>
</dl>
<?php get_search_form(); //検索フォーム表示 ?>
</nav>
<!-- /アコーディオン -->
これで完了。
2.ページ上部のメニューボタン(アコーディオン)を押した時に検索フォームを表示する
これは上部メニューボタンを押した時にその下に検索フォーム(検索窓)を展開させる方法です。これが一番使い勝手よさそうかな
変更するのは1箇所。
header.php(テーマヘッダー)を開いて、「アコーディオン」という語句を検索して「1.ページ上部のメニューボタン(アコーディオン)の代わりに検索フォームを表示する方法」で紹介したのと同じ箇所を見つけましょう。
<!-- アコーディオン -->
<nav id="s-navi" class="pcnone">
<dl class="acordion">
<dt class="trigger">
<p><span class="op"><i class="fa fa-bars"></i> MENU</span></p>
</dt>
<dd class="acordion_tree">
<ul>
<?php wp_nav_menu(array('theme_location' => 'navbar'));?>
</ul>
<div class="clear"></div>
</dd>
</dl>
</nav>
<!-- /アコーディオン -->
上の部分ですね。
※注：今回の場合はさっき紹介したメニューボタンを消すコードは貼り付けないように！
今度は</dd>の直前に検索フォームの呼び出しコードを追記します。以下のような感じです。
<!-- アコーディオン -->
<nav id="s-navi" class="pcnone">
<dl class="acordion">
<dt class="trigger">
<p><span class="op"><i class="fa fa-bars"></i> MENU</span></p>
</dt>
<dd class="acordion_tree">
<ul>
<?php wp_nav_menu(array('theme_location' => 'navbar'));?>
</ul>
<div class="clear"></div>
<?php get_search_form(); //検索フォーム表示 ?>
</dd>
</dl>
</nav>
<!-- /アコーディオン -->
この1箇所に追記するだけでOK。
これでスマホでメニューボタンを押した時にメニューの下に検索フォームが表示されるようになります。
注意事項
なお、この変更の際に使用しているStingerのバージョンによっては検索窓の表示が崩れる場合があります。
対処はその人の環境によって違う個々別々なものになってしまうので、ここではその修正方法全てを紹介することができません。あしからず。
一例としてだいたいのケースを解決できそうな修正例を紹介しておきます。
style.cssを開いて、検索フォーム部分の#sのwidthを100%から75%とか適当な値に変更しましょう。
/*--------------------------------
検索フォーム
---------------------------------*/
#side aside #search {
padding-bottom: 0px;
position: relative;
width: 100%;
}
#s {
height: 34px;
color: #333;
font-size: 14px;
border-radius: 0;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
background-color: #ccc;
z-index: 10;
padding: 5px 65px 10px 5px;
width: 75%;
box-sizing: border-box;
}
次のこのすぐ下にある#searchsubmitにある「position: absolute;」という部分を消して代わりに
float: right; margin-right: 20px;
というのを追記します。
Stinger5だと変更後は以下のような感じになるでしょうか。
#searchsubmit {
border-radius: 0;
background-color: #ccc;
float: right;
margin-right: 20px;
right: 0px;
top: 1px;
width: 50px;
height: 34px;
z-index: 20;
}
かなりの荒療治ですが、簡単な修正だとこんな感じで表示の崩れは解消されます。
まぁstyle.cssのsearchの部分をいじればだいたいなんとかはなります。(丸投げ
以上、ご参考まで。