Ajax, или Asynchronous JavaScript и XML, используется для взаимодействия с серверными сценариями и позволяет загружать динамический контент без перезагрузки страницы.

Допустим, например, что вы создаете сайт для местной благотворительной организации и хотите создать позитивную атмосферу. Вы можете добавить кнопку под названием "Покажи немного любви! »Со счетчиком на домашней странице и, благодаря AJAX, каждый раз при нажатии кнопки (кликнул посетитель), счетчик увеличивается без перезагрузки страницы.

Это пример, который мы построим в этом руководстве.

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

Давайте начнем.

Основы AJAX

• Канал AJAX обычно состоит из следующих шагов:
• Инициировать вызов AJAX из-за действия пользователя
• Прием и обработка запроса на сервере
• Захватите ответ и выполните все необходимые действия через JavaScript
• Настройка новой среды темы

Давайте применим это на практике в WordPress. В нашем первом примере отображается простое всплывающее окно, содержащее количество комментариев к статье, когда мы нажимаем на заголовок. Мы будем использовать дочернюю тему на основе " Двадцать Шестнадцать Из WordPress.

Вот что вам нужно сделать:

Создайте новую папку в папке «Темы» в вашей установке WordPress в WP-содержание "И назовите его" ajax-test ", создайте два файла требуется WordPressа именно functions.php "," Styles.css "и добавьте новый файл с именем" script.js ". Добавьте следующий код в заголовок вашей таблицы стилей CSS (style.css).

/* Имя темы: Тема тестирования Ajax URI темы: https://premium.wpmudev.com Описание: Тема для проверки наших знаний AJAX Автор: Дэниел Патаки URI автора: https://danielpataki.com Шаблон: двадцатьшестнадцать Версия: 1.0.0. 2 Лицензия: GNU General Public License v2.0 или более поздняя версия URI лицензии: https://www.gnu.org/licenses/gpl-XNUMX.html */

Таблица стилей родительской темы должна быть загружена дочерней темой. Раньше это делалось путем импорта файла CSS в дочернюю тему, но рекомендуемый способ сделать это - использовать «постановку в очередь». Помните, мы показали вам, как использовать эту функцию.

Давайте добавим таблицу стилей родителя и наш файл JavaScript напрямую:

add_action ( 'wp_enqueue_scripts', 'ajax_test_scripts'); Функция ajax_test_scripts () {wp_enqueue_style (родитель-стиль ', get_template_directory_uri ()' /style.css '.); wp_enqueue_script (. get_stylesheet_directory_uri 'Аякса-Test-скрипты' () '/scripts.js', массив ( 'JQuery'), 1.0.0 ', правда); }

Если вы чувствуете, что у вас достаточно энергии, чтобы сделать еще один шаг вперед, найдите красивое изображение, обрежьте его до 880 на 660 пикселей и поместите в папку детской темы, а затем переименуйте его " screenshot.png ". Он появится в разделе внешнего вида, когда вы захотите активировать тему.

Поскольку эта дочерняя тема основана на « Двадцать Шестнадцать И чтобы мы ничего не меняли (пока!), Сайт должен выглядеть точно так же, как классическая тема с темой " Двадцать Шестнадцать .

Добавление кнопки

Для начала добавим кнопку " Показать любовь unpeu! ". Отличное место для отображения - на боковой панели тематических статей.

После некоторых исследований выясняется, что боковая панель создается функцией с именем " twentysixteen_entry_meta () »Который находится в каталоге« вкл / шаблон-tags.php .

Эта функция " соединяемый Это означает, что мы можем изменить его, определив его в нашем собственном файле functions.php. Первый шаг - скопировать и вставить всю функцию в наш собственный файл functions.php:

function twentysixteen_entry_meta () {if ('post' === get_post_type ()) {$ author_avatar_size = apply_filters ('twentysixteen_author_avatar_size', 49); printf (' % 1 $ s % 2 $ s % 3 $ s ', get_avatar (get_the_author_meta ('user_email'), $ author_avatar_size), _x ('Author', 'Используется перед именем автора сообщения.', 'twentysixteen'), esc_url (get_author_posts_url (get_the_author_meta ('ID'))), get_the_author ()); } если (in_array (get_post_type (), array ('сообщение', 'вложение'))) {twentysixteen_entry_date (); } $ format = get_post_format (); if (current_theme_supports ('форматы сообщений', $ format)) {printf (' % 4 $ s % 1 $ s ', sprintf (' % s ', _x ('Формат', 'Используется перед форматированием сообщения.', ' twentysixteen ')), esc_url (get_post_format_link ($ format)), get_post_format_string ($ format)); } если ('сообщение' === get_post_type ()) {twentysixteen_entry_taxonomies (); } если (! is_singular () &&! post_password_required () && (comments_open () || get_comments_number ())) {echo ' '; comments_popup_link (sprintf (__ ('Оставить комментарий к% s ', 'twentysixteen'), get_the_title ())); эхо ' '; }}

