AJAX В WORD PRESS ПОСОБИЕ ПО ФОНОВОИ ОБРАБОТКЕ ДАННЫХ

Содержание
  1. Шаг 1. Подготовка
  2. Шаг 2. Познакомимся с $. ajax
  3. Шаг 3. Познакомимся со стандартным обработчиком асинронных запросов в WordPress – admin-ajax. php
  4. Выводится 0 вместо того, что я хочу 😨
  5. Асинхронный запрос выполняется, но вообще ничего не выводит 😥
  6. Что будем делать?
  7. Практика работы с Ajax в WordPress
  8. Событие инициализации JS скрипта
  9. Изначальное тело подключённого скрипта
  10. Событие обработки Ajax в WordPress
  11. Регистрация пользователей
  12. Авторизация пользователя
  13. Послесловие и исходный код
  14. Шаг 1. Добавление кнопки «Загрузить ещё»
  15. Шаг 2. Подключение скриптов
  16. Шаг 3. Скрипт асинхронной загрузки
  17. Шаг 4. Обработчик PHP, вывод постов
  18. Способы подключения JS
  19. Способ 2. При помощи хука admin_enqueue_scripts
  20. PHP-обработчик запроса
  21. Безопасность запросов с использованием одноразовых чисел
  22. 1 Создаём одноразовое число (токен)
  23. 2 Проверяем одноразовое число в обработчике AJAX
  24. Пример. Изменение значений произвольных полей постов «на лету».
  25. Шаг 1. Добавление колонки с ценой в список товаров
  26. Шаг 2. Создание и подключение скриптов
  27. Шаг 3. Асинхронный AJAX запрос. Содержимое файла ajax-post-meta
  28. Шаг 4. Функция-обработчик

Шаг 1. Подготовка

Как я уже говорил, я предполагаю, что вы базово знаете jQuery, поэтому подобная конструкция для вас ясна как день 🏞

jQuery $ // есть разные варианты этой строчки, но такая мне нравится больше всего, т.к. всегда работает $ . // при клике на элемент с id=»misha_button»

На всякий случай напомню, что должна быть подключена библиотека jQuery для этого в functions.php, но не всегда именно туда, мы добавляем строчку.

А непосредственно наш jQuery-код пока что временно можем разместить в футере, после функции wp_footer().

То есть библиотека jQuery теперь у нас подключена через wp_enqueue_script() либо в wp_head(), либо в wp_footer(), наша же задача закинуть наш собственный код jQuery после неё. Знаю, что мы можем сделать это через файл, мы можем сделать это через хук, а можно и просто в шаблоне вывести (у вас это возможно footer.php будет, но не факт).

В этом уроке для простоты понимания весь мой jQuery код будет находиться в файле footer.php темы. Но если вы хотите узнать, как правильно вынести его в отдельный файл, я посвятил этому время в видеоуроке.

Итак, прежде, чем переходить к следующему шагу, добейтесь вот этого 👇

Шаг 2. Познакомимся с $. ajax

В jQuery есть несколько способов отправки асинхронных запросов, сам я пользуюсь только $.ajax, так как он более универсален, остальные – лишь частные случаи из него. В общих чертах, учитывая всё необходимое, код будет выглядеть вот так👇

jQuery $
$ .
$.
url: ,
type: ,
data: , // можно также передать в виде объекта
beforeSend: xhr
$ . ;
,
success: data
$ . ;
data ;

;
// если элемент – ссылка, то не забываем:
// return false;
;
;

Почему мы складываем числа в PHP, когда это можно сделать непосредственно в JavaScript на стороне клиента? Потому что мы учимся, Карл! Если слишком легко для тебя, отправляйся в пост посложнее или ещё сложнее.

Шаг 3. Познакомимся со стандартным обработчиком асинронных запросов в WordPress – admin-ajax. php

Сам код отправки асинхронного запроса изменится совсем чуть-чуть:

jQuery$
$.
$.
url: ,
type: ,
data: , // можно также передать в виде массива или объекта
beforeSend: xhr
$.;
,
success: data
$.;
data ;

;
// если элемент – ссылка, то не забываем:
// return false;
;
;

И вторым шагом нужно будет создать функцию в functions.php и повесить её на два хука (если используете AJAX в админке, то только на один кстати).

, ;
, ;
// первый хук для авторизованных, второй для не авторизованных пользователей

truemisha_ajax

= + ;
;

; // даём понять, что обработчик закончил выполнение

Выводится 0 вместо того, что я хочу 😨

То есть в запросы вы передали одно его значение (или не передали вовсе), а в хуках wp_ajax_ и wp_ajax_nopriv_ указали другое (либо использовали не по назначению лишь один из хуков).

Кроме того, не забывайте, что в конце функции-обработчика AJAX-запроса должна быть функция die();

