Wordpress AJAX на чистом Javascript
Ранее я уже писал про то как в wordpress можно динамически выводить записи и страницы в модальном окне. Вот ссылка. Там я использовал jQuery для работы с AJAX. Но не всегда есть возможность использовать какие-то библиотеки. Сейчас я пишу плагин и в нём я сделал фильтр записей в зависимости от заданных произвольных полей. Дело в том, что плагином могут использоваться в десятках темах и подключение лишних скриптов не хорошо для оптимизации сайта, особенно сейчас, когда в моду вошли различные JS-фрэймворки, а в wordpress-е до сих пор стоит jQuery очень старой версии.
Старт
Сначало я предлагаю создать вам событие на странице. На этой странице будет выводиться весь контент, который связан с работой с AJAX. Допустим пусть будет так:
|
1 2 |
// do_action('our_page_whith_ajax'); |
Ну конечно же это стоит делать в новом шаблоне страницы. После того как вы создали новый шаблон и в нём создали событие перейдите в файл functions.php в вашей теме.
В functions.php
Регистрация скрипта нам будет нужна по двум причинам:
- Нужно напичатать служебный скрипт wordpress’а после нашего скрипта.
- Мы не хотим, чтобы наш скрипт подключался на других страницач и по-этому мы вызовем его подключение по собыитию.
И так. сам код:
|
1 2 3 4 5 6 7 8 9 |
// function our_page_whith_ajax_script(){ wp_register_script('our_page_whith_ajax_js', get_template_directory_uri() . 'assets/js/front.js', array('jquery'), '1.0', true); // Не забудьте создать assets/js/front.js // Можно тут зарегистрировать стили для нашеё страницы } add_action( 'wp_enqueue_scripts', 'our_page_whith_ajax_script' ); |
Отсюда нам нужно запомнить наш handler our_page_whith_ajax_js. Если вам нужна помощь по использованию данной функции вы можете перейти в мою статью о правильном подключении JS и CSS в WordPress.
2. Добавим действие к хуку
В начале мы объявили на нашей странице do_action(‘our_page_whith_ajax’) к по которому у нас и будет вызываться «всякое» для AJAX-са. Теперь мы добавим функцию, которая будет за всё это отвечать.
|
1 2 3 4 5 6 7 |
// functions our_page_whith_ajax(){ // Далее наш код будет тут } add_action('our_page_whith_ajax', 'our_page_whith_ajax'); |
Давайте сразу добавим вызов нашего скрипта и объявим несколько функций.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// function our_page_whith_ajax(){ // Подключение скриптов wp_enqueue_script('our_page_whith_ajax_js'); // Напечатаем кнопку которая будет отправлять наш запрос do_action('our_page_button'); // Напечатаем блок в котором будет выводиться наш ajax контент do_action('our_page_response_box'); // Напечатаем наш скрипт с ajax add_action('wp_footer', 'our_page_js_in_footer'); } add_action('our_page_whith_ajax', 'our_page_whith_ajax'); add_action( 'wp_enqueue_scripts', 'our_page_localize_script', 99 ); |
Обращу внимание на add_action(‘wp_footer’, ‘our_page_js_in_footer’). Наш ajax-скрипт можно создать и в том js-файле который мы подключили, но в моём деле мне содержание моего js зависело от php и я его там изменял, да и так сложнее и интереснее.
3. Объявим наши функции и хуки
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
function our_page_button(){ echo '<button data-type="our-btn">Нажать</button>'; } add_action('our_page_button', 'our_page_button'); function our_page_response_box(){ echo '<div data-type="our-resposnse-box"'; } add_action('our_page_response_box', 'our_page_response_box'); function our_page_localize_script(){ // our_page_whith_ajax_js - тот самы хэндрег о котором я говорил // Запомним admin_url wp_localize_script('our_page_whith_ajax_js', 'admin_url', array( 'url' => admin_url('admin-ajax.php') ) ); } function our_page_js_in_footer(){ ?> <script type="text/javascript" > // Получаем нашу кнопку var btn = document.querySelector('[data-type="our-btn"]'); function OUR_submitListener(event){ //На всякий случай убираем дефолтные действия event.preventDefault(); //Объявим объект который будем передавать, просто для примера var data = new Object(); // Наполним его данными data.explF = 'data'; data.explT = 'data2'; // Преобразуем в строку data = JSON.stringify(data); // Далее то что касается отправки запроса на сервер var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function () { if(this.readyState == 4 && this.status == 200){ // В блок с data-type="our-resposnse-box" вернём полученный HTML document.querySelector('[data-type="our-resposnse-box"]').innerHTML = this.responseText; } }; // Тут наш admin_url и тут же прописан action который будет вызываться в php xhttp.open('POST', admin_url.url + "?action=our_action", true); xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // Отправляем наши данные xhttp.send("data="+data); } // Ждём клик btn.addEventListener('click', OUR_submitListener, btn); </script> <?php } |
В этой строке xhttp.open(‘POST’, admin_url.url + «?action=our_action», true); мы прописали action по которому будет вызван наша php функция. Давайте добавим её и привяжем к событию обработки ajax в вордпресе.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
function our_page_whith_ajax_response(){ // Получим то что пришло к нам $arr = json_decode(stripslashes($_POST['data']), true); //и просто распечатаем echo '<pre>'; print_r($arr); echo '</pre>'; // Прекратим процесс wp_die(); } // Обратите внимание где мы использовали our_action add_action('wp_ajax_our_action', 'our_page_whith_ajax_response'); add_action('wp_ajax_nopriv_our_action', 'our_page_whith_ajax_response'); |
В итоге на странице вы получиет такую запись:
Array
(
[explF] => data
[explT] => data2
)
P.S.
Если у вас возникли сложности то напишите мне в вк, ссылка в подвале сайта. Пользуйтесь моими сервисами, используйте stickjaw для быстрого изменения пропорций блога. Пока!)