Cocoonの検索フォーム風スタイルをクリックで検索出来るようにする【実装されました】

Cocoonの検索フォーム風スタイルをクリックで検索できるようにする【公式で実装済み】
2019-01-11: Cocoon 1.5.3で、この記事で紹介したコードが採用され公式で実装されました。
そのためバージョン1.5.3以上をお使いの方はカスタマイズ不要となりました!
*こちらの記事は記録として残しておきます。
この記事の検索フォーム風スタイルは解説のためCocoon1.5.2時のスタイルを再現しています。

Cocoonの拡張スタイルには検索を促す装飾が出来る「検索フォーム風」スタイルがあります。

そのままだとクリックは出来ない
検索

ものすごくクリックしたくなりますが、そのままだと見た目だけのスタイルなのでこれをクリックで実際に検索出来るようにするJavaScript(jQuery)の紹介です。

スポンサーリンク

【予備知識】検索フォーム風スタイルを利用する

ビジュアルエディターにある「タグ」ドロップダウンリストから「検索フォーム風」を選択する事で利用出来ます。
挿入されるソースコードは以下のようになっています。

<div class="search-form">
<div class="sform">キーワード</div>
<div class="sbtn">検索</div>
</div>

※クリック出来るようにするためにHTMLのカスタマイズは不要です。

詳細 検索を促す検索ボックスをスタイルで表示する方法 | Cocoon

【コピペでOK】クリックで検索出来るようにするJavaScript

以下のお好みの検索サービスを選んで、子テーマのjavascript.jsにコードを追加します。
投稿の「カスタムJavaScript」に追加しても使えます※追加した投稿ページのみに適用されます。
HTMLのカスタマイズをしないので不要になればコードを削除するだけでOKです。

Googleで検索する

サンプル(「検索」をクリックで検索出来ます)
Googleで検索
検索
//検索フォーム風スタイルをクリックでGoogle検索出来るようにする
(function($){
	$('.sbtn').click(function(){
		var w = $(this).prev('.sform').text();
		if(w) window.open('https://www.google.co.jp/search?q='+encodeURIComponent(w),'_blank');
	});
})(jQuery);

Yahoo!で検索する

サンプル(「検索」をクリックで検索出来ます)
Yahoo!で検索
検索
//検索フォーム風スタイルをクリックでYahoo!検索出来るようにする
(function($){
	$('.sbtn').click(function(){
		var w = $(this).prev('.sform').text();
		if(w) window.open('https://search.yahoo.co.jp/search?p='+encodeURIComponent(w),'_blank');
	});
})(jQuery);

検索ボタンを装飾する

クリック出来る事がわかるようにカーソルを合わせた時のスタイルを指定したい場合は、以下のコードを子テーマのstyle.cssに追加する。

サンプル
「検索」にカーソルを合わせると?>
検索
/* 検索フォーム風スタイルのボタンを装飾 */
.search-form div.sbtn {
	transition: 0.3s; /* 変化をなめらかにする */
}
/* ボタンにカーソルを合わせた時のスタイル */
.search-form div.sbtn:hover {
	color: #333; /* 文字色 */
	background: #fff; /* 背景色 */
	border-color: #333; /* ボーダーの色 */
	cursor: pointer; /* カーソルをポインターに */
}

参考

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