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

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

804
0

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

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

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

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

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

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

Есть two ways Вы можете настроить Google Custom Search:

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

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

Шаг 1

  • Идти к Adsense
  • Нажмите на My ads табуляция
  • Нажмите на Search -> Custom search engines
  • Нажмите на New Custom Search engine

Шаг 2

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

Шаг 3

Измените параметры ниже, как вам нужно

  • Пользовательский канал
  • Стиль окна поиска
  • Стиль объявления

Шаг 4

Под опцией Результаты поиска убедитесь, что настройки ниже правильные

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

Шаг 5

Нажмите сохранить и получите оба кода

  • Поиск Box Code
  • Поиск Result Code

Шаг 6

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

Шаг 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 - поиск {
     ширина : 76 % ! важно ;
     набивка : 9px 6px 7px 6px ! важно ;
     max - ширина : 275 пикселей ;
     поле : 10px 0px 0px 0px ! важно ;
}
input [ type = submit ] {
     цвет фона : # dd7127;
     граница : нет ;
     коробка - тень : нет ;
     цвет : #fff;
     курсор : указатель ;
     font - family : 'Освальд' , без засечек ;
     размер шрифта : 14px ;
     шрифт - вес : 400 ;
     межбуквенный интервал : 1px ;
     набивка : 6px 10 пикселей ;
     ширина : авто ;
     - webkit - шрифт - сглаживание : сглаженный ;
     граница - радиус : 3 пикселя ;
}

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

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

Шаг 1

Шаг 2

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

Шаг 3

  • Нажмите на недавно созданную поисковую систему
  • Идти к Look and feel Раздел
  • Идти к Layout табуляция
  • Выбрать Two Page
  • Нажмите Save and Get Code

Шаг 4

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

Шаг 5

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

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

Шаг 6

Некоторое время назад на Crunchify мы изменили результат с помощью пользовательского CSS:

Стильный Google Custom Search - Пользовательский 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
/ * Изменить код кнопки поиска * /
вход . gsc - кнопка поиска {
     набивка : 10px ! важно ;
     высота : 35px ! важно ;
     бордюр - цвет : # c12129! важный;
     цвет фона : # c12129! важный;
     цвет : #fff! важный;
}
/ * Изменить кнопку поиска при наведении цвета * /
вход . GSC - Поиск - кнопка: зависать {
     бордюр - цвет : # 444! Важно;
     цвет фона : # 444! Важно;
}
/ * Изменять нижнюю маржу после каждого результата * /
, gsc - control - cse , gsc - таблица - результат {
     поле - снизу : 10px ! важно ;
}
/ * Скрыть URL из результатов поиска * /
, gsc - url - top , , gsc - url - bottom {
     дисплей : никто ! важно ;
}
/ * Изменить внешний вид поля ввода * /
вход . GSC - вход {
     набивка : 10px ! важно ;
     Маржа - слева: 0px ;
     фон - позиция : правый центр ! важно ;
     фон - повторить : нет - повторить ! важно ;
}
/ * Скрыть номер счета результатов * /
, GSC - результат - информация {
     дисплей : нет ;
}
, gs - webResult : hover {
     цвет фона : #eee;
}
/ * Изменить результат наведения мыши на изменение фона * /
, gsc - курсор - страница {
     размер шрифта : 1.1em ;
     набивка : 3px 7 пикселей ;
     граница : 2px твердый #eee;
     цвет фона : #eee! важно;
}
/ * Изменить размер шрифта заголовка результата поиска * /
, gsc - результат , gs - название {
     высота : 2.0em ! важно ;
     размер шрифта : 16px ! важно ;
}
, гс - результат , gs - фрагмент {
     линия - высота : 19px ! важно ;
}
/ * Удалите Очистить перекрестное изображение и настройку CSS - ниже 3 изменений в CSS * /
дела. GSC - очистить - кнопка {
     дисплей : никто ! важно ;
}
тд. GSC - очистить - кнопка {
     ширина : 0px ! важно ;
}
тд. GSC - вход {
     отступ - справа : 1px ! важно ;
}

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

Approach-1 :

  • https://crunchify.com/ search/?cx= партнер-паб-xxxxxxxxxxxxxxxxx% 3A9846869911 & кок = FORID% 3A10 & т.е. = UTF-8 & д = Crunchify & са = Поиск ......

Approach-2 :

  • https://crunchify.com/ search/?q = Google% 20Apps (это не будет работать, так как у нас есть правило .htaccess )

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

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

0.00 (0%) 0 votes

ЧИТАТЬ ТАКЖЕ:  Случайно нажали на вашу рекламу AdSense? Недопустимая активность, приостановка аккаунта, политика и рекомендации

ОСТАВЬТЕ ОТВЕТ

Пожалуйста, введите ваш комментарий!
пожалуйста, введите ваше имя здесь