70-80年代アイドル・芸能・サブカル考察サイト

WordPressコクーンのグローバルナビに検索ボタンを設置

set-search-button-on-wordpress-global-navigation
コメント

ホームページを1カラムにするとサイドメニューが無くなるので、パソコン閲覧時において検索窓を目立つ位置に掲載することができません。
そのため以前からグローバルナビに検索ボタンを付けようと思っていたのですが、なかなかカスタマイズの時間が取れず、この度やっとコロナ禍の余暇を活用して設置することができました。

WordPressでCocoonテーマをお使いの方は、コピペで使えると思いますので宜しかったらご参照ください。
使用したCocoonバージョンは2.1.5.1です。

カスタマイズしたファイルはすべて子テーマに設置しています。
なお、下記の実施はお約束の自己責任でお願いします。

1.Gナビに検索アイコン設置 (tmp/navi.php)

親テーマのtmpフォルダーにあるnavi.phpを子テーマの同位置にコピーします。
tmp/navi.php

<div id="navi-in" class="navi-in wrap cf">

の下に

<?php if (wp_is_mobile()) { ?>
<?php } else { ?>
<a id="search-box" href="#content01"><span class="s-en"></span></a>
<?php } ?>
を追記します。
<span class=”s-en”>と<span>の間に検索などの文字を入れると、 の下に表示されます。

2.検索フォームの呼び出し (footer.php)

私の環境ではheader.phpでは動かないページがあったので、footer.phpの後ろの方に記載しました。

<?php if (wp_is_mobile()) { ?>
<?php } else { ?>
<?php include (STYLESHEETPATH . '/search-gnavi/search.php'); ?>
<?php } ?>

3.モーダルウィンドウの設置 (animatedModal.jsなど)

animatedModal.js からanimatedModal.js一式をダウンロード。当サイトの作成時はVersion 1.0でした。
ダウンロードファイルから
animate.min.css
animatedModal.js
を下記の検索フォーム用search.phpと同じフォルダーのsearch-gnaviに格納します。

4.検索フォーム用PHP (search-gnavi/search.php)

<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/search-gnavi/animate.min.css" media="screen" />
<script src="<?php bloginfo('stylesheet_directory'); ?>/search-gnavi/animatedModal.js"></script>
<script type="text/javascript">
jQuery(function($){
  $('#search-box').animatedModal({
    modalTarget:'content01',
    animatedIn:'zoomIn',//bounceInUp
    animatedOut:'zoomOut',//bounceOutDown
    animationDuration:'1s',
    color:'#fff',
  });
  //背景色を半透明にする時は、#content02を#content01にする
  $('#content02').css('backgroundColor','rgba(255,255,255,0.8)');
});
 </script>
<div id="content01">
<div class="modal-content">
<span class="close-content01">×</span>

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
  <div><label class="screen-reader-text" for="s">Search for:</label>
    <input type="text" value="" name="s" id="s" style="width:80%;" placeholder="キーワード検索" />
    <input type="submit" id="searchsubmit" value="検 索" />
  </div>
</form>
</div>
</div>

このコードをコピペしたsearch.phpファイルを作成します。
animatedIn:’zoomIn’,
animatedOut:’zoomOut’,
は、検索ボタンを押したときに現れる検索窓の動作方法を指定しています。

zoomInとzoomOutは当サイトで採用した、ピンチアウト・ピンチインのような動きです。コメントアウトしているbounceInUpとbounceOutDownは検索窓がブラウザの下の方から上段に現れ、閉じるボタンの☓印を押すと上段から下方に消えます。(現在は、fadeIn、fadeOutに切り替えています。)
他にもオプションがあるようなので、animatedModal.js のDEMOSやOPTIONSからご確認ください。

search-gnaviフォルダーを子テーマ内に作成し、search.phpと上記のanimate.min.cssとanimatedModal.jsを格納します。
search-gnavi/search.php
search-gnavi/animate.min.css
search-gnavi/animatedModal.js

5.style.css

今回のグローバルナビ検索周りのCSSです。お好みに合わせて下記をご参照ください。

/* Gnavi検索 */
@media screen and (max-width: 833px){
	.menu-Gnavi-container,#search-box {
		display:none;
	}
}
@media screen and (min-width: 834px){
	.menu-Gnavi-container {
		float: right;
	}
	#search-box {
		display: block;
		text-decoration: none;
		text-align: center;
		line-height: 1.1;
		float: right;
		padding: 7px 10px;
		color: #666;
	}
	#search-box:hover {
		color: #999;
	}
	#search-box:before {
		padding-top:0.3em;
		padding-right:2em;
		font-size: 1.5em;
		font-family: "fontawesome";
		content: '\f002';
		width: 100%;
		display: block;
		color:#666;
	}
	#search-box span {
		font-size: .7em;
	}
	#content01,#content02 {
		position: relative;
	}
	.close-content01,.close-content02 {
		position: absolute;
		right: 10px;
		top: 10px;
		font-size: 24px;
		cursor: pointer;
		border:1px #ccc solid;
		padding: 3px 10px;
	}
	.open-menu {
		-webkit-filter: blur(4px);
		-ms-filter: blur(4px);
		filter: blur(4px);
	}
	.close-menu {
		-webkit-filter: blur(0px);
		-ms-filter: blur(0px);
		filter: blur(0px);
	}
	.modal-content {
		padding: 20px;
	}
	#content01 input[type="submit"]{
		width: 10%;
		margin-left:5px;
		display: inline-block;
		background-color: #1f9ebe;/* 自サイトのキーカラー */
		color: #fff;
	}
}

子テーマ
├tmp
│ └navi.php
├search-gnavi
│ ├search.php
│ ├animate.min.css
│ └animatedModal.js
└footer.php

上記の全ファイルをFTPでアップロードして完了です。




情報提供・コメント

タイトルとURLをコピーしました