• Startseite
  • Artikel
  • Allgemein
  • So integrieren Sie die Google Custom Search Engine (CSE) ohne Plugin in die WordPress-Site (zwei verschiedene Ansätze)

So integrieren Sie die Google Custom Search Engine (CSE) ohne Plugin in die WordPress-Site (zwei verschiedene Ansätze)

Veröffentlicht: 2016-03-16

Google Custom Search für WordPress-Site

Bedeutung der Suchfunktion und warum sollten wir die benutzerdefinierte Google-Suche in WordPress verwenden?

Google oder Bing? Daran besteht kein Zweifel. Google ist die beste Suchmaschine und Suchpionier der Welt. Es gibt keinen Grund, warum Sie die benutzerdefinierte Suche von Google nicht in Ihrem WordPress-Blog verwenden sollten. Es wird auch Ihren Blog-Lesern das beste Sucherlebnis bieten. In diesem Tutorial gehen wir einfache Schritte durch, um die benutzerdefinierte Suche für Ihre WordPress-Site verfügbar zu machen.

Unter dem Dach von Alphabet ( https://abc.xyz ) ist Google ein eigenständiges Suchunternehmen. Was bedeutet das also für alle Verbraucher? Nun, ich glaube, dass sich für uns nichts ändern wird, außer dass die Berichtsstruktur geändert wurde und definitiv der NYSE-Aktienname.

Warum brauchen wir CSE (Custom Search Engine)?

Es ist sehr wichtig, eine bessere Suchfunktion auf der Website bereitzustellen. Normalerweise enthält die Hauptseite weniger als 10 Posts, aber in den meisten Fällen erhalten Ihre Blog-Benutzer möglicherweise nur die besten verwandten Artikel aus der Suche.

Plus viel schnelleres Suchergebnis als die standardmäßige WordPress-Suche + Gut für die SEO Ihrer Website, da Google diese Ergebnisliste aus der Suchanfrage kennt und sie nicht zur Liste der doppelten Inhalte hinzufügt.

Es gibt two ways , wie Sie die benutzerdefinierte Suche von Google konfigurieren können:

  1. Von der Google Adsense-Konsole (auf Crunchify verwenden wir this approach )
  2. Aus dem benutzerdefinierten Suchfeld von Google

Configuration Approach-1. Von der Google Adsense-Konsole

Schritt 1

  • Gehen Sie zu Adsense
  • Klicken Sie auf die Registerkarte My ads
  • Klicken Sie auf Search -> Custom search engines
  • Klicken Sie auf New Custom Search engine

Erstellen Sie eine neue benutzerdefinierte Suchmaschine - Google Adsense

Schritt 2

  • Name angeben. Es ist Freiformtext
  • Wählen Sie Only sites I select
  • Geben Sie den Namen Ihrer Website an

Google Adsense - CSE - Grundeinstellung

Schritt 3

Ändern Sie die folgenden Optionen nach Bedarf

  • Benutzerdefinierter Kanal
  • Suchfeldstil
  • Anzeigen-CSS-Stil

Schritt 4

Stellen Sie unter der Option Suchergebnisse sicher, dass die folgenden Einstellungen korrekt sind

  • Suchergebnisse: on my website
  • URL, unter der Suchergebnisse angezeigt werden: Die search page Ihres Blogs

Crunchify-Tipps zum Einstellen der benutzerdefinierten Google-Suchmaschine

Schritt-5

Klicken Sie auf Speichern und erhalten Sie beide Codes

  • Box Code
  • Result Code

Adsense-Suchergebnis und Suchfeldcode

Schritt-6

Gehen Sie zu Ihrer Website und erstellen Sie eine /search Seite

WordPress Suchseite erstellen

Schritt-7

Fügen Sie im Abschnitt HTML den search result code und klicken Sie auf Speichern.

Schritt-8

Gehen Sie zum Abschnitt Appearance -> Widgets , fügen Sie den search box code und klicken Sie auf Speichern. Passen Sie das CSS für das Suchfeld Ihren Bedürfnissen an. Hier ist ein benutzerdefiniertes CSS, das ich auf Crunchify verwende.

style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
. crunchify - search {
     width : 76 % ! important ;
     padding : 9px 6px 7px 6px ! important ;
     max - width : 275px ;
     margin : 10px 0px 0px 0px ! important ;
}
 
input [ type = "submit" ] {
     background - color : #dd7127;
     border : none ;
     box - shadow : none ;
     color : #fff;
     cursor : pointer ;
     font - family : 'Oswald' , sans - serif ;
     font - size : 14px ;
     font - weight : 400 ;
     letter - spacing : 1px ;
     padding : 6px 10px ;
     width : auto ;
    - webkit - font - smoothing : antialiased ;
     border - radius : 3px ;
}

Und Sie sind bereit. Versuchen Sie, nach Schlüsselwörtern zu suchen, und Sie sollten das Google-Suchergebnis auf der /search Seite sehen.

Configuration Approach-2 . Aus dem benutzerdefinierten Suchfeld von Google

Schritt 1

  • Gehen Sie zu https://cse.google.com/cse/all
  • Klicken Sie auf Suchmaschine Add

Hinzufügen-Custom-Search-Crunchify-Tipps

Schritt 2

  • Geben Sie Ihre Website-URL an
  • Klicken Sie auf Hinzufügen

Crunchify-Google-Custom-Search-Engine-Setup

Schritt 3

  • Klicken Sie auf Ihre neu erstellte Suchmaschine
  • Gehen Sie zum Abschnitt Look and feel
  • Wechseln Sie zur Registerkarte „ Layout “.
  • Wählen Sie Two Page
  • Klicken Sie auf Save and Get Code

Schritt 4

  • Code für Suchfeld abrufen
    • Legen Sie es in die Seitenleiste
  • Code für Suchergebnis abrufen
    • Erstellen Sie die Seite http://<yourblog.com>/search
    • Fügen Sie Code in diese Seite ein

Schritt-5

Versuchen Sie, nach Schlüsselwörtern wie Google Apps zu suchen, und Sie sollten ein Ergebnis wie dieses sehen.

Google-Benutzerdefiniertes-Suchergebnis-Crunchify

Ergebnistafel:

Google-CSE-Suchergebnis-Crunchify

Schritt-6

Vor einiger Zeit haben wir bei Crunchify das Ergebnis mit dem folgenden benutzerdefinierten CSS modifiziert:

Stylish Google Custom Search - Custom CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
/* Change Search Button Code  */
input . gsc - search - button {
     padding : 10px ! important ;
     height : 35px ! important ;
     border - color : #c12129 !important;
     background - color : #c12129 !important;
     color : #fff !important;
}
 
/* Change Search Button Hover Color */
input . gsc - search - button : hover {
     border - color : #444 !important;
     background - color : #444 !important;
}
 
/* Change Bottom Margin after each result */
. gsc - control - cse . gsc - table - result {
     margin - bottom : 10px ! important ;
}
 
/* Hide URL from search result */
. gsc - url - top , . gsc - url - bottom {
     display : none ! important ;
}
 
/* Change input field look and feel */
input . gsc - input {
     padding : 10px ! important ;
     margin - left : 0px ;
     background - position : right center ! important ;
     background - repeat : no - repeat ! important ;
}
 
/* Hide number of result count */
. gsc - result - info {
     display : none ;
}
. gs - webResult : hover {
     background - color : #eee;
}
 
/* Change mouse hover result background change */
. gsc - cursor - page {
     font - size : 1.1em ;
     padding : 3px 7px ;
     border : 2px solid #eee;
     background - color : #eee !important;
}
 
/* Change search result heading font size change */
. gsc - result . gs - title {
     height : 2.0em ! important ;
     font - size : 16px ! important ;
}
 
. gs - result . gs - snippet {
     line - height : 19px ! important ;
}
 
/* Remove Clear cross image and CSS adjustment - below 3 CSS prop changes */
div . gsc - clear - button {
     display : none ! important ;
}
td . gsc - clear - button {
     width : 0px ! important ;
}
td . gsc - input {
     padding - right : 1px ! important ;
}

Schauen wir uns nun beide Abfragen an:

Approach-1 :

  • https://crunchify.com/ search/?cx= partner-pub-xxxxxxxxxxxxxxxxxx%3A9846869911&cof=FORID%3A10&ie=UTF-8&q=Crunchify&sa=Search……

Approach-2 :

  • https://crunchify.com/search/?q =Google% search/?q (Dies wird nicht funktionieren, da wir eine .htaccess-Regel haben)

Wie Sie oben sehen, haben beide Ansätze different query parameters .

Was als nächstes?

Bitte stellen Sie sicher, dass Sie die JSON-LD Schema URL des Sitelinks-Suchfelds von Google aktualisieren.

Validieren Sie die JSON-LD Schema.org-Markup-URL des WordPress-Sitelinks-Suchfelds