Jak dołączyć Google Custom Search Engine (CSE) do witryny WordPress bez wtyczki (dwa różne podejścia)

Opublikowany: 2016-03-16

Niestandardowa wyszukiwarka Google dla witryny WordPress

Znaczenie funkcji wyszukiwania i dlaczego powinniśmy używać wyszukiwarki niestandardowej Google w WordPress?

Google czy Bing? Nie ma wątpliwości. Google jest najlepszą wyszukiwarką i pionierem wyszukiwania na świecie. Nie ma powodu, dla którego nie powinieneś używać Google Custom Search na swoim blogu WordPress. Zapewni to również najlepsze wrażenia z wyszukiwania czytelnikom Twojego bloga. W tym samouczku omówimy proste kroki, aby Twoja wyszukiwarka była dostępna dla Twojej witryny WordPress.

Pod parasolem Alphabet ( https://abc.xyz ) Google jest samodzielną firmą zajmującą się wyszukiwaniem. Co to oznacza dla wszystkich konsumentów? Cóż, wierzę, że nic się dla nas nie zmieni, poza tym, że zmieniono strukturę raportowania i zdecydowanie nazwę akcji NYSE.

Dlaczego potrzebujemy CSE (Custom Search Engine)?

Zapewnienie lepszej funkcjonalności wyszukiwania w witrynie jest bardzo ważne. Zwykle strona główna zawiera mniej niż 10 postów, ale w większości przypadków użytkownicy Twojego bloga mogą otrzymywać najlepiej powiązane artykuły tylko z wyszukiwarki.

Plus znacznie szybszy wynik wyszukiwania niż domyślna wyszukiwarka WordPress + Dobre dla SEO Twojej witryny, ponieważ Google zna tę listę wyników z zapytania i nie dodaje jej do zduplikowanej listy treści.

Istnieją two ways konfiguracji Twojej wyszukiwarki Google:

  1. Z Google Adsense Console (w Crunchify używamy this approach )
  2. Z panelu wyszukiwarki niestandardowej Google

Configuration Approach-1. Z konsoli Google Adsense

Krok 1

  • Przejdź do Adsense
  • Kliknij kartę My ads
  • Kliknij Search -> Custom search engines
  • Kliknij New Custom Search engine

Utwórz nową niestandardową wyszukiwarkę – Google Adsense

Krok 2

  • Podaj Name . To jest dowolny tekst
  • Wybierz Only sites I select
  • Podaj nazwę swojej strony internetowej

Google Adsense – CSE – Ustawienie podstawowe

Krok 3

Zmodyfikuj poniższe opcje zgodnie z potrzebami

  • Kanał niestandardowy
  • Styl pola wyszukiwania
  • Styl CSS reklamy

Krok 4

W opcji Wyniki wyszukiwania upewnij się, że poniższe ustawienia są prawidłowe

  • Wyniki wyszukiwania: on my website
  • Adres URL, pod którym będą wyświetlane wyniki wyszukiwania: search page Twojego bloga

Crunchify Wskazówki dotyczące ustawiania Google Custom Search Engine

Krok-5

Kliknij Zapisz i uzyskaj oba kody

  • Box Code wyszukiwania
  • Result Code wyszukiwania

Wynik wyszukiwania AdSense i kod pola wyszukiwania

Krok-6

Przejdź do swojej witryny i utwórz /search

WordPress Utwórz stronę wyszukiwania

Krok-7

W sekcji HTML wklej search result code i kliknij Zapisz.

Krok 8

Przejdź do sekcji Appearance -> Widgets i wklej search box code i kliknij Zapisz. Zmodyfikuj CSS pola wyszukiwania zgodnie z potrzebami. Oto niestandardowy CSS, którego używam w 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 wszystko gotowe. Spróbuj wyszukać słowa kluczowe, a powinieneś zobaczyć wynik wyszukiwania Google na stronie /search .

Configuration Approach-2 . Z panelu wyszukiwarki niestandardowej Google

Krok 1

  • Wejdź na https://cse.google.com/cse/all
  • Kliknij Add wyszukiwarkę

Dodaj-niestandardowe-wyszukiwanie-wskazówki-Crunchify

Krok 2

  • Podaj adres URL swojej witryny
  • Kliknij Dodaj

Crunchify-Google-niestandardowa-konfiguracja-wyszukiwarki

Krok 3

  • Kliknij na nowo utworzoną wyszukiwarkę
  • Przejdź do sekcji „ Look and feel ”
  • Przejdź do Layout
  • Wybierz Two Page
  • Kliknij Save and Get Code

Krok 4

  • Pobierz kod do pola wyszukiwania
    • Umieść to na pasku bocznym
  • Uzyskaj kod wyniku wyszukiwania
    • Utwórz stronę http://<yourblog.com>/search
    • Umieść kod na tej stronie

Krok-5

Spróbuj wyszukać słowo kluczowe, takie jak Google Apps, a powinieneś zobaczyć taki wynik.

Google-Custom-Search-Result-Crunchify

Panel wyników:

Google-CSE-Search-Result-Crunchify

Krok-6

Jakiś czas temu w Crunchify zmodyfikowaliśmy wynik za pomocą poniższego niestandardowego kodu CSS:

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

Przyjrzyjmy się teraz obu zapytaniom:

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 (to nie zadziała, ponieważ mamy regułę .htaccess)

Jak widać powyżej – oba podejścia mają different query parameters .

Co następne?

Pamiętaj, aby zaktualizować adres URL JSON-LD Schema w polu wyszukiwania linków do podstron Google.

Sprawdź poprawność pola wyszukiwania linków do podstron WordPressa JSON-LD Schema.org Markup URL