Давайте добавим наш ключ в конец всех метаданных:

$ love = get_post_meta (get_the_ID (), 'show_some_love', правда); $ любовь = (пусто ($ любовь))? 0: $ любовь; эхо ' '. $ любовь. ' ';

Объясните, весь этот код:

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

вторая строка в коде, чтобы установить значение в 0, если значение пустое.

Третья строка отображает кнопку, которая состоит из строки, содержащей изображение и количество лайков. Я оставил источник изображения пустым, потому что хочу использовать в нем SVG. Вы можете использовать SVG в кодировке base64 для создания строки изображения. Это избавит вас от необходимости делать запросы и сделает ваш сайт более производительным.

Я использовал это небольшое бесплатное изображение это ссылка. Скопируйте и вставьте полученный код в источник изображения следующим образом:

$love = get_post_meta( get_the_ID(), 'show_some_love', true );
$love = ( empty( $love ) ) ? 0 : $love;
echo '<span class="love-button"> <img width="28" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI0MHB4IiBpZD0iTGF5ZXJfMSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDAgNDA7IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA0MCA0MCIgd2lkdGg9IjQwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik0xOS45NzkwMDAxLDkuMTk1MzAwMSAgQzI1LjYzOTIwMDItMS44ODY3LDM4LjUxMTY5OTcsMy4zOTU5OTk5LDM3Ljk0OTE5OTcsMTMuMzAyN0MzNy4zNjM4LDIzLjYxNjE5OTUsMjIuODc0NTAwMywyNy4xNzM3OTk1LDE5Ljk3OTAwMDEsMzQuOTgxODk5MyAgQzE3LjA4MzAwMDIsMjYuOTc5MDAwMSwyLjc4OTU5OTksMjMuODExNTAwNSwyLjAwODMwMDEsMTMuMzAyN0MxLjI3MzksMy40MDc3MDAxLDE0LjkzNTk5OTktMS45MzEyLDE5Ljk3OTAwMDEsOS4xOTUzMDAxeiIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6I0ZGNTk0RjsiLz48L3N2Zz4="><span class="number">' . $love . '</span></span>';

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

.love-кнопка IMG {Правое поле: 6px; Непрозрачность: 0.7; курсор: указатель; } .love кнопки IMG: парения {непрозрачности: 1; }

Запуск действия

Наконец, мы подошли к нашему JavaScript! Мы должны нацелить наш предмет и обнаружить клик по нему. Вот как это сделать:

(function ($) {$ (document) .on ('click', '.love-button img', function () {alert ("love is shared");})}) (jQuery);

Если вы нажмете кнопку в этот момент, вы должны увидеть предупреждение JavaScript с текстом «Любовь разделяется». "

Требования к данным

Вместо этого текста нам нужно вызвать AJAX-вызов. Прежде чем писать наш код, мы поймем, что нам нужно отправить.

URL-адрес AJAX

Прежде всего, нам нужно место для отправки данных. Место, куда мы отправляем данные, обработает данные и ответит на звонок. WordPress имеет встроенное место для обработки вызовов AJAX, которое мы можем использовать: " Админ-ajax.php "внутри" wp-admin ". Мы не можем добавить этот URL в наш скрипт (использование "сырого" кода недопустимо), Так что давайте использовать некоторые хитрые WordPress.

Функция wp_localize_script () Первоначально был предназначен для перевода строк в файлах JavaScript, что у него хорошо получается. Мы также можем использовать его для передачи переменных в наши файлы JavaScript, в данном случае URL-адреса нашего файла AJAX. Добавьте в наш файл следующий код " Функции Следующим образом:

wp_localize_script ('ajax-test-scripts', 'ajaxTest', array ('ajax_url' => admin_url ('admin-ajax.php')));

Результат этого последнего объекта будет называться ajaxTest, который будет содержать данный массив в последнем параметре в качестве свойств. Для ввода значения мы можем использовать ajaxTest.ajax_url в коде JavaScript.

Идентификатор статьи

Мы отправим произвольные данные в качестве идентификатора статьи (который мы будем использовать для определения статьи, к которой мы хотим "добавить немного любви"). Его можно получить из DOM. Взгляните на структуру, используемую в теме «Двадцать шестнадцать» ниже:

Наша кнопка имеет "артикль" как один из предков. Этот элемент имеет класс и содержит числовой идентификатор статьи. Хотя это не самое элегантное решение, мы можем получить идентификатор оттуда.

$ (Документ) .он ( 'щелчок', 'IMG .love кнопку', функция () {вар = ParseInt post_id ($ (это) .parents ( 'article.post:first'). Атр ( 'ID') .Надеть ( 'пост', '')); console.log (ID)})

