前の記事はfunctions.phpについてでした。続きいきます。カスタム検索ボタン設置についてです。
検索ボタン
検索ボタンなんかはですね、サイドバーに標準の検索ウィジェットを置けば済む話ですが、小さな画面ではサイドバーが下の方に行ってしまうので検索欄を見つけること自体が面倒になります。どうもあまりよろしくありません。ここはヘッダーのメニューのところに検索ボタンを付けたいところです。
サイトヘッダーに関しては初っぱなからいろいろとカスタム案件が出てまいります。でも、コンテンツの細かなデザインと違い、ヘッダーは全部に影響する土台みたいなものですから、これを最小限のカスタムという位置づけにしてもいいのではないかと思います。
目標：検索ボタンをヘッダーメニューに作る
検索ボタンを取り付けたいわけです。ヘッダーのどこに付けましょう。twentyfourteenの数少ない気に入ったギミックと同じ、メインメニューの右端に置きたいと、こう思いました。これが目標です。
このブログのメニューの右端に完成したものがご覧頂けるかと思います。クリックすると検索窓が出てきて、文字を入れてエンターすると検索結果が左側に出てきます。中身はGoogleカスタム検索です。これが完成イメージです。完成してますが。
「検索ボタンをヘッダーメニューに作る」という目標ですが、この一言の中には全く無関係な四つの案件が実は含まれています。何かというとこうです。
- 何か（例えばボタン）をヘッダーメニューのメインメニューの端に配置したい
- 何か（例えば検索窓）を呼び出すボタンを作り、ボタンクリックで隠れているその何か（例えば検索窓）を表示させたい
- 検索にはgoogleカスタム検索機能を発動させたい
- 検索の実行により、好きな場所に検索結果を表示させたい
そうなんです、これだけのことを同時にやろうとしているんです。こうやってやりたいことが実は複数の事柄であると了解することが人間進歩の第一歩ですね。
では一つずつ実現させていきます。尚、この仕組みはネットの賢人さまが公開している情報にほとんど依存しています。検索しすぎて賢人がどなたなのかもう不明でして、おれがその賢人だよという方はどうぞご連絡ください。
googleカスタム検索
Googleのを使わないのであれば、wordpress標準の検索を呼び出せばいいだけです。検索を呼び出す関数は何でしたっけ。get_search_form() でしたっけ。知りませんのでgoogleで行きます。
googleカスタム検索の使い方はgoogleに任せます。デザインですが、この「2列」というやつを選びました。検索窓と検索結果を別々に表示します。
コードを取得し、大事にどこかにペーストして保存しておきましょう。以上、googleカスタム検索でした。
これから作る仕組みの中にgoogleカスタム検索のコードを挿入すれば出来上がるということですが、その後にまだ作業もあります。それはちょっとまたあとで。
何か（例えば検索窓）を呼び出すボタンを作り、ボタンクリックで隠れているその何か（例えば検索窓）を表示させたい
これがテクニカル。説明も難しいですね。検索マークが付いたボタンをクリックしたら検索窓が現れるというギミックを作りたいわけです。
まずボタンですが、ボタンってもいろいろあります。今回はチェックボックスを使ってみます。このチェックボックスをどこかに置きます。どこに置くかというとメインメニューの中ですがまあ今はどこにでもわかりやすい場所に作って試すのもいいでしょう。
<input type="checkbox" id="toggle-1" class="search-toggle">
ID とクラスを付けたチェックボックスを作ります。チェックボックスの隣（後ろ？）にはラベルを作りましょう。
<label for="toggle-1"></label>
これらをcssで弄ります。labelのほうをボタンみたいな形に整形して、本体のチェックボックスは隠します。
input#toggle-1 ~ label { /* チェックボックスの後にあるlabelをボタン型に整形 */
margin-right: 0;
text-align: center;
width: 40px;
cursor: pointer;
float: right;
height: 42px;
position: absolute;
right: 0;
padding:0;
margin:0;
}
input#toggle-1 ~ label:before { /* チェックボックスの後にあるlabelのbeforeを使って検索マーク\f400を仕込む */
color: #ccc;
content: "\f400";
display: inline-block;
font-size: 20px;
font: normal 16px/1 Genericons;
margin-top: 14px;
text-decoration: inherit;
vertical-align: text-bottom;
}
input#toggle-1:checked ~ label { /* チェックボックスがチェックされているときのlabelの背景色 */
background: #83a8bc;
}
input#toggle-1:checked ~ label:before { /* チェックされているときのlabel:before */
color: #ccc;
content: "\f421";
display: inline-block;
font-size: 20px;
font: normal 16px/1 Genericons;
margin-top: 14px;
text-decoration: inherit;
vertical-align: text-bottom;
}
input#toggle-1 ~ label:hover { /*hover*/
background-color: #297ba6;
}
input#toggle-1 ~ label:active {/*active*/
background: #306dad
}
input#toggle-1 { /* チェックボックスそのものは非表示 */
display: none
}
divでボックスをひとつ作ります。今作ったボタンをクリックすると表示されるのが目標のボックスです。最終的には、ここに検索窓が表示されるようにしたい、そのボックスです。どこに置くかというと・・今はまあどこでもいいので置きます。あとで理想的な場所に置き直せばいいです。このサイトの場合・・・検索ボタンをクリックしてみてください。検索窓が現れます。この検索窓を包むものこそ、div.search-box-wrapperです。
<div class="search-box-wrapper"> </div>
search-box-wrapperとカッコ良く名付けられたこのdivをcssで弄ります。
以下の例ではごちゃごちゃ書いています。このサイトで使っているcssです。デフォルトではどこか遠くにおりまして、チェックボックスがチェックされるとシュタっと登場します。装飾は好き好き、要はデフォルトで隠す、チェックボックス:チェックで表示すると書けばいいんです。
/* デフォルトの状態 */
div.search-box-wrapper {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: #ccc;
box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.2);
height: 46px;
min-width: 320px;
padding-left: 0;
position: absolute;
right: -320px;
top: 42px;
width: 100%;
z-index: 100;
opacity: 0;
}/* この例ではごちゃごちゃ書いていますが、簡素に display:none でいいんです*/
/* チェックボックスがチェックされている時の状態 */
input[type=checkbox]:checked ~ div.search-box-wrapper {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: #83a8bc;
box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.2);
display: inline-block;
height: 46px;
min-width: 320px;
padding-left: 0;
padding: 3px 0 1px 10px;
position: absolute;
right: 0;
top: 42px;
width: 100%;
z-index: 100;
opacity: 1;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}/* この例ではごちゃごちゃ書いていますが、簡素に display:blockなど、表示できればなんでもいいわけです */
と、こんな感じでした。
ここまでをまとめるとこうです。
- チェックボックスを作る – cssで隠す
- 次にlabelを作る – ボタン型に整形、:checked による挙動をcssに書く
- divボックスを作る – :checked による挙動をcssに書く
そして、このdiv.search-box-wrapperの中に、予てより用意されているgoogleカスタム検索の最初のスクリプト、つまり検索窓スクリプトを入れるのです。そうするとこのdivの中に検索窓が現れるので、検索マークボタンクリックによって検索窓が颯爽と出現するように見えます。
何か（例えばボタン）をヘッダーメニューのメインメニューの端に配置したい
ということで、チェックボックスとその後ろにあるlabelを置きたい場所に置きます。それはヘッダーメインメニューの右端です。
header.phpのどこに置けば上手く配置できるのか、header.phpを眺めながらお試しください。私の場合、すでにheader.phpの各オブジェクトをあちらこちらに移動させてますし、あまり参考にならないのではないかと。
一応参考までにいうと、こういう場所に置きました。cssのpositionで位置調整しています。尚、ボタンの一連のコードは、cs_system.phpという別ファイルに書いてまして、header.phpではcs_system.phpを読み込んでます。
<div id="site-header-menu" class="site-header-menu" >
<?php get_template_part('/template-parts/cs_system'); ?><!-- CS System -->
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Primary Menu', 'twentysixteen' ); ?>">
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
) );
?>
</nav><!-- .main-navigation -->
<?php endif; ?>
<?php if ( has_nav_menu( 'social' ) ) : ?>
<nav id="social-navigation" class="social-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Social Links Menu', 'twentysixteen' ); ?>">
<?php
wp_nav_menu( array(
'theme_location' => 'social',
'menu_class' => 'social-links-menu',
'depth' => 1,
'link_before' => '<span class="screen-reader-text">',
'link_after' => '</span>',
) );
?>
</nav><!-- .social-navigation -->
<?php endif; ?>
</div><!-- .site-header-menu -->
検索結果を表示するdivを作る
次は検索結果を表示するdivを作ります。これ、実は作らなくてもいいんです。googleカスタム検索の、検索結果のコードを置くと、そこに勝手に結果を表示してくれますから。
でもちょっと表示位置やサイズなんかをカスタマイズしたいのでdivを作ってその中にgoogleカスタム検索結果のコードを入れることにします。
<div class="search_result" id="gsc"> <gcse:searchresults></gcse:searchresults> </div><!-- google custom search search result -->
こんなふうにしました。検索結果をどこに表示しましょう。私はこれもheader.phpの中に置きました。下のほうの、こんな場所です。headerが終わり、site-contentが始まるまでの隙間です。ここにおきました。
</header><!-- .site-header --> <div class="search_result" id="gsc"> <gcse:searchresults></gcse:searchresults> </div><!-- google custom search search result --> <div id="content" class="site-content">
paddingを設定したりすると、検索していないときにも見えてしまいます。ですので位置や背景透明などcssで調整して普段は目に入らないところに配置しました。
googleカスタム検索の表示の調整
ということで、このようにして検索マークボタンクリックによる検索窓の出現及び検索結果の出現が実現しました。
でもここから少し見た目に関して問題が発生します。googleカスタム検索のcssがwordpressのcssと被って、Googleの表示がカッコ悪くなるのです。
変な線が入っていたり、この画像では用意出来ませんでしたが「検索」ボタンの見え方が変だったりします。カッコ悪いんです。
どうやらwordpressのcssと妙なところがバッティングしてるっぽいんですね。テーブルのボーダー設定やcheckboxの部分っぽいです。
これを修正したいものです。ブラウザのインスペクタ（開発ツール？）を見ながらgoogleの部品を無理矢理調整します。
cssでgoogleカスタム検索のパーツを修正するとき、普通にやってもまず反映されません。ですのでここは無理矢理に!important なんかを駆使します。
googleの検索窓はこんなことになってます。何だこりゃって感じです。どこをどう触ればいいのやら。
<div id="___gcse_0" dir="ltr"><form class="gsc-search-box gsc-search-box-tools" accept-charset="utf-8"><table cellspacing="0" cellpadding="0" class="gsc-search-box"><tbody><tr><td class="gsc-input"><div class="gsc-input-box " id="gsc-iw-id1"><table cellspacing="0" cellpadding="0" id="gs_id50" class="gstl_50 " style="width: 100%; padding: 0px;"><tbody><tr><td id="gs_tti50" class="gsib_a"><input autocomplete="off" type="text" size="10" class="gsc-input" name="search" title="検索" id="gsc-i-id1" dir="ltr" spellcheck="false" style="width: 100%; padding: 0px; border: none; margin: -0.0625em 0px 0px; height: 1.25em; outline: none; background-image: url(http://www.google.com/cse/static/ja/google_custom_search_watermark.gif); background-color: rgb(255, 255, 255); background-position: 0% 50%; background-repeat: no-repeat no-repeat;"></td><td class="gsib_b"><div class="gsst_b" id="gs_st50" dir="ltr"><a class="gsst_a" href="javascript:void(0)" sl-processed="1" style="display: none;"><span class="gscb_a" id="gs_cb50">×</span></a></div></td></tr></tbody></table></div><input type="hidden" name="bgresponse" id="bgresponse"></td><td class="gsc-search-button"><input type="image" src="https://www.google.com/uds/css/v2/search_box_icon.png" class="gsc-search-button gsc-search-button-v2" title="検索"></td><td class="gsc-clear-button"><div class="gsc-clear-button" title="結果をクリア"> </div></td></tr></tbody></table><table cellspacing="0" cellpadding="0" class="gsc-branding"><tbody><tr><td class="gsc-branding-user-defined"></td><td class="gsc-branding-text"><div class="gsc-branding-text">powered by</div></td><td class="gsc-branding-img"><img src="https://www.google.com/uds/css/small-logo.png" class="gsc-branding-img"></td></tr></tbody></table></form></div>
で、便利なインスペクタで一個ずつ見ていって、何となくこれで修正されたかなー、っていう落としどころというか、こんな風になりました。万人にこれでイケるとはまったく断言できませんけど、自分の場合は今のところこれで上手くいっているように思います。
最初にテーブルのボーダーを消して、検索ボタンの有り様を丹念にかつ無理矢理に修正しています。
/*
google cs
--------------------------------------------
*/
/* box, container flame */
div.custom_search_box table,
div.custom_search_box tbody,
div.custom_search_box td,
div.custom_search_box tr {
border: 0;
}
/* button */
.cse .gsc-search-button input.gsc-search-button-v2,
input.gsc-search-button-v2 {
position: relative;
right: 70px !important;
width: 13px !important;
height: 23px !important;
padding: 3px 24px !important;
/* width: 38px; */
margin-top: 4px !important;
content: "\f400" !important;
background-image: url("https://www.google.com/uds/css/v2/search_box_icon.png") !important;
background-repeat: no-repeat !important;
background-position: 50% 50% !important;
background-color: #5792f1 !important;
}
.cse input.gsc-search-button:hover, input.gsc-search-button:hover {
background-image: url("https://www.google.com/uds/css/v2/search_box_icon.png") !important;
background-repeat: no-repeat !important;
background-position: 50% 50% !important;
background-color: #357ae8 !important;
}
/* search input window */
.gsc-input-box {
border:1 !important;
width: calc(100% - 78px ) !important;
height: 30px !important;
}
table.gstl_50 {
table-layout:auto !important;
margin:0 !important;
line-height: 1.2 !important;
}
/* search結果*/
.search_result { /* box */
margin: 0 auto auto 0;
min-width: 290px;
position: absolute;
width: 70%;
z-index: 50;
}
.gsc-control-wrapper-cse {
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4) !important;
}
.gsc-control-cse.gsc-control-cse-ja table,.gsc-control-cse.gsc-control-cse-ja
th,
.gsc-control-cse.gsc-control-cse-ja td {
border:0
}
.cse .gsc-control-cse, .gsc-control-cse {
padding-top:2.5em;
background-color: rgba(219, 219, 219, 0) !important;
border: 1px solid rgba(255, 255, 255, 0) !important;
}
.gsc-control-cse div {
background: #fff !important;
}
.gsc-table-cell-snippet-close, .gsc-table-cell-snippet-open {
padding-left: 82px !important;
}
.gsc-tabsArea > div {
overflow: visible !important;
}
ついでに検索結果の分も含めてしまいました。自分用の装飾が含まれていますので割り引いて見てくださいね。
それからちょっと余談。
自分用のシステムでは、遠くに置いて隠していた検索窓がアニメを伴ってシュッと出てきます。この仕組み、結構いい感じなんですが一つ問題がありました。
1260pxよりウインドウ幅がでかい場合、シュッと枠外からやってくる検索窓が丸見えになってしまうんです。z-indexで最上部にいるからなんですが、これどうしようと考えて、そして無理矢理な結論に達しました。
1260pxよりウインドウ幅が多い場合のメディアクエリを作成して、その場合「遠くからシュッと飛んでくる」を放棄して、シンプルに「非表示だったものが表示される」に変えたんです。そのためメディアクエリに1260pxのワイド条件を付け加えることになりました。メディアクエリのときに書いていたのはこのことです。余談でした。
もう一個余談です。
このブログはDigitalBooといいます。以前、カテゴリーに映画があって映画感想を書いていました。しかし映画感想が増えすぎてmoviebooという別のブログに独立させました。ですのでいわば姉妹サイトみたいなことになっていまして、ですのでgoogleカスタム検索の設定でDigitalBooとMovieBooの両方のサイトから検索されるようになっているんです。サイト内検索と言いながら記事数の多いMovieBooがヒットしたりするんですがご愛敬って事で、まあ、だれもサイト内検索なんかしないと思いますので余談として。
・・・・そうだ、誰もサイト内検索などしないのだ。なのに異常な労力を使って何故このような・・・・自分のためにやっています。はい。
というわけで検索を取り付けるというカスタムについてでした。
次号予告
と、いうわけでありまして、ここまで長々とお送りしたのが、Twentysixteen カスタマイズ その4 〜 最小限度の改変を見極め実施する でした。
こんなにやって最小限とはどういうこった。
ここで示したカスタマイズは（現時点では）このブログやチルドレンクーデターの公式サイトでご覧になれます。
次回は、デザイン的な最低限度の改変を見極め実施します。最小限の構造やスタイルの次のレベル、装飾やデザインの部分での最低限（自分判断）を行うという楽しいカスタマイズの時間です。
カスタマイズその5 最低限度デザイン改変につづきます
