Как добавить поиск Google на свой сайт

Многие пользователи любят WordPress из-за его возможностей при управлении контентом. Эта CMS позволяет нам создать сайт в течение нескольких минут, наполнить его содержанием и включить десятки виджетов и меню, но что касается поиска, то эта не самая сильная сторона этого движка. Функция поиска WordPress  была проблемной с самого начала. Результаты поиска не так точны, как они должны были быть, критерии поиска устанавливаются по дате, а не по релевантности. Разработчики предлагают решения, такие как плагины и пользовательские функции, но есть лучшая альтернатива нативному поиску WordPress.

Лучший способ создания поиска на любом веб-сайте - это воспользоваться возможностями мирового лидера в поисковых технологиях - компании Google. Google выпустила сервис под названием "Google Custom Search Engine", который может быть интегрирован в любой веб-сайт. Не волнуйтесь, в результатах поиска не будут выводится сайты со всей Сети, результаты поиска ограничиваются только контентом с вашего сайта. Кроме того, у Вас будет возможность зарабатывать деньги с объявлений Google, которые отображаются в результатах поиска.

В данной статье описывается интеграция поиска Google в сайт работающий на WordPress. Первое, что вам нужно сделать, это настроить поисковую систему для вашего сайта. Перейдите на страницу http://www.google.com/cse/ и следуйте инструкциям Google:

Нажмите на кнопку "Войти в Систему пользовательского поиска".

Как добавить поиск Google на свой сайт

Введите имя и описание для своей поисковой системы и выберите язык для неё. Добавьте URL своего сайта, чтобы Google мог отображать результаты поиска на его страницах. "Стандартный пакет" для создания поиска бесплатный, но в результатах поиска будут выводится рекламные объявления, с которых вы также будете получать процент прибыли. Но если вы не хотите, чтобы рекламные объявления отображались в результатах поиска, вам придется платить 100 долларов США в год.

Как добавить поиск Google на свой сайт. Шаг 1

На следующей странице, у Вас есть возможность выбрать готовые стили или настроить собственные для ваших результатов поиска: поисковая строка, цвет текста, заголовка, шрифт, кнопки поиска, результаты и даже стили для рекламных объявлений. (Нажмите на изображение для его увеличения)

Как добавить поиск Google на свой сайт. Шаг 2

Как добавить поиск Google на свой сайт. Настройка стилей

После настройки стилей нажмите на кнопку Далее. На третьей странице вы сможете получить сгенерированный код для поисковой системы.

Как добавить поиск Google на свой сайт. Шаг 3

Это обычный код JavaScript, который может быть разделен на две части: первая, это код, который должен быть добавлен перед закрывающим тегом </ head> на вашем сайте, а вторая часть добавляется в тело страницы, в то место где будет выводится форма поиска. Это стандартный код для поиска, который будет показывать результаты на этой же странице. Это означает, что если вы поместите вторую часть кода, например, в боковой панели, то и результаты будут отображаться в боковой панели, и это, конечно, не то, что нам необходимо. Поэтому настроим нашу пользовательскую форму поиска, чтобы она возвращала результаты поиска Google на отдельной странице. Следующее, что вам нужно сделать, это нажать на ссылку "Изменить внешний вид":

Следующий шаг, выберите иконку "Только результаты", затем нажмите «Сохранить и получить код".

Как добавить поиск Google на свой сайт. Панель управления

Далее вы можете указать имя параметра запроса, который будет встраиваться в URL, таким образом "http://www.webmasters.by/search-results/?q=wordpress".

Как добавить поиск Google на свой сайт. Получить код

Получив код, разместите первую его часть в header.php в вашей теме Wordpress, перед закрывающим тегом </ head>:

<!-- Put the following javascript before the closing </head> tag. -->
<script>
  (function() {
    var cx = '00107852214872578004:xgt8vpuak';
    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>

Теперь мы должны создать шаблон страницы, на которой Google может выводить результаты поиска. В папке вашей темы WordPress, создайте новый файл, назовите его "template-search.php" и вставьте в него следующий код (я использовал файл page.php из темы TwentyTwelve в качестве основы для структуры страницы. Вы же должны использовать page.php из папки со своей темой для создания шаблона):

<?php
/*
Template Name: Результаты поиска
 */

?>
 
<?php get_header(); ?>
 
    <div id="primary">
        <div id="content" role="main">
 
            <?php while ( have_posts() ) : the_post(); ?>
 
                <!-- This tag will render search results: -->
                <gcse:searchresults-only></gcse:searchresults-only>
 
            <?php endwhile; // end of the loop. ?>
 
        </div><!-- #content -->
   </div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Теперь, когда вы создали шаблон страницы поиска, перейдите в админку WordPress, создайте новую страницу и примените к ей шаблон "Результаты поиска". Обратите внимание, что, поскольку я назвал мою страницу "Результаты поиска", то автоматически создастся ссылка "http://www.webmasters.by/результаты-поиска/", переименуйте её лучше в "search" или "search-results". Смотрите скриншот ниже:

Как добавить поиск Google на свой сайт. Выбираем шаблон

Давайте теперь создадим пользовательскую форму поиска. Если у вас нет файла под названием "searchform.php" в папке с темой WordPress, то создайте его и добавьте следующий код:

<form method="get" action="http://www.webmasters.by/search-results/">
    <input type="text" id="q" name="q" value="<?php the_search_query(); ?>">
    <input type="submit" value="Search">
</form>

Примечание: я добавил для параметра "action" адрес пользовательской страницы, которую мы создали на предыдущем шаге, а для параметра "name" указал значение "q", установленное нами в панели управления Google. Эти значения являются обязательными для того, чтобы форма поиска корректно работала.

Последний шаг, добавляем форму поиска на сайт. Многие темы WordPress используют виджеты, чтобы включить наш виджет поиска, перейдите в меню админки Внешний вид -> Виджеты и перетащите внутрь нужной области виджет "Поиск".

Как добавить поиск Google на свой сайт. Виджеты

Теперь откройте ваш сайт и задайте поиск по каким либо ключевым словам:

Как добавить поиск Google на свой сайт. Результаты поиска

И это всё, таким образом вы можете заменить стандартный поиск WordPress на самый мощный инструмент поиска в мире от компании Google.

Перевод статьи с rockablethemes.com


Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Комментарии:

Комментарии  

0 #1 Carl 05.12.2016 17:06
Спасибо за статью, нашла много чего
интересного!
Цитировать

Добавить комментарий


Защитный код
Обновить