Форма пошуку WordPress за умовчанням не надає жодних примочок. Ви можете переконатися в цьому, якщо вона вже вбудована на вашу тему, або ви додали віджет пошуку в один із ваших сайдбарів. Один із способів покращити функціональність форми — додати скрипт автозаповнення, щоб покращити ефективність підбору пошукових запитів.
| Завантажити вихідні|
Так виглядатиме форма автозаповнення
Twitter typeahead.js
Існує досить багато скриптів автозаповнення, а нещодавно Джейк Хардінг із Twitter випустив typeahead.js, абсолютно незалежну версію скрипта зі схожою назвою, упакованою в Bootstrap. Я подумав, що може бути цікавим дізнатися, як використовувати цей легкий скрипт з WordPress і після деякого вивчення я зміг зробити невеликий плагін.
Плагін WP Typeahead
Цей плагін досить простий, оскільки вимагає зовсім небагато налаштувань для того, щоб все працювало як треба. Я окремо виділю кожну частину коду плагіна, щоб пояснити його роботу.
Основа плагіна
<?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;Сам по собі наведений вище код просто дасть помилки, але це основа для всього, що вам потрібно використовувати typeahead.js із формою пошуку WordPress. Перше, що ми робимо - це додаємо в чергу JavaScript / CSS файли, які нам потрібні, а також вставляємо необхідний JS у підвал. Далі йде виклик 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' );
}Є чотири файли, які потрібно поставити у чергу. Перший - сам по собі typeahead.js, Потім hogan.js, за ним новий JavaScript файл, який ми створимо, щоб змусити все працювати і нарешті додаємо таблицю стилів, щоб все добре виглядало.
Зверніть увагу, що в середині ми також використовуємо wp_localize_script, щоб зробити Ajax URL доступним для нашого JavaScript.
Скрипт для футера
( 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);Вставте це у новий файл /js/wp-typeahead.js. Селектор jQuery прикріпить функцію введіть вперед до будь-якої стандартної форми пошуку WordPress та використовує шаблонизатор Хоган, щоб відформатувати та повернути дані 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();
}Коли щось введено у форму пошуку, typeahead.js візьме дані та відправить через Ajax, використовуючи параметр із останнього фрагмента коду. Щоб стати в нагоді, цей текст повинен бути переданий у функцію, тому вам потрібен наведений вище код.
Він бере текст пошукового запиту, передає його через запит WordPress та повертає відповідний результат, якщо він є. Цей результат відправляється назад після перекодування після розшифровки через JSONщоб скрипт міг правильно прочитати дані.
Як виглядає код повністю
Коли все на своєму місці, головний файл плагіна має виглядати приблизно так:
<?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' ) );
}
/**
* 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' );
}
/**
* 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();
}
}
$bavotasan_wp_typeahead = new Bavotasan_WP_Typeahead;Коли ви завантажуєте плагін, ви отримуєте у складі ZIP архіву також таблицю стилів та необхідні JS файли.
Висновок
Додавання скрипту автозаповнення у вашу форму пошуку може допомогти вашим користувачам зручніше та простіше використовувати ваш сайт. А це означає покращення загального враження, що може призвести до повторних заходів на сайт та кращого трафіку. Для роботи з вашими формами пошуку плагін потрібно просто активувати.
Якщо у вас є коментарі до сказаного вище, будь ласка, не соромтеся написати їх нижче.
Джерело: WP.tutsplus.com
Коментарі до запису: 0