Действие

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

Отправка запроса AJAX

Теперь мы можем собрать все вместе. Нам нужно создать вызов AJAX для " сор-админ / админ-ajax.php Который содержит идентификатор статьи и действие. Вот как это должно выглядеть.

(Функция ($) {$ (документ) .он ( 'нажмите', 'IMG .love кнопку', функция () {вар = ParseInt post_id ($ (это) .parents ( 'article.post:first'). . атр ( 'ID') вместо ( 'пост', '')); $ .ajax ({URL: тип ajaxTest.ajax_url 'пост', данные: {действие: 'add_love' pOST_ID: post_id} , успех: функция (ответ) {Alert ( 'успех, новый отсчет' + ответ)}})})}) (Jquery);

$ .ajax () - это используемая функция, которая принимает несколько параметров. URL содержит цель, которая в настоящее время является нашим файлом Ajax-url.php ». Тип установлен на " после » как и все запросы, отправленные формой. Параметр data — это объект, содержащий пары " ключ-значение Что мы хотим отправить на сервер. Позже мы сможем читать их с помощью $ _POST ['action'] и $ _POST ['post_id'].

обработка приложений

Обычно вам нужно отредактировать файл Админ-ajax.php », Потому что запрос отправляется туда. Это системный файл, поэтому мы не собираемся его изменять. WordPress позволяет передавать запросы AJAX, используя квадратные скобки с параметром действия. Модель выглядит следующим образом:

Если вы назвали свое действие add_love Вы должны прикрепить функцию к хуку с именем " wp_ajax_add_love И / или wp_ajax_nopriv_add_love ». Действия NoPriv ”Запускается для вышедших из системы пользователей, один запускается только для вошедших в систему пользователей. В нашем случае мы хотели бы использовать оба. В качестве быстрой проверки мы установим возвращаемое значение по умолчанию:

Параметр успеха - это функция, которая запускается после завершения вызова AJAX. Мы покажем простое предупреждение, которое показывает «Молодец! Новая учетная запись », и наш ответ добавлен в конце.

add_action ( 'wp_ajax_add_love', 'ajax_test_add_love'); add_action ( 'wp_ajax_nopriv_add_love', 'ajax_test_add_love'); ajax_test_add_love функция () {эхо 4; умереть (); }

Мы прикрепили нашу функцию к обеим скобкам, одна сделана эхо 4, а затем использовал функцию умереть () ». Это необходимо на WordPress, в противном случае вы получите 0 в конце каждого ответа. Если вы нажмете на кнопку сейчас, вы должны увидеть следующее:

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

ajax_test_add_love функция () {$ любовь = get_post_meta ($ _POST [ 'post_id'] 'show_some_love', правда); Любовь = $ (пусто ($ любовь))? 0: $ любовь; $ Любовь ++; update_post_meta ($ _ POST [ 'post_id'], 'show_some_love' любовь $); Эхо $ любви; умереть (); }

Если вы нажмете кнопку сейчас, вы должны увидеть всплывающее окно с отображением1». Если вы обновите страницу, вы должны увидеть новый номер. Повторное нажатие на кнопку сделает это 2 ". Все, что нам нужно сделать сейчас, это убедиться, что число отображается непосредственно в пользовательском интерфейсе.

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

Эта часть кажется легким (потому что это), но, как правило, сложнее всего собрать. Пока все, что нам нужно сделать, это найти элемент, содержащий текущее число, и изменить его содержимое с помощью ответа.

(Функция ($) {$ (документ) .он ( 'щелчок', 'IMG .love кнопки', функция () {переменная = ParseInt post_id ($ (это) .parents ( 'article.post:first'). . Attr ( 'ID') заменить ( 'пост', '')); переменная $ число = $ (это) .parent () найти (. 'число') $ .ajax ({URL :. ajaxTest.ajax_url, Тип: 'пост', данные: {действие: 'add_love' pOST_ID: post_id,}, успех: функция (ответ) {$ number.text (ответ);}})})}) (Jquery);

Я добавил только две строки в наш предыдущий JS-код. В строке 5 я сохраняю элемент, содержащий число в переменной $ номер, В строке 14 я изменяю текст этого элемента для отображения ответа, который является новым номером.

Вот и все, по сути, вы должны увидеть эту новую функцию в действии в своей настраиваемой теме. Если у вас возникнут проблемы, дайте нам знать. У вас есть еще один совет, которым вы хотите поделиться? Сделайте это в разделе комментариев.

Блэр Jersyer

Разработчик WordPress, увлеченный всем, что касается новых технологических тенденций. Авторы плагинов, тем WordPress и других веб-приложений. Автор на BlogPasCher.com.

Посмотреть полную биографию