Пропустить

Javascript WordPress: При использовании AJAX

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 600.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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 ', правда); }

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

Аякса WordPress Theme пример

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

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

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

Начните продвигать свой блог

Загрузите десятки логотипов, баннеров, шаблонов веб-сайтов и многих других маркетинговых инструментов для продвижения вашего блога WordPress. [Рекомендуется]

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

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

twentysixteen_entry_meta функция () {если ( 'пост' === get_post_type ()) {$ author_avatar_size = apply_filters ( 'twentysixteen_author_avatar_size' 49); Е ( «<SPAN класс = "имя автора"> <SPAN класс = "автор визитной карточки">% 1 $ S <SPAN класс = "экран-ридер-текст">% 2 $ s </ SPAN> <класс =«URL п п "HREF =" % 3 $ s «>% 4 </a> $ s </ SPAN> </ SPAN> 'get_avatar (get_the_author_meta (' user_email), $ author_avatar_size), _х ( 'Автор' ' . Используется перед именем автора сообщения '' twentysixteen), esc_url (get_author_posts_url (get_the_author_meta ( 'ID'))), get_the_author ()); } Если (in_array (get_post_type (), массив ( 'пост', 'вложение'))) {twentysixteen_entry_date (); } Формат $ Get_post_format = (); если (current_theme_supports (пост-форматов '$ файл)) {Е (' <пролет класс = "начального размера">% s <a href="%1$s"> $ 2 3% $ s </ а > </ SPAN> 'Sprintf (' <промежуток класс = "экран-ридер-текст">% s </ SPAN> '_й (' формат '' Используется перед столбом формата. '' twentysixteen «)), esc_url (get_post_format_link ($ файл)) get_post_format_string ($ файл)); } Если ( 'Post' === get_post_type ()) {twentysixteen_entry_taxonomies (); } {Эхо '<SPAN класс = "комментарии-ссылка">' (is_singular () && post_password_required () && (comments_open () || get_comments_number ())!); comments_popup_link (Sprintf (__ ( 'Оставить комментарий <SPAN класс = "экран-ридер-текст"> на% S </ SPAN>', «twentysixteen), get_the_title ())); эхо '</ SPAN>'; }}

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

$ Get_post_meta любовь = (get_the_ID (), 'show_some_love', правда); Любовь = $ (пусто ($ любовь))? 0: $ любовь; эхо '<SPAN класс = "любовь кнопки"> <IMG ширина = "28" SRC = ""> <класс пядь = "число">'. $ Любовь. </ Span> </ SPAN> «;
Объясните, весь этот код:

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

вторая строка в коде, чтобы установить значение в 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; }

Кнопка любовь WordPress учебник

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

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

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

Если вы нажмете кнопку в этот момент, вы должны увидеть предупреждение JavaScript с текстом «Love is shared. "

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

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

URL AJAX

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

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

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

wp_localize_script ( 'Аякса-тест-скриптов', 'ajaxTest', массив ( 'ajax_url' => admin_url ( 'админ-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 в квадратных скобках с параметром action. Модель выглядит следующим образом:

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

Параметр success - это функция, которая будет выполняться после завершения вызова 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 в конце каждого ответа. Если вы нажмете на кнопку сейчас, вы должны увидеть следующее:

JQuery Пример кнопки Аякса

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

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

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 я изменяю текст этого элемента для отображения ответа, который является новым номером.

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

Эта статья содержит комментарии 0

Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
6 акции
доля2
чирикать1
Регистрация3