Поиск на собственном сайте очень важный атрибут. Но по умолчанию, форма поиска WordPress не предоставляет каких-то дополнительных возможностей и примочек. Вы можете в этом сами убедиться. Если у Вас форма поиска встроена в виджет, то напишите там что-нибудь и у Вас никаких подсказок появляться не будет, если только у Вас в браузере не настроено автозаполнение. Я предлагаю Вам возможность улучшить стандартную форму поиска WordPress. То есть, мы к ней добавим скрипт автозаполнения, чтобы был более эффективный подбор поисковых запросов для пользователя. Такой эффект Вы можете наблюдать много где, например при поиске в социальной сети Вконтакте.
Сама же форма заполнения будет выглядеть следующим образом:
Вообще поиск в WordPress работает безобразно, поэтому я хочу прикрутить поиск по сайт с поисковых систем, например Google или Яндекс, но об этом мы поговорим в следующих статьях.
Скрипт Twitter Typehead.js
Вообще существует масса скриптов, которые предназначены для автозаполнения, а совсем недавно Джейк Хардинг из компании Twitter выпустил отличный скрипт – , который упакован в BootStrap. Данный скрипт с легкостью можно использовать в WordPress, но работу нам облегчает, написанный плагин WP TypeHead.
Плагин WP TypeHead
Данный плагин прост в установке и настройке. Его настраивать очень легко, чтобы все работало без ошибок. Для начала Вам необходимо скачать плагин , установить его, ну а дальше мы рассмотрим код самого плагина.
Код главного файла плагина выглядит следующим образом:
<?php
/*
Plugin Name: WP Typeahead
Description: Add autocomplete search functionality to default WordPress search form
Author: c.bavota, Michal Bluma
Version: 1.0.0
Author URI: http://www.bavotasan.com/
*/
class Bavotasan_WP_Typeahead {
public $plugin_url;
public function __construct() {
$this->plugin_url = plugin_dir_url( __FILE__ );
add_action( 'wp_enqueue_scripts', ( $this, 'wp_enqueue_scripts' ) );
add_action( 'wp_ajax_nopriv_ajax_search', ( $this, 'ajax_search' ) );
add_action( 'wp_ajax_ajax_search', ( $this, 'ajax_search' ) );
}
/**
* Enqueue Typeahead.js and the stylesheet
*
* @since 1.0.0
*/
public function wp_enqueue_scripts() {
wp_enqueue_script( 'wp_typeahead_js', $this->plugin_url . 'js/typeahead.min.js', ( 'jquery' ), '', true );
wp_enqueue_script( 'wp_hogan_js' , $this->plugin_url . 'js/hogan.min.js', ( 'wp_typeahead_js' ), '', true );
wp_enqueue_script( 'typeahead_wp_plugin' , $this->plugin_url . 'js/wp-typeahead.js', ( 'wp_typeahead_js', 'wp_hogan_js' ), '', true );
$wp_typeahead_vars = ( 'ajaxurl' => admin_url( 'admin-ajax.php' ) );
wp_localize_script( 'typeahead_wp_plugin', 'wp_typeahead', $wp_typeahead_vars );
wp_enqueue_style( 'wp_typeahead_css', $this->plugin_url . 'css/typeahead.css' );
}
/**
* Ajax query for the search
*
* @since 1.0.0
*/
public function ajax_search() {
if ( ( $_REQUEST['fn'] ) && 'get_ajax_search' == $_REQUEST['fn'] ) {
$search_query = new WP_Query( (
's' => $_REQUEST['terms'],
'posts_per_page' => 10,
'no_found_rows' => true,
) );
$results = ( );
if ( $search_query->get_posts() ) {
foreach ( $search_query->get_posts() as $the_post ) {
$title = get_the_title( $the_post->ID );
$results[] = (
'value' => $title,
'url' => get_permalink( $the_post->ID ),
'tokens' => ( ' ', $title ),
);
}
} else {
$results[] = __( 'Sorry. No results match your search.', 'wp-typeahead' );
}
wp_reset_postdata();
echo ( $results );
}
();
}
}
$bavotasan_wp_typeahead = new Bavotasan_WP_Typeahead;Этот код Вам понадобится, если захотите усовершенствовать плагин, а если Вы вздумаете скачать архив, уже написанного плагина, то в нем будут присутствовать все JS-скрипты, а также таблицы стилей.
Если Вы добавить на свой WordPress сайт такой скрипт автозаполнения для формы поиска, то Вы только облегчите поиск пользователям и позволите им более удобно использовать свой сайт. Это может оставить хорошее впечатление о сайте, Вы можете получить дополнительный трафик. Для того чтобы данная функция появилась у Вас на сайте, Вам необходимо просто активировать плагин.
Также советуем почитать на PressDev.RU
Короткая ссылка: http://pressdev.ru/?p=2666






При русскификации плагина (Sorry. Ничего не найдено…) в сплывающем окне — сообщение исчезает! Стоит хоть одну русскую букву поставить в php…
$results[] = __( ‘Sorry. No results match your search.’,
не получается скачать плагин. его удалили?
Возможно, но можно его попробовать поискать в сети, на каком-нибудь сайте точно найдете!