Как включить систему пользовательского поиска Google (CSE) на сайт WordPress без плагина (два разных подхода)

Опубликовано: 2016-03-16

Пользовательский поиск Google для сайта WordPress

Значение функциональности поиска и почему мы должны использовать пользовательский поиск Google на WordPress?

Гугл или Бинг? Насчет этого сомнений нет. Google — лучшая поисковая система и пионер поиска в мире. Нет никаких причин, по которым вы не должны использовать пользовательский поиск Google в своем блоге WordPress. Читателям вашего блога также будет удобнее искать. В этом руководстве мы рассмотрим простые шаги, чтобы сделать пользовательский поиск доступным для вашего сайта WordPress.

Под эгидой Alphabet ( https://abc.xyz ) Google является отдельной поисковой компанией. Итак, что это значит для всех потребителей? Что ж, я считаю, что для нас ничего не изменится, за исключением того, что изменилась структура отчетности и определенно название акции NYSE.

Зачем нам нужна CSE (система пользовательского поиска)?

Очень важно обеспечить лучшую функциональность поиска на сайте. Обычно главная страница содержит менее 10 постов, но в большинстве случаев пользователи вашего блога могут получать наиболее релевантные статьи только из поиска.

Плюс гораздо более быстрый результат поиска, чем поиск WordPress по умолчанию + Хорошо для SEO вашего сайта, так как Google знает этот список результатов из поискового запроса и не добавляет его в список дублированного контента.

Пользовательский поиск Google можно настроить two ways :

  1. Из консоли Google Adsense (в Crunchify мы используем this approach )
  2. Из панели пользовательского поиска Google

Configuration Approach-1. Из консоли Google Adsense

Шаг 1

  • Перейти к Adsense
  • Нажмите на вкладку My ads
  • Нажмите « Search » -> Custom search engines ».
  • Нажмите New Custom Search engine ».

Создать новую систему пользовательского поиска - Google Adsense

Шаг 2

  • Укажите Name . Это текст в свободной форме
  • Выбрать Only sites I select
  • Укажите название вашего сайта

Google Adsense – СПП – базовая настройка

Шаг 3

Измените ниже параметры в соответствии с вашими потребностями

  • Клиентский канал
  • Стиль окна поиска
  • CSS-стиль объявления

Шаг-4

В разделе «Результаты поиска» убедитесь, что указанные ниже настройки верны.

  • Результаты поиска: on my website
  • URL-адрес, по которому будут отображаться результаты поиска: search page вашего блога.

Советы Crunchify по настройке системы пользовательского поиска Google

Шаг-5

Нажмите «Сохранить» и получите оба кода.

  • Box Code поиска
  • Result Code поиска

Результат поиска AdSense и код окна поиска

Шаг-6

Зайдите на свой сайт и создайте страницу /search

WordPress Создать страницу поиска

Шаг-7

В разделе HTML вставьте search result code и нажмите «Сохранить».

Шаг-8

Перейдите в раздел « Appearance » -> « Widgets », вставьте search box code и нажмите «Сохранить». Измените CSS окна поиска в соответствии с вашими потребностями. Вот пользовательский CSS, который я использую в 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 ;
}

И все готово. Попробуйте выполнить поиск по ключевым словам, и вы должны увидеть результаты поиска Google на странице /search .

Configuration Approach-2 . Из панели пользовательского поиска Google

Шаг 1

  • Перейдите на https://cse.google.com/cse/all.
  • Нажмите Add поисковую систему

Add-Custom-Search-Crunchify-Tips

Шаг 2

  • Укажите URL вашего сайта
  • Нажмите Добавить

Crunchify-Google-Custom-Search-Engine-Setup

Шаг 3

  • Нажмите на недавно созданную поисковую систему.
  • Перейти в раздел Look and feel
  • Перейти на вкладку « Layout »
  • Выберите Two Page
  • Нажмите Save and Get Code

Шаг-4

  • Получить код для окна поиска
    • Поместите это в боковую панель
  • Получить код для результата поиска
    • Создайте страницу http://<youurblog.com>/search
    • Поместите код на эту страницу

Шаг-5

Попробуйте выполнить поиск по ключевому слову, например Google Apps, и вы должны увидеть такой результат.

Google-Custom-Search-Result-Crunchify

Панель результатов:

Google-CSE-Результат поиска-Crunchify

Шаг-6

Некоторое время назад на Crunchify мы изменили результат с помощью следующего пользовательского 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 ;
}

Теперь давайте посмотрим на оба запроса:

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 (это не сработает, так как у нас есть правило .htaccess)

Как вы видите выше, оба подхода имеют different query parameters .

Что дальше?

Обязательно обновите URL-адрес JSON-LD Schema окна поиска дополнительных ссылок Google.

Проверка поля поиска дополнительных ссылок WordPress URL-адрес разметки JSON-LD Schema.org