Ранее я уже писал про то как в wordpress можно динамически выводить записи и страницы в модальном окне. Вот ссылка. Там я использовал jQuery для работы с AJAX. Но не всегда есть возможность использовать какие-то библиотеки. Сейчас я пишу плагин и в нём я сделал фильтр записей, в зависимости от заданных произвольных полей. Дело в том, что плагином могут пользоваться в десятках тем и подключение лишних скриптов нехорошо для оптимизации сайта. Особенно сейчас, когда в моду вошли различные JS-фреймворки, а в wordpress-е до сих пор стоит jQuery очень старой версии.
Сначала я предлагаю создать вам событие на странице. На этой странице будет выводиться весь контент, который связан с работой с AJAX. Допустим пусть будет так:
do_action('our_page_whith_ajax');
Ну конечно же это стоит делать в новом шаблоне страницы. После того как вы создали новый шаблон и в нём создали событие, перейдите в файл functions.php в вашей теме.
Регистрация скрипта нам будет нужна по двум причинам:
И так. сам код:
// 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.
В начале мы объявили на нашей странице do_action(‘our_page_whith_ajax’), по которому у нас и будет вызываться «всякое» для AJAX-са. Теперь мы добавим функцию, которая будет за всё это отвечать.
functions our_page_whith_ajax(){ // Далее наш код будет тут } add_action('our_page_whith_ajax', 'our_page_whith_ajax');
Давайте сразу добавим вызов нашего скрипта и объявим несколько функций.
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 и я его там изменял, да и так сложнее и интереснее.
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(); // Создадим FormData с данными, чтобы передать их на сервер в POST-запросе var data = new FormData(); // Наполним его данными data.append('explF', 'data'); data.append('explT', 'data2'); // И тут же прописываем action который будет вызываться в php data.append('action', 'our_action'); // Далее то что касается отправки запроса на сервер 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 xhttp.open('POST', admin_url.url, true); xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // Отправляем наши данные xhttp.send(data); } // Ждём клик btn.addEventListener('click', OUR_submitListener, btn); </script> <?php }
Далее давайте привяжем action к php-функции в wp. Ранее в js мы определили её название здесь data.append(‘action’, ‘our_action’);
function our_page_whith_ajax_response(){ // Получим то что пришло к нам $arr = $_POST; //и просто распечатаем echo '<pre>'; print_r($arr); echo '</pre>'; // Прекратим процесс wp_die(); } // Обратите внимание где мы использовали // our_action - это то, что и в data.append('action', 'our_action'); 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( [action] => our_action [explF] => data [explT] => data2 )
Сейчас я довольно часто пользуюсь fetch. Наверное и вам бы хотелось. Сейчас я покажу реализацию асинхронного запроса в wordpress через fetch.
Итак, fetch нам заменяет XMLHttpRequest(). Следовательно и нам нужно его заменить в нашей функции, плюс я его улучшу с помощью ES6. Теперь наш скрипт будет выглядеть так:
<script> (()=>{ const btn = document.querySelector('[data-type="our-btn"]'); btn.addEventListener('click', ()=>{ const url = admin_url.url; const data = new FormData(); data.append('explF', 'data'); data.append('explT', 'data2'); data.append('action', 'our_action'); fetch(url, { methode: 'post', body:data }).then( (response)=>(response.text()), // Возвращаем текст из промиса (reject)=>(console.error('Fetch отклонён')) // Обрабатываем ошибку ).catch() // перехватываем ошибку сервер .then( (text)=>{ document.querySelector('[data-type="our-resposnse-box"]').innerHTML = text; // Записываем текст в нужный блок } (reject)=>(console.error('Ошибка на клиенте')) ).catch() // перехватываем ошибку фронтенда }); })() </script>
Напоминаю! Fetch не поддерживается старыми браузерами. Попробуйте использовать Axios — он обёртка над XMLHttpRequest в отличие от fetch
Если у вас возникли сложности, то напишите мне в вк, ссылка в подвале сайта. Пользуйтесь моими сервисами, используйте stickjaw для быстрого изменения пропорций блога. Пока!)