AJAX в WordPress. Пишем свой первый асинхронный запрос
Тут я буду рассчитывать на то, что вы базово знаете PHP, базово знаете jQuery. Тем не менее я всё равно всё буду максимально подробно объяснять по ходу дела + смотрите видеоурок.
Чтобы скачать готовый код из этого урока, вам нужно купить курс.
Шаг 1. Подготовка
Как я уже говорил, я предполагаю, что вы базово знаете jQuery, поэтому подобная конструкция для вас ясна как день ?
Подробный бесплатный видеоурок по подключению JS вы можете найти здесь.
А непосредственно наш jQuery-код пока что временно можем разместить в футере, после функции wp_footer().
То есть библиотека jQuery теперь у нас подключена через wp_enqueue_script() либо в wp_head(), либо в wp_footer(), наша же задача закинуть наш собственный код jQuery после неё. Знаю, что мы можем сделать это через файл, мы можем сделать это через хук, а можно и просто в шаблоне вывести (у вас это возможно footer.php будет, но не факт).
В этом уроке для простоты понимания весь мой jQuery код будет находиться в файле footer.php темы. Но если вы хотите узнать, как правильно вынести его в отдельный файл, я посвятил этому время в видеоуроке.
Итак, прежде, чем переходить к следующему шагу, добейтесь вот этого ?
Го по строчкам прокомментирую:
Почему мы складываем числа в PHP, когда это можно сделать непосредственно в JavaScript на стороне клиента? Потому что мы учимся, Карл! Если слишком легко для тебя, отправляйся в пост посложнее или ещё сложнее.
Шаг 3. Познакомимся со стандартным обработчиком асинронных запросов в WordPress – admin-ajax.php
Сам код отправки асинхронного запроса изменится совсем чуть-чуть:
Распространённые ошибки
Ошибиться можно много где угодно, но исправление ошибок тут по большей части работа с консолью браузера и понимание некоторых основных вещей.
Ничего не происходит или страница перезагружается ?
Скорее всего у вас синтаксическая ошибка в вашем JavaScript-коде, для этого мы открываем консоль браузера и смотрим, где она примерно находится и на что похожа, например:
То есть уже примерно понимаем, что к чему.
Выводится 0 вместо того, что я хочу ?
То есть в запросы вы передали одно его значение (или не передали вовсе), а в хуках wp_ajax_ и wp_ajax_nopriv_ указали другое (либо использовали не по назначению лишь один из хуков).
Асинхронный запрос выполняется, но вообще ничего не выводит ?
В консоли браузера в таких случаях ошибка 500.
WordPress. Форма обратной связи без плагинов и без перезагрузки
Тема давно не популярная, но так как все сайты где освещались подобные вопросы уже закрылись, придется выложить решение.
Для тех кто хочет разобраться или по какой-то причине не любит плагины.
Хотя плагином сделать подобную форму можно без проблем — это будет быстрее, проще и удобнее. Например, плагином Simple Basic Contact Form.
Итак, создаем форму обратной связи без плагина. Алгоритм простой
Внимание! Код добавлять в файл functions.php дочерней темы или пустой плагин.
1. Создаем и выводим форму
Форму можно выводить напрямую в файле страницы. Например, сделать шаблон страницы и в нем выводить. Или сделать шорткод и через него выводить в нужном месте. Вот шорткод и будем использовать.
Теперь создаем страницу и выводим на ней шорткод.
Получаем такую форму. В зависимости от используемой темы, выглядеть можно по разному.
2. Внешний вид формы
Добавим красоты нашей форме.
Вот так теперь выглядит форма.
3. Работа формы
Теперь заставим форму работать.
Создание и подключение нужных файлов
Теперь через файл functions.php подключаем нужное.
После подключения в исходном коде должно быть видно подключение и вывод скрипта.
Отправка данных формы через ajax
В подключенный файл feedback.js добавляем отправку данных формы.
Если все верно подключено, при отправке данных скрипт будет срабатывать и выдавать ошибку.
Обработка Ajax
Заключение
Вот и все. Если все сделано правильно, то при отправке пустой формы будут такие сообщения.
Если отправка прошла успешно, то появится соответствующее сообщение
На этом все. Если есть вопросы и предложения пишите в комментариях. Удачи!
Ajax в WordPress
Цель этой статьи показать, как использовать AJAX при создании тем и плагинов.
Видео уроки об AJAX в WordPress:
AJAX в админ-панели WordPress
С тех пор, как AJAX был встроен в админ-панель WP, использовать функционал AJAX в плагинах стало очень удобно. Небольшой пример. Все делается в одном файле (файле плагина или файле темы functions.php ).
#1. Добавляем javascript
Сначала добавляем на страницу админки javascript код, который будет посылать AJAX запрос.
#2. Создаем PHP функцию
Теперь, создадим PHP функцию, которая будет обрабатывать переданный AJAX запрос. Для этого добавляем следующий код в functions.php (можно в плагин):
Примера выше достаточно, чтобы начать использовать AJAX в админ-панели WordPress.
По возможности всегда используйте wp_die() вместо die() или exit(), в функции обработки AJAX запроса. Так вы добьетесь лучшей интеграции с WordPress и в случае ошибок в коде, получите данные о них.
AJAX на фронтэнде (в теме)
Т.е. чтобы создать обработчик запроса для всех пользователей: авторизованных и нет, PHP функцию нужно прикреплять сразу к двум хукам:
‘wp_ajax_nopriv_(action)’ можно не указывать, если не нужно, чтобы AJAX запрос обрабатывался для неавторизованных пользователей.
Переменная ajaxurl
В результате, получим в head части сайта прямо перед скриптом ‘twentyfifteen-script’:
Пример AJAX кода для фронт энда
Логичное подключение AJAX хуков
Я не стал усложнять чтение и не говорил, как правильно подключать AJAX через хуки в коде. Впрочем все что написано ниже не обязательно, потому что работать будет и так, но это рекомендуется.
Функции обработчики установленные хукам:
Оба хука всегда удовлетворяют условию wp_doing_ajax():
А значит сами хуки нужно подключать, только если срабатывает это условие.
Используя это правило, можно не подключать хуки там где в этом нет смысла. Например, при генерации страницы шаблона или страницы админки. Эта маленькая деталь добавит больше логики в код и в некоторых случаях может избавить от багов.
Пример того, как рекомендуется подключать все AJAX хуки.
В этом случае хуки будут подключены только во время AJAX запроса и не будут подключены при простом посещении фронта, админки, REST или CRON запросе.
Защита: используем nonce и проверяем права
Нет острой необходимости проверять AJAX запрос, если он потенциально не опасный. Например, когда он просто получает какие-то данные. Но когда запрос удаляет или обновляет данные, то его просто необходимо дополнительно защитить с помощью nonce кода и проверкой прав доступа.
Разработчики часто ленятся ставить такую защиту, получая самый неожиданный результат. Недобросовестные пользователи могут каким-либо образом заставить юзера с правами сделать то что им нужно и в итоге навредить сайту над которым вы работали долгие месяцы, годы.
Существует два вида защиты, которые нужно использовать в AJAX запросах в большинстве случаев.
1. Код nonce (случайный код)
Для начала создадим nonce код:
twentyfifteen-script это название основного скрипта темы (см. выше), который подключается на сайте с помощью wp_enqueue_script().
Затем, в AJAX запросе добавим переменную с кодом nonce :
Теперь, в обработке заброса необходимо проверить nonce код:
check_ajax_referer() работает на основе функции wp_verify_nonce() и по сути является её оберткой для AJAX запросов.
Обратите внимание, что в данном случае Nonce код создается в HTML коде. А это значит, что если у вас установлен плагин страничного кэширования, то этот код может и наверняка будет устаревать к моменту очередного AJAX запроса, потому что HTML код кэшируется.
2. Проверка прав доступа
Особенность тут в том, что не авторизованные пользователи тоже должны видеть сообщение об ошибке при AJAX запросе. Поэтому для них тоже нужно обрабатывать запрос и вернуть сообщение об ошибке:
Включаем кэширование для AJAX запросов
По умолчанию все AJAX запросы НЕ кэшируются браузером для этого PHP устанавливает специальные заголовки функцией nocache_headers().
Чаще всего AJAX запросы кэшировать и не надо, потому что они должны возвращать свежие данные, но бывают случаи когда такое кэширование может сэкономить ресурсы и увеличить скорость работы скрипта. Например, если у нас есть сложный фильтр товаров который юзеры используют постоянно. Тут было бы разумно кэшировать все результаты фильтра например на пару часов, все равно товары не добавляются с такой скоростью.
Как включить кэширование для указанных AJAX запросов смотрите во втором примере функции nocache_headers().
Отлавливаем баги, PHP ошибки
Проблемы могут возникнуть при AJAX запросе и появлении ошибок PHP. Заметки или сообщения могут изменить возвращаемый результат или вызвать ошибку javascript.
Дебаг (вывод ошибок на экран)
Вариант:
Как правило запросы отправляются с браузера в файл. Поэтому чтобы увидеть результат запроса, ошибку или что-либо еще, можно открыть панель разработчика, выбрать именно наш запрос среди многих и посмотреть что он вернул.
Вариант: включаем показ ошибок в AJAX запросах
WordPress по умолчанию не показывает ошибки для AJAX запросов даже если константа WP_DEBUG включена! Видно это в коде функции wp_debug_mode().
Несмотря на это такой показ можно включить, ведь на рабочих проектах у нас все равно WP_DEBUG отключена и боятся нам нечего, а вот баги выловить это помогает на ура!
Чтобы включить показ ошибок при AJAX запроса, нужно вставить такой код в файл темы functions.php или в плагин. Но лучшее его вставить как можно раньше, чтобы видеть ранние ошибки, лучше всего в MU плагины.
Вариант: вывод данных в лог файл
Вариант: вывод PHP ошибок в лог файл
Чтобы выводить PHP заметки и ошибки в лог файл, нужно включить константу WP_DEBUG_LOG. Такой лог файл появится в папке wp-content.
Вариант:
Если не получается увидеть сообщение об ошибке и нужно работать в режиме разработчика, можно очистить буфер сразу перед возвратом данных:
После этого нужно посмотреть что возвращает запрос через дебаг браузера или как-то еще.
Вариант:
Также, для дебага можно воспользоваться инструментом FirePHP, который записывает ошибки в консоль браузера.
Ошибка при возвращении данных
Плагины
Качественный и надежный сервис по продвижению в Телеграмме предлагает совершить недорогую покупку подписчиков в группу. На сайте Вы найдете массу выгодных предложений с индивидуальными условиями для каждого сообщества. Например, Вы можете выбрать оптимальную скорость поступления ресурса, которая доходит до 1000 единиц в сутки. Успейте сделать заказ, пока на сайте действуют оптовые скидки.
Как создать AJAX-форму на WordPress без плагинов
WordPress имеет достаточно простую методологию обработки Ajax-запросов. Ajax-запросами называют такие запросы, которые происходят без перезагрузки страницы и в результате работа с сайтом становится быстрее и удобнее для конечного пользователя.
Заранее оговорюсь, что в репозитории WordPress существуют десятки нормальных плагинов для работы с формами. С помощью них можно настроить поля, их валидацию, содержимое, интегрировать поддержку Ajax, Captcha, Askimet для фильтрации спама и многое другое. Но так же эти плагины могут подключать лишние или тяжелые файлы стилей или скриптов. Например, плагин Contact Form 7 подключает свои файлы стилей и скриптов на всех страницах вашего сайта, независимо от того, есть на этой странице форма или нет (как это исправить подробнее).
В конце концов плагин может просто не подходить под ваши задачи. Поэтому в этом материале мы на примере разберемся, как создать простую AJAX-форму в WordPress.
Создание формы
Для начала мы создадим и выведем простую html-форму на странице. Она может выводиться как напрямую в каком-либо шаблоне, так и подключаться с помощью хука или шорткода в нужном месте.
Подключение и локализация скриптов
Создание скрипта
В js-файле скрипта мы отправляем поля формы в обработчик. Выводим ошибки, если что-то пошло не так или сообщение об успехе отправки.
Создание обработчика формы
Если все сделано верно, то у вас будет примерно такая форма. Она будет выводить ошибки и, что важнее, отправлять письма.
Ajax форма для WordPress
Использование ajax при отправке формы позволяет отправить форму без перезагрузки страницы. В WordPress это достаточно просто реализовать. Допустим, у нас есть следующая форма заказа звонка:
Теперь напишем скрипт, обрабатывающий событие нажатия на кнопку «Отправить»:
Скрипт отменяет отправку данных на сервер, затем записывает значения полей формы и отправляет их через ajax. Получив результат обработки запроса, скрипт выводит в блоке с id = submit-ajax сообщение, полученное от сервера.
Улучшенный вариант скрипта, который обрабатывает поля формы автоматически:
Осталось написать функцию, которая будет обрабатывать отправленные на сервер данные (её можно поместить в файл темы functions.php):
Вам помогла эта статья? Оцените!
Комментариев: 11
Привет! Спасибо за материал!
Если не ошибаюсь, во втором фрагменте кода, последняя строка лишняя.
Привет! Пожалуйста! Да, вы правы, поправил.
Вставил код так, как Вы написали, у меня не заработала отправка. (email доставки прописал)
Какие могут быть основные ошибки-косяки?
Вставил пример формы в статью, код рабочий. Может быть jquery не подключена, также могут быть проблемы с хостингом.
iQuery подключена, хостинг достойный))У меня подозрение, что скрипт не подключается к форме. При нажатии на кнопку «отправить» выскакиевает сообщение «такой страницы не существует».
Попробовал пример с другого сайта, получилось. Спасибо за ответы!
Отправка формы работать не будет, если вы не напишете этот url.
Спасибо за код! Сейчас попробую для формы комментариев на своем сайте