Асинхронный запрос выполняется, но вообще ничего не выводит 😥

Скорее всего ошибка в PHP-коде вашего обработчика PHP, если он — это функция в functions.php, то это вряд ли пропущенная точка с запятой (тогда бы полетел весь сайт), скорее всего это просто несуществующая функция или класс.

В консоли браузера в таких случаях ошибка 500.

Использование «Ajax» является одним из самых распространенных методов создания и работы с пользовательскими интерфейсами.

Применение этой технологии позволяет выполнять незаметную фоновую обработку данных (без перезагрузки страницы), что значительно улучшает процесс взаимодействия пользователей с сайтом.

В качестве примера, работу Ajax в WordPress можно наблюдать в панели администратора если открыть консоль браузера и перейти во вкладку «Network», но, как и везде, в WordPress есть свои особенности работы с асинхронным JavaScript и в этой статье мы на их рассмотрим.

Что будем делать?

Осваивать работу Ajax в WordPress мы будем на реальном примере, а именно будем создавать форму регистрации и авторизации пользователей, для вашего WordPress сайта.

Формы, которые вы видите ниже, будут результатом нашей совместной работы. Они полностью рабочие, пробуйте.

Так как это обучающие пособие, то все пользователи, которые зарегистрировались через эту форму, периодически удаляются!

Внимание

Предполагается, что читатель уже обладает базовыми навыками работы с HTML, CSS, PHP и jQuery, так как мы не будем посимвольно разжёвывать каждый кусок кода.

Начать погружение в работу Ajax на WordPress сайтах следует с изучения теории, этим и займёмся.

Начиная с бородатой версии ядра 2.8, WordPress позволяем создавать собственные события, используя встроенный Ajax, но стоит понимать, что есть ряд правил, которым нужно следовать:

Как видно, свод правил достаточно коротки и никаких критичных ограничений не несет.

Давайте уже переходить к практике.

Практика работы с Ajax в WordPress

Первое, что нам предстоит сделать – это создать HTML разметку форм для регистрации/авторизации и стилизовать их. Процесс этот описывать не будем, а сам код можно взять здесь.

Стоит учесть, что таблица стилей может частично перекрыть стили форм, с которыми мы работаем, но в целом должно получиться примерно так:

Ajax в WordPress – HTML разметка для формы авторизации и регистрации

Для начала, советуем не менять HTML разметку, которая используется в этом уроке, а просто скопировать и вставить в тело страницы, используя элемент  в редакторе блоков.

Скрипты в этом уроке будет опираться именно на эту разметку.

Событие инициализации JS скрипта

Вставляем этот код в functions.php вашей темы (желательно дочерней):

Давайте подробнее рассмотрим это кусок кода:

Первое, что мы делаем, хукаем событие инициализации скриптов для регистрации собственного *.js.

Обратите внимание, что мы используем функцию , для того, чтобы указать путь к новому JS файлу так как работаем в дочерней теме. Если вы работаете в родительской теме, то используйте функцию .

Благодаря функции , а в файле , будет доступен объект с данными которые мы отправляем из . Имейте ввиду, что таким методом можно передавать любые, как статичные данные из БД, так и результаты отработки циклов ☝️

Изначальное тело подключённого скрипта

Для начала, содержимое файла , который должен находится в папке  будет таким:

Давайте проясним некоторые моменты:

Обратите внимание, что используются две директивы:

Вы наверное заметили, что используется функция , вот так:

Вместо простой и привычной:

Дело в том, что функция  позволяет обращаться к динамически добавленным в DOM (объектная модель документа) элементам.

Событие обработки Ajax в WordPress

Возвращаемся в добавляем следующий код:

Для создания самого события используется хук «», где это название события, в нашем случае , а вот префикса может быть два:

Получается, что если нам нужен Ajax который будет работать как для гостей, так и для авторизированных пользователей WordPress сайта, то нужно создать оба события одновременно! ?

Мы так же ввели переменную , которая будет содержать массив с результатами обработки, а сам массив конвертируем в строку формата и отправляем обратно в браузер.

Пора начинать работать с пользователями.

Регистрация пользователей

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

Начнем с формы регистрации, а значит там где мы используем оператор  нас интересует случай «registration».

Вставляем следующий код:

Всё достаточно просто. При благоприятном стечении обстоятельств пользователь будет зарегистрирован и авторизован, а в противном случае, благодаря встроенному в WordPress обработчику ошибок, мы будем знать, что именно пошло не так.

Проще говоря, результат обработки вернется в файл в 100% случаях.

Давайте посмотрим, что можно сделать с полученным назад данными.

Авторизация пользователя

