Conseil rapide: comment styliser Google Recherche personnalisée manuellement

Points de base

• En rendant manuellement les formulaires de recherche (sans avoir besoin d'utiliser des balises GCSE spéciales), vous pouvez styliser manuellement le moteur de recherche personnalisé Google (GCSE), vous offrant ainsi un meilleur contrôle sur les champs d'entrée de recherche et les rendre plus simples.
La fonction de rappel
• GCSE garantit que l'entrée est chargée avant de modifier les propriétés d'entrée. Cette méthode est plus fiable que l'utilisation de la méthode setTimeout.
• L'API de recherche Google peut être utilisée pour créer des cases de recherche et des boîtes de résultats. Si une requête active existe, une boîte de résultats est également créée. D'autres personnalisations peuvent être réalisées en recherchant le document.
• Les fonctions de style personnalisé peuvent être ajoutées à la personnalisation de la DIV de recherche. Cette fonction peut être utilisée pour changer les espaces réservées, supprimer des arrière-plans et ajouter des événements qui suppriment les arrière-plans lorsqu'ils sont hors de mise au point.

Cet article a été examiné par Mark Brown. Merci à tous les pairs examinateurs de SitePoint pour avoir obtenu le contenu de SitePoint à son meilleur!

Les propriétaires de sites Web choisissent souvent d'utiliser le moteur de recherche personnalisé Google (GCSE) pour rechercher leur contenu au lieu d'utiliser des fonctionnalités de recherche intégrées et / ou personnalisées. La raison est simple - beaucoup moins de travail et dans la plupart des cas, elle peut atteindre le but. Si vous n'avez pas besoin de filtres avancés ou de paramètres de recherche personnalisés, GCSE est pour vous.

Dans cette astuce rapide, je vais vous montrer comment rendre manuellement le formulaire de recherche (pas besoin d'utiliser des balises GCSE spéciales) et des boîtes de résultats, qui permettent un contrôle plus fin et une méthode de réglage de style de champ de saisie de recherche plus propre.

Question

Habituellement, l'ajout de GCSE à votre site Web est aussi simple que des scripts de copie et des balises HTML personnalisées à votre site Web. Lorsque vous placez la balise GCSE spéciale, un champ de recherche d'entrée sera rendu. Type and Start Search à partir de ce champ effectuera une recherche Google basée sur des paramètres précédemment configurés (par exemple, la recherche uniquement SitePoint.com).

Une question courante est "Comment changer l'espace réservé pour le champ de saisie du GCSE?". Malheureusement, la réponse suggérée est généralement erronée, car elle utilise la méthode non fiable

pour attendre que l'appel AJAX de GCSE se termine (assurez-vous que l'entrée est attachée au DOM), puis modifiez les propriétés via JavaScript. setTimeout

Nous interrogerons également les éléments et modifierons les attributs à l'aide de JS, mais nous utiliserons la fonction de rappel fournie par GCSE au lieu d'utiliser aveuglément

, ce qui garantira que l'entrée est chargée. setTimeout()

Créer un compte GCSE

Le moteur de recherche est entièrement configuré en ligne. La première étape consiste à aller sur le site Web de GCSE et à cliquer sur Ajouter. Suivez l'assistant pour remplir le nom de domaine que vous souhaitez rechercher (généralement URL de votre site Web). Vous pouvez maintenant ignorer tous les paramètres avancés.

Après avoir cliqué sur "Finition", vous verrez trois options:

1. "Obtenez du code", qui vous guidera à travers ce que vous avez à copier et où le placer afin que la recherche apparaisse sur votre site Web
2. "URL public" vous montrera un aperçu de travail de la recherche définie
3. "Panneau de configuration" est utilisé pour personnaliser les recherches

Accédez au panneau de configuration, cliquez sur l'ID de la recherche du moteur et notez cette valeur pour une utilisation ultérieure.

Paramètres HTML

Pour l'essayer, nous créerons un index.html de base avec le HTML requis, ainsi qu'un fichier app.js qui contient les fonctions requises pour le rendu et la recherche personnalisée.

Continuez à créer un fichier HTML de base avec:

<!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>

Nous avons ajouté deux <div> et utilisé des classes spéciales pour identifier les éléments où le formulaire de recherche et les résultats doivent être présentés. <p> <strong> Fonction de rendu manuel </strong> </p> <p> Entrez maintenant votre fichier app.js et ajoutez ce qui suit: </p> <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 &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); })(); </pre> <p> Tout d'abord, nous déclarons quelques variables pour la configuration. Mettez l'ID que vous avez rédigé auparavant dans le champ <code>gcseId de configuration. Mettez l'URL du fichier index.html local dans le champ resultsUrl. C'est là que la recherche sera redirigée après que l'utilisateur soumet la requête. De plus, GCSE s'attendra à rendre le champ de résultats sur l'URL fournie.

