コアポイント
- 検索フォームを手動でレンダリングすることで（特別なGCSEタグを使用する必要がなく）、Googleカスタム検索エンジン（GCSE）を手動でスタイリングすることができ、それにより、検索入力フィールドをより適切に制御し、それらをより簡単に見せることができます。
- GCSEコールバック関数は、入力プロパティを変更する前に入力がロードされるようにします。このメソッドは、
setTimeoutメソッドを使用するよりも信頼性が高くなります。 - Google検索APIを使用して、検索ボックスと結果ボックスを作成できます。アクティブなクエリが存在する場合、結果ボックスも作成されます。その他のカスタマイズは、ドキュメントを調べることで実現できます。
- カスタムスタイル関数は、さらにカスタマイズするために検索DIVに追加できます。この関数は、プレースホルダーを変更し、背景を削除し、焦点が合っていないときに背景を削除するイベントを追加するために使用できます。
この記事はマーク・ブラウンによってレビューされました。 SetePointのすべてのピアレビューアーズに感謝します。
Webサイトの所有者は、組み込みやカスタム検索機能を使用する代わりに、Google Custom Search Engine（GCSE）を使用してコンテンツを検索することを選択します。その理由は単純です - 作業がはるかに少なく、ほとんどの場合、目的を達成できます。高度なフィルターやカスタム検索パラメーターが必要ない場合は、GCSEが最適です。
このクイックヒントでは、検索フォーム（特別なGCSEタグを使用する必要はありません）と結果ボックスを手動でレンダリングする方法を示します。質問
通常、WebサイトにGCSEを追加するのは、コピーパスティングスクリプトやカスタムHTMLタグと同じくらい簡単です。特別なGCSEタグを配置する場合、入力検索フィールドがレンダリングされます。このフィールドからの入力と開始検索は、以前に構成されたパラメーターに基づいてGoogle検索を実行します（たとえば、SitePoint.comのみを検索します）。
一般的な質問は、「GCSE入力フィールドのプレースホルダーを変更する方法」です。残念ながら、提案された答えは通常間違っています。これは、信頼できないメソッドを使用してGCSEのAJAXコールが完了するのを待つ（入力がDOMに接続されていることを確認）、JavaScriptを介してプロパティを変更するためです。
また、setTimeout
GCSEアカウントを作成しますsetTimeout()
検索エンジンはオンラインで完全に構成されています。最初のステップは、GCSE Webサイトにアクセスして[追加]をクリックすることです。ウィザードに従って、検索するドメイン名（通常はWebサイトURL）を入力します。これで、高度な設定を無視できます。 「仕上げ」をクリックした後、3つのオプションが表示されます：
- 「コードを取得」。これにより、検索がウェブサイトに表示されるように、コピーしなければならないものとそれを配置する場所をガイドします。 「public url」では、セット検索の作業プレビュー
- 「コントロールパネル」は、検索をカスタマイズするために使用されます
html設定
試してみると、必要なHTMLを使用して基本的なindex.htmlと、レンダリングとカスタム検索に必要な機能を含むapp.jsファイルを作成します。
で基本的なHTMLファイルを作成し続けます
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>GCSE test</title>
</head>
<body>
<h1 id="GCSE-test">GCSE test</h1>
<div id="searchForm" class="gcse-search-wrapper"></div>
<div id="searchResults" class="gcse-results-wrapper"></div>
<🎜>
</body>
</html>2つのを追加し、特別なクラスを使用して、検索フォームと結果を提示する要素を識別しました。 <div>
<p>マニュアルレンダリング関数<strong></strong>
</p>app.jsファイルを入力して、次のものを追加します。
<p>
</p>最初に、構成用のいくつかの変数を宣言します。書いたIDを前に下に置いて、構成のフィールドに入れます。ローカルindex.htmlファイルのURLを<pre class='brush:php;toolbar:false;'>var config = {
gcseId: '006267341911716099344:r_iziouh0nw', // 替换为您的搜索引擎ID
resultsUrl: 'http://localhost:8080', // 替换为您的本地服务器地址
searchWrapperClass: 'gcse-search-wrapper',
resultsWrapperClass: 'gcse-results-wrapper'
};
var renderSearchForms = function () {
if (document.readyState == 'complete') {
queryAndRender();
} else {
google.setOnLoadCallback(function () {
queryAndRender();
}, true);
}
};
var queryAndRender = function() {
var gsceSearchForms = document.querySelectorAll('.' + config.searchWrapperClass);
var gsceResults = document.querySelectorAll('.' + config.resultsWrapperClass);
if (gsceSearchForms.length > 0) {
renderSearch(gsceSearchForms[0]);
}
if (gsceResults.length > 0) {
renderResults(gsceResults[0]);
}
};
var renderSearch = function (div) {
google.search.cse.element.render(
{
div: div.id,
tag: 'searchbox-only',
attributes: {
resultsUrl: config.resultsUrl
}
}
);
if (div.dataset &&
div.dataset.stylingFunction &&
window[div.dataset.stylingFunction] &&
typeof window[div.dataset.stylingFunction] === 'function') {
window[div.dataset.stylingFunction](div); // 传递div而不是form
}
};
var renderResults = function(div) {
google.search.cse.element.render(
{
div: div.id,
tag: 'searchresults-only'
});
};
window.__gcse = {
parsetags: 'explicit',
callback: renderSearchForms
};
(function () {
var cx = config.gcseId;
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</pre>フィールドに入れます。これは、ユーザーがクエリを提出した後に検索がリダイレクトされる場所です。さらに、GCSEは、提供されたURLで結果フィールドをレンダリングすることを期待します。 <p>
<code>gcseIdresultsUrl関数ページが読み込まれているかどうか、およびコールバック関数がレンダリングに責任を負います。後でドキュメントがロードされた後。
renderSearchFormsfunction configで提供されるクラスの要素を使用してDOMをクエリします。ラッパーdivが見つかった場合、検索フィールドと結果フィールドをレンダリングするために、それぞれqueryAndRender()および
queryAndRenderrenderSearch()関数は、実際の魔法が発生する場所です。 renderResults()
renderSearchレンダリング関数は、この例で提供されているよりも多くのパラメーターを受け入れるので、さらなるカスタマイズが必要な場合は、ドキュメントを確認してください。
パラメーターは正確にレンダリングするものを示します（google.search.cse.element結果
検索divまたはその両方）。 tag
さらに、ラッパー要素のデータ属性を見つけます。スタイリング機能属性が指定されている場合、範囲内の関数名を探して要素に適用します。 。これが要素をスタイリングするチャンスです。
このコードスニペットでは、GCSEがこの変数を内部で使用し、読み込み後にコールバック関数を実行できるように、グローバルスコープにコールバック変数を設定します。これにより、このメソッドは、renderSearch()ソリューションを使用して、入力フィールドのプレースホルダー（またはその他のもの）を編集するよりもはるかに優れています。
window.__gcse = {
parsetags: 'explicit',
callback: renderSearchForms
};
これまでのところ、検索ボックスと結果をレンダリングするために必要なすべてを含めました。 node.jsがインストールされている場合は、index.htmlおよびapp.jsファイルが配置され、http-serverコマンドを実行するフォルダーに移動します。デフォルトでは、これにより、LocalHostのポート8080のフォルダーに内容が提供されます。
スタイル関数
ここで、検索divにカスタムスタイル関数を追加します。 index.htmlを返し、#searchForm divにstyling-function属性を追加します：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>GCSE test</title>
</head>
<body>
<h1 id="GCSE-test">GCSE test</h1>
<div id="searchForm" class="gcse-search-wrapper"></div>
<div id="searchResults" class="gcse-results-wrapper"></div>
<🎜>
</body>
</html>
次に、app.jsに移動し、ファイルの上部で、構成変数宣言の下で、新しい関数を追加します。
var config = {
gcseId: '006267341911716099344:r_iziouh0nw', // 替换为您的搜索引擎ID
resultsUrl: 'http://localhost:8080', // 替换为您的本地服务器地址
searchWrapperClass: 'gcse-search-wrapper',
resultsWrapperClass: 'gcse-results-wrapper'
};
var renderSearchForms = function () {
if (document.readyState == 'complete') {
queryAndRender();
} else {
google.setOnLoadCallback(function () {
queryAndRender();
}, true);
}
};
var queryAndRender = function() {
var gsceSearchForms = document.querySelectorAll('.' + config.searchWrapperClass);
var gsceResults = document.querySelectorAll('.' + config.resultsWrapperClass);
if (gsceSearchForms.length > 0) {
renderSearch(gsceSearchForms[0]);
}
if (gsceResults.length > 0) {
renderResults(gsceResults[0]);
}
};
var renderSearch = function (div) {
google.search.cse.element.render(
{
div: div.id,
tag: 'searchbox-only',
attributes: {
resultsUrl: config.resultsUrl
}
}
);
if (div.dataset &&
div.dataset.stylingFunction &&
window[div.dataset.stylingFunction] &&
typeof window[div.dataset.stylingFunction] === 'function') {
window[div.dataset.stylingFunction](div); // 传递div而不是form
}
};
var renderResults = function(div) {
google.search.cse.element.render(
{
div: div.id,
tag: 'searchresults-only'
});
};
window.__gcse = {
parsetags: 'explicit',
callback: renderSearchForms
};
(function () {
var cx = config.gcseId;
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
テストページをもう一度読み込んでみると、正しいプレースホルダーが表示されます。
結論
Googleカスタム検索エンジンは、特にWebサイトが静的なHTMLである場合、簡単な検索の迅速なセットアップに非常に効果的です。少量のJavaScriptコードを使用すると、検索フォームと結果ページをカスタマイズして、ユーザーによりシームレスなエクスペリエンスを提供できます。GCSEを使用していますか、それともより良い解決策を見つけましたか？以下にコメントしてください！
Googleのカスタム検索スタイルの設定に関する
FAQ
Googleのカスタム検索エンジンの外観をカスタマイズする方法は？CSS（カスケードスタイルシート）の使用を含むカスタムGoogle検索エンジンの外観をカスタマイズします。 CSSは、HTMLで書かれたドキュメントの外観とフォーマットを説明するスタイルシート言語です。検索エンジンの色、フォント、サイズ、その他の要素を変更できます。これを行うには、プログラム可能な検索要素コントロールAPIにアクセスする必要があります。これにより、検索要素をカスタマイズできます。その後、CSSを正しいセクションに追加して、検索エンジンの外観を変更できます。
WebサイトにGoogleカスタム検索を追加できますか？
はい、Googleカスタム検索をWebサイトに追加できます。 Googleは、ゲットリクエストを送信するために使用できるカスタム検索JSON APIを提供します。このAPIは、JSON形式で検索結果を返します。その後、これらの結果を使用して、ウェブサイトにカスタム検索エンジンを作成できます。これにより、ユーザーはあなたのウェブサイトまたは指定した他のウェブサイトを検索できます。
Googleカスタム検索を使用して検索ボックスを実装する方法は？
Googleカスタム検索で検索ボックスを実装するには、プログラム可能な検索エンジンWebサイトで実行できる検索エンジンIDの作成が含まれます。 IDを取得したら、カスタム検索要素コントロールAPIを使用して検索ボックスを作成できます。その後、CSSを使用してこの検索ボックスをカスタマイズできます。
プログラム可能な検索要素コントロールAPIは何ですか？
プログラム可能な検索要素コントロールAPIは、プログラマブル検索エンジンをカスタマイズできるGoogleが提供する一連の機能です。これには、検索ボックスの作成、検索エンジンの外観のカスタマイズ、検索結果の制御が含まれます。
Googleカスタム検索で検索結果を制御する方法は？
プログラム可能な検索要素コントロールAPIを使用して、Googleのカスタム検索で検索結果を制御できます。このAPIは、検索したWebサイト、返された結果の数、および結果が表示される順序を指定できる関数を提供します。
商業目的でGoogleカスタム検索を使用できますか？
はい、商業目的でGoogleカスタム検索を使用できます。ただし、利用規約を理解する必要があります。たとえば、検索エンジンを使用して大人のコンテンツを表示したり、違法な活動を促進したりすることはできません。
Googleカスタム検索で検索結果の色を変更するにはどうすればよいですか？
CSSを使用して、Googleのカスタム検索で検索結果の色を変更できます。プログラム可能な検索要素制御APIにアクセスし、正しいセクションにCSSを追加する必要があります。テキスト、背景、その他の検索結果要素の色を変更できます。
モバイルデバイスでGoogleを使用してカスタム検索できますか？
はい、モバイルデバイスでGoogleを使用して検索をカスタマイズできます。プログラム可能な検索エンジンは、レスポンシブになるように設計されています。つまり、表示しているデバイスの画面サイズに合わせて調整されます。 CSSを使用して、検索エンジンの外観をカスタマイズして、モバイルフレンドリーにすることもできます。
Googleカスタム検索エンジンにロゴを追加する方法は？
CSSを使用してGoogleカスタム検索エンジンにロゴを追加できます。プログラム可能な検索要素制御APIにアクセスし、正しいセクションにCSSを追加する必要があります。その後、ロゴとして表示する画像URLを追加できます。
知識をコーディングせずにカスタム検索にGoogleを使用できますか？
Googleを使用して知識をコーディングせずに検索をカスタマイズできますが、検索エンジンを完全にカスタマイズするためにHTMLとCSSを特定して理解することをお勧めします。ただし、Googleは詳細なドキュメントとチュートリアルを提供して、開始します。
以上がクイックヒント：Googleカスタム検索のスタイルを手動でスタイリングする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
JavaScriptの文字列文字を交換しますMar 11, 2025 am 12:07 AMJavaScript文字列置換法とFAQの詳細な説明 この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します：内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します 最も直接的な方法は、置換（）メソッドを使用することです。 str = str.replace（ "find"、 "置換"）; この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace（/fi
8見事なjQueryページレイアウトプラグインMar 06, 2025 am 12:48 AM楽なWebページレイアウトのためにjQueryを活用する：8本質的なプラグイン jQueryは、Webページのレイアウトを大幅に簡素化します。 この記事では、プロセスを合理化する8つの強力なjQueryプラグイン、特に手動のウェブサイトの作成に役立ちます
独自のAjax Webアプリケーションを構築しますMar 09, 2025 am 12:11 AMそれで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか？ Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました
独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか？Mar 18, 2025 pm 03:12 PM記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。
Ajaxを使用して動的にボックスコンテンツをロードしますMar 06, 2025 am 01:07 AMこのチュートリアルでは、Ajaxを介してロードされた動的なページボックスの作成を示しており、フルページのリロードなしでインスタントリフレッシュを可能にします。 JQueryとJavaScriptを活用します。カスタムのFacebookスタイルのコンテンツボックスローダーと考えてください。 重要な概念： ajaxとjquery
10 jQueryの楽しみとゲームプラグインMar 08, 2025 am 12:42 AM10の楽しいjQueryゲームプラグインして、あなたのウェブサイトをより魅力的にし、ユーザーの粘着性を高めます！ Flashは依然としてカジュアルなWebゲームを開発するのに最適なソフトウェアですが、jQueryは驚くべき効果を生み出すこともできます。また、純粋なアクションフラッシュゲームに匹敵するものではありませんが、場合によってはブラウザで予期せぬ楽しみもできます。 jquery tic toeゲーム ゲームプログラミングの「Hello World」には、JQueryバージョンがあります。 ソースコード jQueryクレイジーワードコンポジションゲーム これは空白のゲームであり、単語の文脈を知らないために奇妙な結果を生み出すことができます。 ソースコード jquery鉱山の掃引ゲーム
JavaScript用のクッキーレスセッションライブラリを作成する方法Mar 06, 2025 am 01:18 AMこのJavaScriptライブラリは、Cookieに依存せずにセッションデータを管理するためにWindow.nameプロパティを活用します。 ブラウザ全体でセッション変数を保存および取得するための堅牢なソリューションを提供します。 ライブラリは、セッションの3つのコア方法を提供します
jQuery Parallaxチュートリアル - アニメーションヘッダーの背景Mar 08, 2025 am 12:39 AMこのチュートリアルでは、jQueryを使用して魅惑的な視差の背景効果を作成する方法を示しています。 見事な視覚的な深さを作成するレイヤー画像を備えたヘッダーバナーを構築します。 更新されたプラグインは、jQuery 1.6.4以降で動作します。 ダウンロードしてください
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません
Safe Exam Browser
Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
ホットトピック
7400
15163014135852126825121729