Googleカスタム検索をクリック発火で実装する[WordPress]
※このページにはプロモーションが含まれています。
自作テーマに検索機能を加えました。
WordPressの標準で使える検索でも良いのですが、Googleが提供しているサイト内の検索システムを利用すれば、精度が高い検索が簡単に実装できそうです。
ただ、このGoogleカスタム検索は、他のGoogleが提供するAnalyticsやAdSenseと同じように読み込みの通信量が多く、ページの読み込み速度の低下を招いてしまいます。
そこで、ページの読み込み時にはカスタム検索を読み込ませずに、遅延読み込みをさせて実装したいと考えました。ただし、私はJavaScriptの知識がありません。暗号を解くように推察して、動いたら大喜びする程度の能力しかありません。動作は確認していますが、なにか間違いがあればご容赦ねがいます。
- JavaScriptは遅延読み込み
- 検索結果は自分のサイトで表示
- ヘッダーに実装したい
遅延読み込みの方法はいくつか考えられますが、この自作テーマでのAdSenseはスクロール動作での読み込みにしています。今回の検索窓の読み込みでスクロール動作での読み込みをさせるとすると、検索窓はファーストビュー以外の場所に設置することになります。
スクロールと同時にヘッダーに検索窓が現れるのは、驚かせるのには良いかもしれませんが、ユーザーのためになるとは思えません。
フッターなどの下部に設置するなら良いかもしれませんが、今回はできればヘッダーに設置したいので、ヘッダーに虫眼鏡アイコンを表示させ、それをクリックすることで検索窓を表示させたいと思います。
固定ベージに検索結果を表示させる
固定ページを新たに作ります。
page.phpをコピーし名前をpage-seach-result.phpなどの名前に変更します。そうすると新規で固定ページを作成してスラッグをsearch-resultとすることで自動で紐付けされます。
この検索結果専用のページは、中身の無いページが存在している状態なのでsitemap.xmlから除外し、noindexタグを付けたほうが良いでしょう。
Amazon セールとイベント
冬の味覚ポイント高還元カニ特集 【期間限定】ダブルポイント祭りコードを取得する
https://programmablesearchengine.google.com/about/
上のアドレスからGoogleカスタム検索のためのアドレスを取得します。その時、レイアウトは２ページとし、検索結果の表示アドレスは先ほど作成した固定ページのアドレスを入力します。
少し話がそれますが、検索結果にAdSenseを表示できる機能があるようなのですが、Google社が定めたアクセスを超えたサイトでないと使用できないようです。
<script async src="https://cse.google.com/cse.js?cx=XXXXXXXXXXXXXXXXX">
</script>
<div class="gcse-searchbox-only"></div>レイアウトが２ページの場合は検索窓用のコードと検索結果用のコードが表示されます。
機能の有無でコードの内容が変わるようですが、私の場合は同じコードが表示されました。
クリックでJavaScriptを読み込ませる
<div id="search-wrapper">
<div class="gcse-searchbox-only"></div>
</div>
<div id="search-button">
<i class="fa-solid fa-magnifying-glass"></i>
</div>検索窓を表示ようにFont Awesomeのアイコンフォントを読み込ませるコードです。取得したカスタム検索コードのJavaScriptを除いた部分をdivで囲み、アイコンフォントも同じくdivで囲います。
JavaScriptで操作するためにidを付けます。
<script>
const sButton = document.getElementById("search-button");
const sWrapper = document.getElementById("search-wrapper");
function handleClick(event) {
event.preventDefault();
(function() {
var se = document.createElement('script');
se.async = true;
se.src = 'https://cse.google.com/cse.js?cx=XXXXXXXXXXXXXXXXX';
var sc = document.getElementsByTagName('script')[0];
sc.parentNode.insertBefore(se, sc);
})(),
sButton.style.display="none",
sWrapper.style.animationName="gsc",
sWrapper.style.animationDuration="2s"
}
sButton.addEventListener("click", handleClick);
</script>上のコードを</body>の直前に記入します。
sButton.style.display="none", 虫眼鏡アイコンをクリックすると検索窓が表示されると同時に虫眼鏡アイコンが非表示になります。 不要なら上の1行を削除。
sWrapper.style.animationName="gsc",
sWrapper.style.animationDuration="2s",検索窓を2秒かけて徐々に表示させるためのコード。
@keyframes gsc {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}animation-name:gsc用のCSS。このページで読み込まれるCSSファイルに付け加えてください。 検索窓を徐々に表示させる必要がなければ上の2行のJavaScriptと加えて削除。
一度クリックをして検索窓を開いたら閉じることができない、検索結果ページのヘッダーに最初から検索窓が開いている、など完全なものではありませんが、実用上問題ないのではと思います。
最後までお読みくださり、誠にありがとうございます。
週間アクセスランキング
このブログを書いている人
ほんだ
数多くあるブログの中で、このページをお読みくださりありがとうございます。このブログは、炭火で美味しいものを作ることを中心に、日々の趣味についてを文章にすることで、WordPressを使ってのWebページ作成を忘れないようにしています。熱帯魚の世話や野菜の栽培、Linuxについて興味のあることを、つたない文章で綴っています。兵庫県在住です。