renderSearchForms Fonction vérifie si la page est chargée, et si elle est chargée, la fonction de rappel sera responsable du rendu queryAndRender(); Plus tard après le chargement du document.

queryAndRender Fonction Interroge le DOM avec des éléments de la classe fournie dans la configuration. Si le div wrapper est trouvé, renderSearch() et renderResults() sont appelés respectivement pour rendre les champs de recherche et de résultats.

renderSearch Les fonctions sont là où la magie réelle se produit.

Nous utilisons l'API de recherche Google (plus de documentation ici sur la façon d'utiliser l'objet google.search.cse.element) pour créer la zone de recherche et s'il existe une requête active (résultat), la zone de résultat est créée.

La fonction

Render accepte plus de paramètres que ce qui est fourni dans cet exemple, alors assurez-vous de vérifier la documentation si une personnalisation supplémentaire est requise. Le paramètre div accepte en fait l'ID de la div que nous allons rendre, et le paramètre tag indique ce que nous allons rendre exactement ( Résultats ou Rechercher ou les deux ).

De plus, renderSearch() trouve l'attribut de données de l'élément de wrapper, et si l'attribut de style de style , il recherchera le nom de la fonction dans la portée et l'appliquera à l'élément . C'est notre chance de coiffer l'élément.

window.__gcse = {
  parsetags: 'explicit',
  callback: renderSearchForms
};

Dans cet extrait de code, nous définissons une variable de rappel dans la portée globale afin que GCSE puisse utiliser cette variable en interne et exécuter la fonction de rappel une fois le chargement terminé. Cela rend cette méthode beaucoup mieux que d'utiliser la solution setTimeout() pour modifier l'espace réservé (ou autre chose) du champ de saisie.

Test Run

Jusqu'à présent, nous avons inclus tout ce dont nous avons besoin pour rendre la zone de recherche et les résultats. Si vous avez installé Node.js, accédez au dossier où les fichiers index.html et app.js sont placés et exécutez la commande http-server. Par défaut, cela fournira le contenu dans le dossier du port 8080 sur localhost.

Fonction de style

Maintenant, nous allons ajouter des fonctions de style personnalisé à la recherche de recherche. Return index.html et ajouter un attribut #searchForm sur le styling-function div:

<!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>

Accédez maintenant à app.js, en haut du fichier, dans la déclaration de la variable de configuration, ajoutez une nouvelle fonction:

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);
})();

Essayez maintenant de charger à nouveau la page de test et vous verrez l'espace réservé.

Conclusion

Les moteurs de recherche personnalisés Google sont très efficaces pour une configuration rapide de recherches simples, en particulier lorsque le site Web est juste un HTML statique. Avec juste une petite quantité de code JavaScript, vous pouvez personnaliser les formulaires de recherche et les pages de résultats pour fournir aux utilisateurs une expérience plus transparente.

utilisez-vous GCSE, ou avez-vous trouvé une meilleure solution? Veuillez commenter ci-dessous!

FAQ sur la définition des styles de recherche personnalisés de Google

Comment personnaliser l'apparence du moteur de recherche personnalisé de Google?

