Wordpress AJAX на чистом Javascript

wordprss ajax на чистом javascript

Ранее я уже писал про то как в wordpress можно динамически выводить записи и страницы в модальном окне. Вот ссылка. Там я использовал jQuery для работы с AJAX. Но не всегда есть возможность использовать какие-то библиотеки. Сейчас я пишу плагин и в нём я сделал фильтр записей в зависимости от заданных произвольных полей. Дело в том, что плагином могут использоваться в десятках темах и подключение лишних скриптов не хорошо для оптимизации сайта, особенно сейчас, когда в моду вошли различные JS-фрэймворки, а в wordpress-е до сих пор стоит jQuery очень старой версии.

Старт

Сначало я предлагаю создать вам событие на странице. На этой странице будет выводиться весь контент, который связан с работой с AJAX. Допустим пусть будет так:

Ну конечно же это стоит делать в новом шаблоне страницы. После того как вы создали новый шаблон и в нём создали событие перейдите в файл functions.php в вашей теме.

В functions.php

Регистрация скрипта нам будет нужна по двум причинам:

  1. Нужно напичатать служебный скрипт wordpress’а после нашего скрипта.
  2. Мы не хотим, чтобы наш скрипт подключался на других страницач и по-этому мы вызовем его подключение по собыитию.

И так. сам код:

Отсюда нам нужно запомнить наш handler our_page_whith_ajax_js. Если вам нужна помощь по использованию данной функции вы можете перейти в мою статью о правильном подключении JS и CSS в WordPress.

2. Добавим действие к хуку

В начале мы объявили на нашей странице do_action(‘our_page_whith_ajax’) к по которому у нас и будет вызываться «всякое» для AJAX-са. Теперь мы добавим функцию, которая будет за всё это отвечать.

Давайте сразу добавим вызов нашего скрипта и объявим несколько функций.

Обращу внимание на add_action(‘wp_footer’, ‘our_page_js_in_footer’). Наш ajax-скрипт можно создать и в том js-файле который мы подключили, но в моём деле мне содержание моего js зависело от php и я его там изменял, да и так сложнее и интереснее.

3. Объявим наши функции и хуки

В этой строке xhttp.open(‘POST’, admin_url.url + «?action=our_action», true); мы прописали action по которому будет вызван наша php функция. Давайте добавим её и привяжем к событию обработки ajax в вордпресе.

В итоге на странице вы получиет такую запись:

Array

(

[explF] => data

[explT] => data2

)

P.S. 

Если у вас возникли сложности то напишите мне в вк, ссылка в подвале сайта. Пользуйтесь моими сервисами, используйте stickjaw для быстрого изменения пропорций блога. Пока!)