• Pagina principala
  • Articole
  • General
  • Cum să includeți motorul de căutare personalizat Google (CSE) pe site-ul WordPress fără plugin (două abordări diferite)

Cum să includeți motorul de căutare personalizat Google (CSE) pe site-ul WordPress fără plugin (două abordări diferite)

Publicat: 2016-03-16

Căutare personalizată Google pentru site-ul WordPress

Semnificația funcției de căutare și de ce ar trebui să folosim Google Custom Search pe WordPress?

Google sau Bing? Nu există nici o îndoială. Google este cel mai bun motor de căutare și pionier de căutare din lume. Nu există niciun motiv pentru care să nu utilizați Google Custom Search pe blogul dvs. WordPress. De asemenea, va oferi cea mai bună experiență de căutare cititorilor dvs. de blog. În acest tutorial, vom trece peste pași simpli pentru a avea la dispoziție Căutarea personalizată pentru site-ul dvs. WordPress.

Sub umbrela Alphabet ( https://abc.xyz ), Google este o companie de căutare independentă. Deci, ce înseamnă asta pentru toți consumatorii? Ei bine, cred că nu se va schimba nimic pentru noi, cu excepția faptului că structura de raportare a fost schimbată și cu siguranță numele acțiunilor NYSE.

De ce avem nevoie de CSE (Custom Search Engine)?

Este foarte important să oferim o funcționalitate de căutare mai bună pe site. De obicei, pagina principală conține mai puțin de 10 postări, dar în majoritatea cazurilor utilizatorii blogului dvs. pot obține cele mai bune articole similare numai din Căutare.

Plus un rezultat de căutare mult mai rapid decât căutarea implicită WordPress + Bun pentru SEO site-ului dvs. deoarece Google cunoaște această listă de rezultate din interogarea de căutare și nu o adaugă la lista de conținut duplicat.

Există two ways prin care puteți configura Căutarea personalizată Google:

  1. Din Consola Google Adsense (pe Crunchify folosim this approach )
  2. Din panoul de căutare personalizată Google

Configuration Approach-1. Din consola Google Adsense

Pasul 1

  • Accesați Adsense
  • Faceți clic pe fila My ads
  • Faceți clic pe Search -> Custom search engines
  • Faceți clic pe New Custom Search engine

Creați un nou motor de căutare personalizat - Google Adsense

Pasul 2

  • Furnizați Name . Este text în formă liberă
  • Selectați Only sites I select
  • Specificați numele site-ului dvs

Google Adsense - CSE - Setare de bază

Pasul 3

Modificați opțiunile de mai jos după cum aveți nevoie

  • Canal personalizat
  • Stilul casetei de căutare
  • Stilul CSS de anunț

Pasul-4

În opțiunea Rezultatele căutării, asigurați-vă că setările de mai jos sunt corecte

  • Rezultatele căutării: on my website
  • Adresa URL unde vor fi afișate rezultatele căutării: search page a blogului dvs

Crunchify Sfaturi pentru setarea motorului de căutare personalizat Google

Pasul-5

Faceți clic pe Salvați și obțineți ambele coduri

  • Box Code căutare
  • Result Code căutării

Rezultatul căutării AdSense și codul casetei de căutare

Pasul-6

Accesați site-ul dvs. și creați pagina /search

WordPress Creați o pagină de căutare

Pasul-7

În secțiunea HTML , inserați search result code și faceți clic pe Salvați.

Pasul-8

Accesați secțiunea Appearance -> Widgets și inserați search box code și faceți clic pe Salvare. Modificați caseta de căutare CSS în funcție de nevoile dvs. Iată un CSS personalizat pe care îl folosesc pe Crunchify.

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

Și ești gata. Încercați să căutați cuvinte cheie și ar trebui să vedeți rezultatul căutării Google pe /search .

Configuration Approach-2 . Din panoul de căutare personalizată Google

Pasul 1

  • Accesați https://cse.google.com/cse/all
  • Faceți clic pe Add motor de căutare

Adăugați-Custom-Search-Crunchify-Sfaturi

Pasul 2

  • Furnizați adresa URL a site-ului dvs
  • Faceți clic pe Adăugați

Crunchify-Google-Custom-Search-Engine-Setup

Pasul 3

  • Faceți clic pe motorul de căutare nou creat
  • Accesați secțiunea Look and feel
  • Accesați fila Layout
  • Selectați Two Page
  • Faceți clic pe Save and Get Code

Pasul-4

  • Obțineți codul pentru caseta de căutare
    • Pune-l în bara laterală
  • Obțineți codul pentru rezultatul căutării
    • Creați pagina http://<yourblog.com>/search
    • Pune codul în această pagină

Pasul-5

Încercați să căutați cuvinte cheie precum Google Apps și ar trebui să vedeți un rezultat ca acesta.

Google-Custom-Search-Result-Crunchify

Panoul de rezultate:

Google-CSE-Search-Result-Crunchify

Pasul-6

Cu ceva timp în urmă, pe Crunchify , am modificat rezultatul cu CSS personalizat de mai jos:

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

Acum să aruncăm o privire la ambele interogări:

Approach-1 :

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

Approach-2 :

  • https://crunchify.com/ search/?q =Google%20Apps (Acest lucru nu va funcționa, deoarece avem regula .htaccess)

După cum vedeți mai sus – ambele abordări au different query parameters .

Ce urmează?

Asigurați-vă că actualizați adresa URL a JSON-LD Schema din caseta de căutare sitelinkuri Google.

Validați caseta de căutare pentru sitelinkuri WordPress JSON-LD Schema.org Markup URL