Поиск по сайту от Google. Установка и настройка

Доброго времени суток, уважаемые читатели! Сегодня я хочу показать вам, как установить на свой сайт/блог систему пользовательского поиска по сайту от поисковой системы Google, или проще говоря google поиск по сайту.

На некоторых сайтах можно встретить сторонние скрипты поиска, как правило от Google, или от Яндекс. Почему владельцы ставят сторонние скрипты поиска? Ответ прост — во-первых, это разгрузка сайта, во-вторых, стандартный поиск не всегда выдает корректные результаты поиска.

На WordPress можно поставить дополнительные плагины для улучшения результатов стандартного поиска, но это создаст дополнительную, пусть и небольшую, нагрузку на блог.

Здесь я приведу пример установки пользовательского поиска по сайту от Google на WordPress.

Google поиск по сайту

Идем на страницу Google. Пользовательский поиск. У Вас должен быть аккаунт Google.

Нажимаем на Add, или новая поисковая система, попадаем на следующую страницу:

Вводим URL своего сайта, выбираем русский язык и нажимаем Создать.

Дальше на примере своей поисковой системы покажу, как я ее настраивал.

После создания пооисковой системы идем в основные настройки. Там указываем название нашей поисковой системы, ключевые слова, которые будут выделены жирным шрифтом в результатах поиска. Ещё можно добавить сайт и даже не один, по которому будет производиться поиск этой поисковой системой.

Переходим к настройкам внешнего вида.

Я выбрал вид На развороте. Благодаря этому результаты поиска будут открываться на другой странице блога.

Далее переходим на вкладку Настроить и устанавливаем настройки цветов для поисковой строки и результатов поиска по своему вкусу:

Нажимаем Сохранить и получить код.
Не забываем указать адрес страницы, которую нужно обязательно добавить (в моем случае это http://makoveckij.ru/results), на которой мы хотим вывести результаты поиска и название параметра запроса (у меня ‘q’, но можно и другое), которое будет добавляться в URL, нажав на сведения о результатах поиска:

Копируем код для поисковой строки, после чего получаем и копируем код для вставки на страницу результатов поиска.

Привожу примеры кодов, которые установлены на этом блоге:

Код поисковой строки, который можно вставить в виджет, или файл темы sidebar.php:

1
2
3
4
5
6
7
8
9
10
11
12

<!-- Put the following javascript before the closing </head> tag. -->  
<script>
  (function() {
    var cx = '009087329259852257350:6fonoxh4_k8';
    var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
  })();
</script>
<!-- Place this tag where you want the search box to render -->
<gcse:searchbox-only></gcse:searchbox-only>

Если Вы захотите разместить поисковую строку в самом сайдбаре, а не в виджете, желательно указать максимально допустимую ширину поисковой строки с помощью параметра width в пикселях. По умолчанию ширина поисковой строки 100%.

Код на странице результатов поиска (в моем случае на http://makoveckij.ru/results)

1
2
3
4
5
6
7
8
9
10
11

<script>
  (function() {
    var cx = '009087329259852257350:6fonoxh4_k8';
    var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
  })();
</script><br />
<!-- Place this tag where you want the search results to render --><br />
<gcse:searchresults-only></gcse:searchresults-only>

А вот как выглядит страница результатов поиска (можете сами протестировать :-)):