Einfache Schritte zum Hinzufügen der Google-Suchfunktion zu WordPress_Javascript-Kenntnissen

Es gibt viele Artikel im Internet darüber, wie man die benutzerdefinierte Google-Suche in WordPress integriert, aber nur wenige erwähnen, wie man den v2-Code integriert. Heute werde ich Ihnen durch tatsächliche Tests erklären, wie man die benutzerdefinierte Google-Suche in WordPress integriert. von.

Holen Sie sich den benutzerdefinierten Google-Suchcode
Geben Sie http://www.google.com/cse/ ein
Alle Serien von Google-Konten sind universell,
Wenn Sie also über Gmail verfügen, können Sie dieses benutzerdefinierte Suchsystem erfolgreich aufrufen
Nach einer Reihe von Registrierungen und Anmeldungen gelangen Sie zur Hauptoberfläche von cse. Die Internetgeschwindigkeit ist manchmal etwas schmerzhaft langsam, daher müssen sich alle gedulden.
Rufen Sie die Hauptoberfläche auf und klicken Sie auf Neue Suchmaschine
Füllen Sie den Inhalt wie unten gezeigt aus:

Aktivieren Sie das Kästchen, um der Vereinbarung zuzustimmen, und klicken Sie dann auf Weiter,
Wählen Sie den Stil nach Ihren Wünschen und eine Demonstration wird direkt darunter angezeigt.
Klicken Sie auf Weiter und der Code wird angezeigt.
Leute, habt ihr den Code? Der Code, den ich erhalten habe, lautet wie folgt:

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

Suchseite hinzufügen
Erstellen Sie mit der Alias-Suche eine neue Seite in Ihrem WordPress
Gehen Sie davon aus, dass eine feste Verbindung eingerichtet ist und die Zugriffsadresse dieser Seite
ist http://pangbu.com/google-search-in-wordpress
Verwenden Sie den HTML-Bearbeitungsmodus und fügen Sie den soeben erhaltenen Code zum Artikel hinzu.
Möchten Sie wissen, was der Effekt ist?

Wirkung
Sie können direkt unten suchen, um es auszuprobieren.

Systemintegration
Okay, Sie haben bereits eine Suchseite, jetzt müssen wir sie in die WordPress-Suche integrieren.
Problem? Natürlich ist es nicht störend.
Suchen Sie die Datei, die den Stil Ihres Theme-Suchfelds definiert,
Normalerweise searchform.php,
Einige Themen können leicht variieren.
Es gibt noch zwei weitere wichtige Sätze,
Eine davon ist die Adresse für die Formularübermittlung, action="XXX"
Einer davon ist der Formularparametername name="s",
Der Code hier ist ziemlich gleich, ich bin sicher, Sie können ihn finden.

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

Put action="XXX"
Wechseln Sie zu action="URL der Suchseite, die Sie gerade erstellt haben"
Denken Sie daran, http mitzubringen, z. B.

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

Ändern Sie name="s" in name="q"

Integrierte Codebeispiele
Mein geänderter Stilcode für die Themensuche lautet wie folgt

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