В данном посте будет пошагово описано как создать простейший плагин для wordpress с аяксом.
Собственно вся соль в ajax — так как есть пара тонких мест. Разобьем руководство на две части, в первой опишем просто создание минимального плагина, а во второй части как добавить асинхронный вызов ajax
Часть 1 — создание базового плагина
шаг 1. создать папку с названием плагина в директории wp-content/plugins , например simple-ajax
шаг 2. создать php файл в созданной директории simple-ajax.php и написать туда следующее:
/* Plugin Name: Simple Ajax WordPress Plugin Plugin URI: http://zabaykin.ru Description: Visualization of assistant invoice API Version: 1.0.0 Author: zabaykin Author URI: http://zabaykin.ru/ */
После этого шага уже можно идти в панели администраторов в раздел плагины и активировать плагин.
шаг 3. Создаем функцию base_plugin
function base_plugin() { ob_start(); echo "< button id='ajax_button' >press for ajax< /button >"; return ob_get_clean(); }
шаг 4. Регистрируем созданную функцию в wordpress с помощью специальной функции
add_shortcode( 'base_plugin_shortcut', 'base_plugin' );
Разумеется, название может быть абсолютно другое, суть именно в регистрации shortcode вордпреса
шаг 5. Создаем новую страницу в панели администратора и в месте где понадобится плагин — пишем прямо в тексте [base_plugin_shortcut] . После сохранения можно открыть созданную страницу и убедиться, что конопка появилась. Таким образом первая часть создания плагина завершена, далее добавляем ajax.
Часть 2 — Асинхронный вызов ajax в wordpress
шаг 1. Для аякса понадобится javascript, поэтому рядом с файлом simple-ajax.php создадим файл simple-ajax.js со следующим содержимым:
jQuery(document).ready(function ($) { $('#ajax_button').click(function(){ $.ajax({ method: "POST", url: simple_ajax_url_obj.ajax_url, dataType: "json", data: { action: 'get_ajax_response' } }) .done(function (data) { console.log('YES!!') console.log(data); }) .fail(function (data) { console.log('ERROR') console.log(data); }); }) });
шаг 2. Созданный javascript файл надо подключить, поэтому обновим нашу базовую функцию, дополнив её следующими строками:
function base_plugin() { ob_start(); echo "< button id='ajax_button' >press for ajax< /button >"; # ajax wp_enqueue_script( 'simple-ajax', plugins_url( '/simple-ajax.js', __FILE__ ), array('jquery'), '1.2', true ); wp_localize_script( 'simple-ajax', 'simple_ajax_url_obj', array( 'ajax_url' => admin_url('admin-ajax.php')) ); return ob_get_clean(); }
Небольшое пояснение, с помощью функции wp_enqueue_script регистрируем скрипт, указываем путь до него и указываем зависимости. В нашем случае будет использоваться jquery, поэтому укажем минимальную версия 1.2 . После регистрации скрипта, необходимо создать объект javascript , в котором будет прописан URL для ajax. Это как раз делается с помощью wp_localize_script — создается объект simple_ajax_url_obj и указывается url до php скрипта. Про action расскажем чуть ниже.
шаг 3. Также обязательно понадобятся php функция — обработчик ajax
function get_ajax_response(){ echo "ajax base plugin for wordpress works fine!" wp_die(); }
Обязательно заканчивайте аяксовую функцию с помощью wp_die
шаг 4. Регистрация экшена в php. Помните в javascript был указан action: ‘get_ajax_response’ ? Пришло время его объявить и связать с php функцией. Это делается с помощью следующих двух функций
add_action( 'wp_ajax_get_ajax_response', 'get_ajax_response' ); add_action( 'wp_ajax_nopriv_get_ajax_response', 'get_ajax_response' );
Если не указать wp_ajax_nopriv — то запросы смогут делать только авторизованные пользователи. Поэтому если хотим чтобы все могли делать аяксовый запрос — необходимо добавить часть с nopriv.
Стоит отметить, что практически все запросы ajax (и с фронтенда и с бекенда) идут через административную часть admin-ajax.php, поэтому если действия подразумевают администрирование — то надо чтобы wp_ajax_nopriv_(action) хук был всегду обрамлен is_admin() === true для безопасности.
Таким образом, по нажатию кнопки в консоли браузера (консоль вызываетмся кнопкой F12) будет отображено «ajax base plugin for wordpress works fine!» И данное сообщение уведомит о том, что ваш плагин с аяксом для вордпреса работает.