Personnaliser l'apparence de moteurs de recherche Google personnalisés impliquant l'utilisation de CSS (Cascading Styleshets). CSS est une langue de feuille de style qui décrit l'apparence et la mise en forme de documents écrits en HTML. Vous pouvez modifier la couleur, la police, la taille et d'autres éléments des moteurs de recherche. Pour ce faire, vous devez accéder à l'API de contrôle d'élément de recherche programmable, qui vous permet de personnaliser les éléments de recherche. Vous pouvez ensuite ajouter CSS à la bonne section pour modifier l'apparence du moteur de recherche.

Puis-je ajouter une recherche personnalisée Google à mon site Web?

Oui, vous pouvez ajouter des recherches personnalisées Google à votre site Web. Google fournit une API JSON Rechercher personnalisée que vous pouvez utiliser pour envoyer des demandes GET. Cette API renvoie les résultats de recherche au format JSON. Vous pouvez ensuite utiliser ces résultats pour créer un moteur de recherche personnalisé sur votre site Web. Cela permet à vos utilisateurs de rechercher votre site Web ou d'autres sites Web que vous spécifiez.

Comment implémenter la zone de recherche à l'aide de la recherche personnalisée Google?

L'implémentation d'une zone de recherche avec Google Custom Recherche implique la création d'un ID de moteur de recherche, que vous pouvez faire sur un site Web de moteur de recherche programmable. Une fois que vous avez l'ID, vous pouvez utiliser l'API de contrôle des éléments de recherche personnalisée pour créer une zone de recherche. Vous pouvez ensuite personnaliser cette zone de recherche à l'aide de CSS.

Quelle est l'API de contrôle des éléments de recherche programmable?

L'API de contrôle d'élément de recherche programmable est un ensemble de fonctions fournies par Google qui vous permet de personnaliser les moteurs de recherche programmables. Cela comprend la création de cases de recherche, la personnalisation de l'apparence des moteurs de recherche et le contrôle des résultats de recherche.

Comment contrôler les résultats de recherche dans la recherche personnalisée Google?

Vous pouvez utiliser l'API de contrôle d'élément de recherche programmable pour contrôler les résultats de recherche dans les recherches personnalisées de Google. Cette API fournit des fonctions qui vous permettent de spécifier le site Web que vous avez recherché, le nombre de résultats renvoyés et l'ordre dans lequel les résultats sont affichés.

Puis-je utiliser Google Recherche personnalisé à des fins commerciales?

Oui, vous pouvez utiliser les recherches personnalisées Google à des fins commerciales. Cependant, vous devez comprendre les conditions d'utilisation. Par exemple, vous ne pouvez pas utiliser les moteurs de recherche pour afficher le contenu des adultes ou promouvoir des activités illégales.

Comment modifier la couleur des résultats de recherche dans la recherche personnalisée Google?

Vous pouvez utiliser CSS pour modifier la couleur des résultats de recherche dans la recherche personnalisée de Google. Vous devez accéder à l'API de contrôle d'élément de recherche programmable et ajouter CSS à la section correcte. Vous pouvez modifier les couleurs du texte, de l'arrière-plan et d'autres éléments de résultat de recherche.

Puis-je utiliser Google pour rechercher sur personnalisé mon appareil mobile?

Oui, vous pouvez personnaliser les recherches à l'aide de Google sur votre appareil mobile. Le moteur de recherche programmable est conçu pour être réactif, ce qui signifie qu'il s'ajustera pour s'adapter à la taille de l'écran de l'appareil qu'elle affiche. Vous pouvez également utiliser CSS pour personnaliser l'apparence du moteur de recherche pour le rendre plus convivial.

Comment ajouter un logo dans mon moteur de recherche personnalisé Google?

Vous pouvez ajouter des logos dans mon moteur de recherche personnalisé Google à l'aide de CSS. Vous devez accéder à l'API de contrôle d'élément de recherche programmable et ajouter CSS à la section correcte. Vous pouvez ensuite ajouter une URL d'image à afficher comme logo.

Puis-je utiliser Google pour rechercher sur personnalisé sans codage de connaissances?

Bien que vous puissiez utiliser Google pour personnaliser les recherches sans connaissance de codage, il est recommandé d'avoir une certaine compréhension de HTML et CSS pour personnaliser pleinement votre moteur de recherche. Cependant, Google fournit une documentation détaillée et des tutoriels pour vous aider à démarrer.