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: http://premium.wpmudev.com Описание: Тема для тестирования наших знаний AJAX Автор: Дэниел Патаки Автор: URI http://danielpataki.com шаблона: twentysixteen Версия: 1.0.0 Лицензия GNU General Public License или более поздней версии v2 лицензия URI: http://www.gnu.org/licenses/gpl-2.0.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-администратора ". Мы не можем добавить этот 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 ». Тип установлен на " после Как и любой запрос, отправленный по форме. Параметр данных является объектом, который содержит ключ-значение Что мы хотим отправить на сервер. Позже мы сможем читать их с помощью $ _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 я изменяю текст этого элемента для отображения ответа, который является новым номером.
Вот и все, по сути, вы должны увидеть эту новую функцию в действии в своей настраиваемой теме. Если у вас возникнут проблемы, дайте нам знать. У вас есть еще один совет, которым вы хотите поделиться? Сделайте это в разделе комментариев.
