Tutoriel de configuration de l'API de recherche Google personnalisé

Ce tutoriel vous montre comment intégrer une API de recherche Google personnalisée dans votre blog ou site Web, offrant une expérience de recherche plus raffinée que les fonctions de recherche de thème WordPress standard. C'est étonnamment facile! Vous serez en mesure de restreindre les recherches à votre site et de personnaliser l'affichage pour correspondre à l'esthétique de votre site Web.

Voici comment le faire:

1. Obtenez votre clé API Google: Ceci est votre clé d'authentification.
2. Intégrez votre clé: Insérez la clé dans le code JavaScript ci-dessous.
3. Personnalisez la recherche: Spécifiez votre nom de domaine pour les recherches restreintes.
4. Style la recherche: Ajustez le CSS pour correspondre à la conception de votre site Web.
5. Profitez de votre recherche améliorée!

Code javascript:

google.load("search", "1", {"language" : "en"});

function initialize() {
  var searchControl = new google.search.SearchControl();

  // Site-restricted web search
  var siteSearch = new google.search.WebSearch();
  siteSearch.setUserDefinedLabel("jquery4u.com"); // Replace with your domain
  siteSearch.setUserDefinedClassSuffix("siteSearch");
  siteSearch.setSiteRestriction("jquery4u.com"); // Replace with your domain
  searchControl.addSearcher(siteSearch);

  // Add other search types (Web, News, Blog, Image, Book, Video)
  searchControl.addSearcher(new google.search.WebSearch());
  searchControl.addSearcher(new google.search.NewsSearch());
  searchControl.addSearcher(new google.search.BlogSearch());
  searchControl.addSearcher(new google.search.ImageSearch());
  searchControl.addSearcher(new google.search.BookSearch());
  searchControl.addSearcher(new google.search.VideoSearch());
  // Optional: LocalSearch, PatentSearch

  // Tabbed display
  var drawOptions = new google.search.DrawOptions();
  drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);
  searchControl.draw(document.getElementById("searchcontrol"), drawOptions);
}
google.setOnLoadCallback(initialize);

CODE HTML:

<div id="searchcontrol"></div>

Code CSS:

#searchcontrol, .gsc-control, .gsc-results { width: 600px; }
.gsc-input { width: 200px; } /* Increased input width for better usability */
.gsc-branding { display: none; } /* Hide "powered by Google" */
.gs-title a { color: orange; font-weight: bold; }
#searchcontrol a { color: orange; }

N'oubliez pas de remplacer "jquery4u.com" par votre nom de domaine réel. Ce CSS amélioré élargit également la zone d'entrée de recherche pour un tapage plus facile.

API de recherche Google AJAX FAQ:

Cette section répond aux questions courantes sur l'utilisation de l'API de recherche Google AJAX. Les détails de la mise en œuvre, des avantages, des limites, de l'utilisation commerciale, du dépannage, de la personnalisation, de l'optimisation, de la tarification et du support sont fournis dans l'article d'origine.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!