ホームページ >ウェブフロントエンド >jsチュートリアル >クイックヒント：Googleカスタム検索のスタイルを手動でスタイリングする方法

クイックヒント：Googleカスタム検索のスタイルを手動でスタイリングする方法

Jennifer Anistonオリジナル: 2025-02-17 09:42:10767ブラウズ

Quick Tip: How to Style Google Custom Search Manually

コアポイント

検索フォームを手動でレンダリングすることで（特別な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を介してプロパティを変更するためです。

また、を盲目的に使用する代わりにGCSEによって提供されるコールバック関数を使用します。これにより、入力がロードされるようになります。 setTimeout

GCSEアカウントを作成しますsetTimeout()

検索エンジンはオンラインで完全に構成されています。最初のステップは、GCSE Webサイトにアクセスして[追加]をクリックすることです。ウィザードに従って、検索するドメイン名（通常はWebサイトURL）を入力します。これで、高度な設定を無視できます。「仕上げ」をクリックした後、3つのオプションが表示されます：

「コードを取得」。これにより、検索がウェブサイトに表示されるように、コピーしなければならないものとそれを配置する場所をガイドします。

コントロールパネルに移動し、[エンジンの検索ID]をクリックし、後で使用するためにこの値に注意してください。

html設定

試してみると、必要なHTMLを使用して基本的なindex.htmlと、レンダリングとカスタム検索に必要な機能を含むapp.jsファイルを作成します。

で基本的なHTMLファイルを作成し続けます

<code class="language-html"><!DOCTYPE html>


    <meta charset="UTF-8">
    <title>GCSE test</title>



    <h1>GCSE test</h1>
    <div id="searchForm" class="gcse-search-wrapper"></div>
    <div id="searchResults" class="gcse-results-wrapper"></div>
    


</code>

2つのを追加し、特別なクラスを使用して、検索フォームと結果を提示する要素を識別しました。

<div>
<p>マニュアルレンダリング関数<strong></strong>
</p>app.jsファイルを入力して、次のものを追加します。
<p>
</p>最初に、構成用のいくつかの変数を宣言します。書いたIDを前に下に置いて、構成のフィールドに入れます。ローカルindex.htmlファイルのURLを<pre class="brush:php;toolbar:false">&lt;code class=&quot;language-javascript&quot;&gt;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 &gt; 0) {
    renderSearch(gsceSearchForms[0]);
  }
  if (gsceResults.length &gt; 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 &amp;&amp;
        div.dataset.stylingFunction &amp;&amp;
        window[div.dataset.stylingFunction] &amp;&amp;
        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);
})();
&lt;/code&gt;</pre>フィールドに入れます。これは、ユーザーがクエリを提出した後に検索がリダイレクトされる場所です。さらに、GCSEは、提供されたURLで結果フィールドをレンダリングすることを期待します。 <p>
<code>gcseId

resultsUrl関数ページが読み込まれているかどうか、およびコールバック関数がレンダリングに責任を負います。後でドキュメントがロードされた後。

renderSearchFormsfunction configで提供されるクラスの要素を使用してDOMをクエリします。ラッパーdivが見つかった場合、検索フィールドと結果フィールドをレンダリングするために、それぞれqueryAndRender()および

が呼び出されます。

queryAndRenderrenderSearch()関数は、実際の魔法が発生する場所です。 renderResults()

Google Search API（オブジェクトの使用方法に関するドキュメントの詳細）を使用して検索ボックスを作成し、アクティブクエリ（結果）がある場合は結果ボックスが作成されます。

renderSearchレンダリング関数は、この例で提供されているよりも多くのパラメーターを受け入れるので、さらなるカスタマイズが必要な場合は、ドキュメントを確認してください。

パラメーターは、実際にレンダリングするdivのIDを受け入れ、

パラメーターは正確にレンダリングするものを示します（google.search.cse.element結果

または

検索divまたはその両方）。 tag さらに、ラッパー要素のデータ属性を見つけます。スタイリング機能属性が指定されている場合、範囲内の関数名を探して要素に適用します。。これが要素をスタイリングするチャンスです。

このコードスニペットでは、GCSEがこの変数を内部で使用し、読み込み後にコールバック関数を実行できるように、グローバルスコープにコールバック変数を設定します。これにより、このメソッドは、renderSearch()ソリューションを使用して、入力フィールドのプレースホルダー（またはその他のもの）を編集するよりもはるかに優れています。

テスト実行

<code class="language-javascript">window.__gcse = {
  parsetags: 'explicit',
  callback: renderSearchForms
};</code>

これまでのところ、検索ボックスと結果をレンダリングするために必要なすべてを含めました。 node.jsがインストールされている場合は、index.htmlおよびapp.jsファイルが配置され、http-serverコマンドを実行するフォルダーに移動します。デフォルトでは、これにより、LocalHostのポート8080のフォルダーに内容が提供されます。

Quick Tip: How to Style Google Custom Search Manually

スタイル関数

ここで、検索divにカスタムスタイル関数を追加します。 index.htmlを返し、#searchForm divにstyling-function属性を追加します：

<code class="language-html"><!DOCTYPE html>


    <meta charset="UTF-8">
    <title>GCSE test</title>



    <h1>GCSE test</h1>
    <div id="searchForm" class="gcse-search-wrapper"></div>
    <div id="searchResults" class="gcse-results-wrapper"></div>
    


</code>

次に、app.jsに移動し、ファイルの上部で、構成変数宣言の下で、新しい関数を追加します。

<code class="language-javascript">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);
})();
</code>

テストページをもう一度読み込んでみると、正しいプレースホルダーが表示されます。

Quick Tip: How to Style Google Custom Search Manually

結論

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 json css ajax html 回调函数 JS function 对象作用域事件 dom 样式表 http 搜索引擎

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：クイックチップ：時間遅延後にモーダルポップアップを表示します次の記事：クイックチップ：時間遅延後にモーダルポップアップを表示します

続きを見る