Мы еж описали процесс авторизации в блоке относящемся к регистрации, а так плодить запросы Ajax в WordPress мы не собираемся, то просто скопируем кусочек кода и вставим его в нужное место:

Дублирование процедур в коде – это очень плохое решение и вам стоит создать отдельную функцию, описывающую процесс авторизации и вызывать её в нужных местах.

На этом процесс обработки входных данных закачивается, давайте вернёмся в JavaScript файл и поработаем с данными которые вернуться.

Послесловие и исходный код

Как видите использовать Ajax в WordPress очень просто, но учтите, что в рамках этого урока мы опустили несколько важных моментов и предлагаем вам разобраться с ними самостоятельно..

Если у вас есть вопросы спрашивайте в комментариях.

В этом уроке я расскажу вам не только, как создать кнопку «Загрузить ещё» для постов на главной и в категориях, но мы также рассмотрим, как сделать загрузку постов при скролле и при этом сохраним пагинацию для SEO.

Работать будем со стандартной темой TwentyTwentyOne, во-первых, эта тема довольно простая и будет нетрудно разобраться в коде, во-вторых, вы всегда можете установить её прямо из админки из репозитория тем WordPress.

Шаг 1. Добавление кнопки «Загрузить ещё»

Для начала нам надо найти файл, в котором добавляется постраничная навигация. В TwentyTwentyOne это два файла – index.php для главной страницы сайта, где выводятся посты блога и archive.php – для меток и рубрик. Если вы не понимаете, в каком файле надо искать в вашей теме, рекомендую взглянуть на этот туториал.

Если же вы решили использовать какую-то из стандартных тем (как я), то напоминаю, что для изменений желательно использовать дочерние темы (это же я и делаю в видео).

Найдите соответствующее место в шаблоне за пределами цикла while, то есть после того, как заканчивается вывод постов (в TwentyTwentyOne это место практически сразу после endwhile) и вставляем туда код:

Понятно, нам нужно учесть некоторые моменты, чтобы кнопка отображалась корректно.

Кроме того, я предлагаю добавить на кнопку data-атрибут, чтобы передавать в обработчик информацию о том, на какой странице мы находимся в данный момент и какую страницу нужно загрузить.

Также на кнопку я добавил класс .button, который стилизует её для темы TwentyTwentyOne.

Самый легкий шаг позади.

Шаг 2. Подключение скриптов

Документация функций wp_enqueue_script() и get_stylesheet_directory_uri() в помощь. Про подключение скриптов я писал часто и подробно, поэтому сейчас на этом останавливаться не будем, если есть проблемы — смотрите документацию. А этот код — в functions.php дочерней темы.

, ;

true_loadmore_scripts
; // в TwentyTwentyOne он не подключен по умолчанию
,
. ,
,
// не кэшируем файл, убираем эту строчку после завершение разработки
;

Также нам понадобится передать в loadmore.js динамический адрес обработчика AJAX в WordPress, поэтому мы немного модифицируем наш код, добавив в него функцию wp_localize_script().

Шаг 3. Скрипт асинхронной загрузки

Вы ещё не создали файл loadmore.js в папке с темой? Давайте создадим его и добавим туда следующий код:

jQuery$

// определяем в переменные кнопку, текущую страницу и максимальное кол-во страниц
button = $ ,
paged = button. ,
maxPages = button. ;

button. event

event.; // предотвращаем клик по ссылке

$.
type : ,
url : misha., // получаем из wp_localize_script()
data :
paged : paged, // номер текущей страниц
action : // экшен для wp_ajax_ и wp_ajax_nopriv_
,
beforeSend : xhr
button. ;
,
success : data

paged++; // инкремент номера страницы
button. data ;
button. ;

// если последняя страница, то удаляем кнопку
paged == maxPages
button.;

 

;

;
;

Я постарался сделать этот код максимально простым, дополнительными переменными усложнять его не стал. Если вы хотя бы немного разбираетесь в jQuery, то у вас не возникнет с ним никаких проблем. Даже если не разбираетесь, но сделаете всё по инструкции, то всё тоже будет ок.

Шаг 4. Обработчик PHP, вывод постов

Суть в том, что вы просто скроллите страницу вниз, а новые посты подгружаются по мере её прокрутки. Насколько я помню, впервые такая штука появилась у твиттера (могу ошибаться, поправьте, если я не прав), а потом уже все стянули её оттуда.

Скажу честно — заразная вещь. Те, кто сидят на сайте вконтакте, понимают это прекрасно. Так что, если у вас новостной сайт, тогда этот способ загрузки постов просто «must have».

Если вы сделали все предыдущие шаги из поста и дошли до этого момента — тогда отлично, добавим некоторые изменения для шагов 1 и 3.

Содержимое файла loadmore.js изменится и будет следующим.

