Skip to content

Ошеломляющая форма поиска для WordPress

Привет, друзья! Сегодня я расскажу о том, как улучшить форму поиска для WordPress.

Сразу предупреждаю! Плагин, рассмотренный в данном уроке работает только с формой поиска WordPress. Если вы используете поиск от Яндекса или Google, то вам придется вернуть стандартную форму поиска от темы. Мы будем использовать автозаполнение для формы поиска, то есть когда пользователь начнет вводить слово в форму, будут выводится подходящие результаты и кликнув по одному из них, он попадет на данную страницу.

Для этого будет использован скрипт Twitter Typeahead. Его можно скачать отдельно с репозитория на GitHub или взять его вместе с фреймворком Bootstrap.

WP Typeahead Plugin

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

<?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', array( $this, 'wp_enqueue_scripts' ) );

add_action( 'wp_ajax_nopriv_ajax_search', array( $this, 'ajax_search' ) );
add_action( 'wp_ajax_ajax_search', array( $this, 'ajax_search' ) );
}
}
$bavotasan_wp_typeahead = new Bavotasan_WP_Typeahead;

Это начало плагина, и пока данный код будет выдавать ошибки. Сначала нам надо будет подключить JavaScript и CSS файлы и сделать Ajax-запросы для получения результатов поиска.

Подключение

/**
* 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', array( 'jquery' ), '', true );
wp_enqueue_script( 'wp_hogan_js' , $this->plugin_url . 'js/hogan.min.js', array( 'wp_typeahead_js' ), '', true );

wp_enqueue_script( 'typeahead_wp_plugin' , $this->plugin_url . 'js/wp-typeahead.js', array( 'wp_typeahead_js', 'wp_hogan_js' ), '', true );
$wp_typeahead_vars = array( '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' );
}

Мы должны подключить 4 файла. Сам typeahead.js, шаблонизатор hogan.js, затем мы создадим еще один js-файл, чтобы привести все во движение, и конечно же таблицу стилей, чтобы все выглядело как надо.

Скрипт

( function($) {
$( 'input[name="s"]' )
.typeahead( {
name: 'search',
remote: wp_typeahead.ajaxurl + '?action=ajax_search&fn=get_ajax_search&terms=%QUERY',
template: [
'<p><a href="{{url}}">{{value}}</a></p>',
].join(''),
engine: Hogan
} )
.keypress( function(e) {
if ( 13 == e.which ) {
$(this).parents( 'form' ).submit();
return false;
}
}
);
} )(jQuery);

Данный код — это содержание файла wp-typeahead.js, который запускает подключение автозаполнения. jQuery селектор отберет только формы поиска WordPress. Еще мы будем использовать движок Hogan для форматирования полученных от Ajax данных.

Ajax-запрос для поиска

/**
* Ajax query for the search
*
* @since 1.0.0
*/
public function ajax_search() {
if ( isset( $_REQUEST['fn'] ) && 'get_ajax_search' == $_REQUEST['fn'] ) {
$search_query = new WP_Query( array(
's' => $_REQUEST['terms'],
'posts_per_page' => 10,
'no_found_rows' => true,
) );

$results = array( );
if ( $search_query->get_posts() ) {
foreach ( $search_query->get_posts() as $the_post ) {
$title = get_the_title( $the_post->ID );
$results[] = array(
'value' => $title,
'url' => get_permalink( $the_post->ID ),
'tokens' => explode( ' ', $title ),
);
}
} else {
$results[] = __( 'Sorry. No results match your search.', 'wp-typeahead' );
}

wp_reset_postdata();
echo json_encode( $results );
}
die();
}

Данная функция принимает введенную фразу в поле поиска и при помощи WordPress запроса возвращает результаты, которые будут найдены, если они есть.

Скачать плагин

Теперь скачайте данный плагин и используйте на своем блоге.

Вот это и всё про плагин для автозаполнения поля поиска в WordPress. Оригинал статьи на английском вы можете найти здесь.