Étapes simples pour ajouter la fonction de recherche Google aux compétences WordPress_javascript

Il existe de nombreux articles sur Internet sur la façon d'intégrer la recherche personnalisée Google dans WordPress, mais peu mentionnent comment intégrer le code v2. Aujourd'hui, à travers des tests réels, je vais vous expliquer comment intégrer la recherche personnalisée Google dans WordPress. de.

Obtenir le code de recherche personnalisé Google
Entrez http://www.google.com/cse/
Toutes les séries de comptes Google sont universelles,
Donc, si vous avez Gmail, vous pouvez accéder avec succès à ce système de recherche personnalisé
Après une série d'inscriptions et de connexions, vous entrerez dans l'interface principale du cse. La vitesse d'Internet est parfois un peu douloureusement lente, donc tout le monde doit être patient.
Entrez dans l'interface principale et cliquez sur Nouveau moteur de recherche
Remplissez le contenu comme indiqué ci-dessous :

Cochez la case pour accepter l'accord, puis cliquez sur Suivant,
Choisissez le style selon vos préférences et une démonstration apparaîtra directement ci-dessous.
Cliquez sur Suivant et le code apparaîtra.
Les gars, vous avez le code ? Le code que j'ai obtenu est le suivant :

<!-- Put the following javascript before the closing </head> tag. -->
<script>
 (function() {
 var cx = '006739494664361712883:_id_bvfkgey';
 var gcse = document.createElement('script');
 gcse.type = 'text/javascript';
 gcse.async = true;
 gcse.src = (document.location.protocol == 'https:' &#63; 'https:' : 'http:') +
  '//www.google.com/cse/cse.js&#63;cx=' + cx;
 var s = document.getElementsByTagName('script')[0];
 s.parentNode.insertBefore(gcse, s);
 })();
</script>
<gcse:searchbox></gcse:searchbox>
 
<!-- Place this tag where you want both of the search box and the search results to render -->
//下面这一对标签就是谷歌搜索框要显示的标签，
//即，你想把搜索框放哪就把这一对标签放哪。
<gcse:search></gcse:search>

Ajouter une page de recherche
Créez une nouvelle page dans votre WordPress avec la recherche d'alias
Supposons qu'une connexion fixe soit établie et que l'adresse d'accès à cette page soit
http://pangbu.com/google-search-in-wordpress
Utilisez le mode d'édition HTML et ajoutez le code que vous venez d'obtenir à l'article.
Vous voulez savoir quel est l'effet ?

Effet
Vous pouvez effectuer une recherche directement ci-dessous pour essayer.

Intégration du système
D'accord, vous avez déjà une page de recherche, il faut maintenant l'intégrer dans la recherche WordPress.
Inquiéter? Bien sûr, ce n'est pas gênant.
Recherchez le fichier qui définit le style de votre champ de recherche de thème,
Généralement searchform.php,
Certains thèmes peuvent varier légèrement.
Il y a deux phrases plus importantes,
L'une est l'adresse d'envoi du formulaire, action="XXX"
L'un est le nom du paramètre de formulaire name="s",
Le code ici est à peu près le même, je suis sûr que vous pouvez le trouver.

<form action="http://pangbu.com" method="get">
<input id="searchtxt" class="textfield searchtip" type="text" name="s" size="24" value="">

Mettez action="XXX"
Remplacez par action="URL de la page de recherche que vous venez de créer"
Pensez à apporter http, tel que

action="http://pangbu.com/google-search-in-wordpress"

changez name="s" en name="q"

Exemples de code intégrés
Mon code de style de recherche de sujet modifié est le suivant

<div id="searchbox" style="display: block;">
 <form action="http://pangbu.com/google-search-in-wordpress" method="get">
 <div class="scontent clearfix">
  <input type="text" id="searchtxt" class="textfield searchtip" name="q" size="24" value="">
  <input type="submit" id="searchbtn" class="button" value="搜索">
 </div>
 </form>
</div>