Очень многие из моих учеников сталкиваются с тем, что им надо сохранить пагинацию. То есть, чтобы были и кнопка «Загрузить ещё» и пагинация ссылками. Причём сама пагинация должна динамически изменяться в зависимости от того, какие посты подгружены и на какой странице мы находимся после этого.

Если вы пишете асинхронные запросы для админки WordPress, а не для самого сайта, то вам следует знать несколько принципиальных отличий. В этом уроке я расскажу про эти отличия, а также поговорим за безопасность.

Способы подключения JS

Если вы не хоатите использовать отдельный JS-файл для ваших запросов, то вы можете вставить JavaScript-код непосредственно в HTML админки:

Способ 2. При помощи хука admin_enqueue_scripts

В предыдущих уроках мы сами динамически выводили URL AJAX-запроса и передавали его в скрипт функцией wp_localize_script(). В админке же ничего этого делать не нужно, URL обработчика AJAX всегда доступен в переменной ajaxurl.

jQuery.
type : ,
url : ajaxurl,
data : + my_value,
success : data
jQuery.data;

;

PHP-обработчик запроса

Опять-таки, в предыдущих уроках для написания обработчика AJAX-запроса мы использовали несколько хуков, а именно:

Как вы думаете, понадобится ли нам в админке второй хук? Конечно же нет, ведь в админке бывают только авторизованные пользователи!

// wp_ajax_ — только для зарегистрированных пользователей
, ;

true_function
, ;
‘Привет, значение ‘ . . ;
;

Безопасность запросов с использованием одноразовых чисел

На самом деле это нужно не только в админке, но самое время о них сейчас поговорить.

В общем для того, чтобы ваши AJAX-запросы не выполнил кто-то, кто их не должен выполнять, то вам следует их защитить. Для этого в WordPress существует механизм WP Nonces (одноразовых чисел).

Одноразовые числа уникальны в зависимости от сессии пользователя, поэтому запрос не сможет выполнить кто-то левый.

1 Создаём одноразовое число (токен)

При создании одноразовых чисел можете воспользоваться одной из следующих функций:

Например, если вы передаёте данные в запросе через $(‘#form’).serialize(), то вам больше подойдёт функция wp_nonce_field().

2 Проверяем одноразовое число в обработчике AJAX

Для проверки правильности одноразового числа в самое начало кода нашего запроса мы вставляем функцию check_ajax_referer(), в качестве первого параметра передаём секретный ключ одноразового числа.

Подробнее про это всё в видео.

Пример. Изменение значений произвольных полей постов «на лету».

Предположим, в нашем интернет-магазине прямо-таки дофига товаров и при этом приходится часто изменять их цены. Конечно, в таком случае будет удобнее, если редактируемое поле с ценой будет непосредственно в списке товаров, то есть, чтобы можно было изменять цену, не переходя на страницу редактирования.

На самом деле есть два варианта решения, но мы рассмотрим только тот, который по теме.

Шаг 1. Добавление колонки с ценой в список товаров

Более подробно о колонках в списках постов я писал здесь, кстати, возможно плагин магазина, который вы используете (если используете) уже мог сам надобавлять колонок, тогда вам потребуется лишь немного отредактировать их содержимое.

Вот готовый код для колонок.

Обязательно убедитесь, что тип поста на 16-й строчке кода соответствует вашему (слово product)!

Не знаете, куда вставлять код?

У вас должно получиться что-то в этом роде:

По скриншоту виду, что никаких кнопок типа «Сохранить» к полю добавлено не было — на самом деле зачем они нам, если цену можно сохранять автоматически (при снятии фокуса), достаточно лишь кликнуть мышью за пределами поля ввода.

Шаг 2. Создание и подключение скриптов

Самый легкий шаг на самом деле, но при этом он очень важен. Итак, сначала нужно создать какой-нибудь пустой js-файл в папке с вашей текущей темой (важно, чтобы он находился в той же папке, что и functions.php, style.css). Назовите его как-нибудь, у меня это будет ajax-post-meta.js.

Теперь в functions.php добавим:

Шаг 3. Асинхронный AJAX запрос. Содержимое файла ajax-post-meta

Если до этого шага вы делали всё в точности так, как я описывал, можете вставлять следующий код в ajax-post-meta.js, не задумываясь:

Шаг 4. Функция-обработчик

updatePrice_callback // название не имеет значения, но должно соответствовать названиям в хуках

, ;
// wp_ajax_nopriv_ не нужен, так как мы работаем в админке (а в админку не попадают незареганные пользователи)

В итоге у вас всё должно получиться, то есть сначала вводим цену в поле, потом щелкаем где-нибудь на странице (например переходим в другое поле), и цена сохраняется.

Оцените статью
NaWordpress.ru
Добавить комментарий