WordPress ajax

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

Тут я буду рассчитывать на то, что вы базово знаете PHP, базово знаете jQuery. Если да, то трудностей этот урок вызвать не должен.

Если вы не знаете этих вещей, то сорян, вам тут вычитывать нечего. ? Заглядывайте чуть попозже.

Если вы не уверены в своих силах, сначала просто неспеша вчитайтесь в эту статью, а только потом приступайте к действию. Всё у вас получится ?

Тут важно уточнить, что это именно урок для начинающих, тут мы не будем работать с типами данных json, выполнять nonce-проверки и пр.

0. Подготовка 

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

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

Если применять это к правильному подключению JavaScript в WordPress, то в теме это вполне может выглядеть так:

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

будет, но не факт).

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

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

1. Познакомимся с $.ajax 

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

Го по строчкам прокомментирую:

• 4 – абсолютный URL обработчика PHP, то есть ссылка на файл, например https://misha.blog/myajax.php
• 5 – точно так же, как и с отправкой форм, если используете POST, то для получения переменных в PHP вам нужен массив $_POST, если используете GET, то тогда будете использовать массив $_GET
• 6 – сами параметры, тут я их передал в виде урл-строки, но вы можете передавать их также в виде объекта, для объекта это будет выглядеть так:

  И соответственно, вне зависимости от того, какой вариант указания параметров вы выберете, для нашего примера они будут доступны в PHP коде (я решил назвать файл myajax.php, помним да?) при помощи $_POST['param1'] и $_POST['param2'].



• 7-9 – это функция, которая выполнится перед отправкой запроса, тут можно годно активировать всякие прелоадеры, я вот например изменил текст кнопки .
• 11-14 – это функция запускается сразу после получения данных, а данные это… параметр этой функции конечно же, он может называться по-разному, у меня — data
• У функции $.ajax есть много прикольных параметров, я рекомендую попрактиковаться с ними, документацию можете найти на официальном сайте.

Так, теперь самая важная часть – обработка запроса в PHP. У нас с вами есть файл myajax.php, который находится в корне сайта, пусть он сложит два параметра – param1 и param2 и возвратит нам их сумму. Ну изи же? ?

Прежде, чем перейти к следующему шагу, сделайте, чтобы при нажатии на кнопку у вас выводилась сумма двух параметров в alert().

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

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

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

• На 4й строчке мы указываем на путь на наш собственный файл-обработчик, а на стандартный вордпрессовский, он всегда находится в одном месте — https://misha.blog/wp-admin/admin-ajax.php (только домен моего сайта замените на свой, очень прошу). Так как я использую мой код в файле footer.php, в среде WordPress, то я могу получить путь к этому файлу динамически, например при помощи функции admin_url() или site_url().
• На 6-й строке, там где передаются параметры, обязательно нужно указать параметр action с каким-нибудь произвольным значением, которое мы будем подцеплять чуть позже.

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

3. Распространённые ошибки 

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

Ничего не происходит или страница перезагружается ?

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

То есть уже примерно понимаем, что к чему.

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

Я вас поздравляю ? — если вывелся 0, значит с вашим кодом jQuery всё прекрасно! Обычно 0 означает, что запрос к admin-ajax.php

выполнился, но произошло несоответствие параметра action.

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

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

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

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

misha.blog

AJAX — очень крутая штука. Эта штука позволяет создавать действительно классные интерактивные приложения. Грубо говоря, с помощью AJAX можно делать разные привычные вещи “без перезагрузки страницы”: подгрузка новых статей без перезагрузки страницы, отправка комментариев WordPress без перезагрузки страницы, вывод результатов поиска под полем ввода без перезагрузки страницы.

По возможности, буду стараться создавать новые проекты с использованием AJAX. Это действительно очень удобно. Пользователю не нужно сидеть и смотреть на белый экран браузера, пока загрузится сайт — можно добавить красивенький прелоадер, прогресс-бар или надпись “Подождите секундочку…”. Тот же VK работает на AJAX. Ладно, не буду расписывать много об этом (это тема отдельной статьи), думаю, суть ясна.

AJAX — подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером. В результате, при обновлении данных веб-страница не перезагружается полностью, и веб-приложения становятся быстрее и удобнее.

Википедия

А теперь ближе к теме. У WordPress есть очень удобный функционал для работы с AJAX. Достаточно написать нужную нам функцию и вызвать ее через ajax-хук.

Выглядит он таким образом:

Где myaction — имя нашего хука, а action_handler — имя функции, которую он вызывает. Стоит отметить, что этот хук сработает только для авторизованных пользователей. В этом есть смысл, когда мы пишем что-то для админки, но чтобы он работал для всех посетителей сайта, нужно продублировать хук с добавленным словом nopriv, то есть в полном виде будет так:

Для отправки самих же AJAX запросов я использую встроенную функциональность в jQuery.

Да, в url должен стоять адрес /wp-admin/admin-ajax.php

Пример

Я написал новый пост с обновленным примером. Там более актуальный код и лучше разжевано. Вот ссылка.

Где-то в феврале я делал вот такой блог http://blogstark.ru/ (видно, сайта уже нет). Несмотря на его типичность, функциональность в нем не совсем типичная:)

AJAX здесь используется в двух случаях: подсчетов количества просмотров страниц (и его отображение) и подсчет кол-ва лайков, точнее репостов статьи (реальных, а не кликов по кнопкам). О втором случае расскажу уже в следующей статье, а кол-во просмотров покажу здесь.

И так, сначала пишем две функции в functions.php для подсчета и вывода количества просмотров статьи.

В первом случае получаем статью по её id, добавляем единицу к просмотру и пишем значение в базу, во втором — читаем значение.

Теперь немного JavaScript.

Создаем две функции, которые принимают id поста.

postviewCountGet получает из базы кол-во просмотров статьи, а postviewCountSet добавляет +1 к просмотру статьи.

Использовать AJAX в WordPress для подсчета количества просмотров — идеально. Во-первых, это решает проблему с кэшированием. На сайте используется мой любимый Hyper Cache, с этим нет никакой головной боли. Во-вторых, за счет этого сама страница загружается быстрее, так как ее можно достать из кэша, начать читать, а потом уже асинхронно подгрузятся циферки.

Для защиты/проверки запросов можно использовать nonce (wp_create_nonce(),wp_verify_nonce()).

Вот такая небольшая, но, думаю, полезная статья. AJAX — крутая штука, используйте её чаще, делайте свои сайты интерактивнее. Если есть вопросы — отвечу в комментариях или по почте.

popovses.net

Что такое AJAX?

С помощью JavaScript/jQuery мы можем управлять элементами DOM/HTML. Но мы можем просто добавлять данные,  доступные в DOM, или  же код с помощью собственно JavaScript.

AJAX – это «мостик» для передачи данных от PHP к DOM без необходимости перезагружать страницу. К примеру, мы можем выдергивать данные с сервера (используя PHP), когда пользователь кликает кнопочку или прокручивает страницу…

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

Пример:

Я создаю пустой div:

И я хочу добавить немного текста-заполнителя внутрь этого пустого div. Я могу спокойно сделать это с помощью jQuery:

Так, из кода-примера наверху, мне нужно написать текст-заполнитель в JavaScript-коде. А что если текст это «контент поста» или «пользовательские данные», которые динамически изменяются в базе данных? Решение – это использование AJAX.

Как?

Используя AJAX, мы можем отправлять данные, используя метод POST или  GET (как в форме) для (конечной точки) URL и просмотра контента этого URL в качестве результата ЗАПРОСА

Чтоб вам проще было понять код  AJAX, приведенный ниже, скажем, что он  похож на HTML-форму:

 

И в этой конечной точке файл “process-ajax-request.php” мы можем использовать этот маленький PHP-скрипт, чтоб отобразить нужное содержимое:

И он отобразит этот текст в качестве финального результата запроса:

И если мы хотим отобразить HTML-вывод данных в пустом боксе, используя AJAX, мы можем сделать это, применив AJAX “успешный” метод:

WordPress и AJAX

Теперь, когда мы получили базовое понимание того, как это работает, давайте переключимся на WordPress.

AJAX URL

WP предоставляет великолепную поддержку AJAX, уже встроенного  в админ-страницу. URL/файл для исполнения  AJAX запросов в WordPress  — это  “admin-ajax.php”, и находится он в папке “wp-admin”.

Так что URL  этого файла выглядит примерно так:

Но, поскольку мы можем устанавливать  WordPress в виде всевозможных инсталляциях (например, инсталляция в виде подкатегории), этот URL не всегда выглядит, как путь, прописанный выше. Так что все зависит от того, как выглядит ваша WordPress-инсталляция.

Мы можем получить правильный URL, используя эту функцию:

Как вставить URL файла  “admin-ajax.php” в JavaScript?

В любом месте админ страниц/экрана доступна  глобальная переменная JavaScript “ajaxurl”. Так что если вы используете AJAX на административном экране, мы можем сделать это следующим образом:

Как насчет фронтенда (не административной области)?

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

И затем мы можем использовать переменную типа этой в вашем JavaScript:

AJAX Action

Следующий шаг заключается в создании PHP-функции,  необходимой для запуска  WordPress AJAX-запроса

WordPress использует единичный файл  “admin-ajax.php” для всего, что связано с AJAX. Чтоб идентифицировать каждый запрос и отреагировать на него правильным результатом/данными  WP использует переменную “action” , отсылая данные в качестве уникального идентификатора и загружая экшн-хук, основываясь на action-запросе.

Так что в файле “admin-ajax.php” WordPress загрузит функцию, в основе которой лежит запросный экшн, основанный на экшн-хуке.

Вот пример:

Так, для этого AJAX, мы можем показать результат в PHP –функции, используя wp_ajax_*экшн-хуки, как здесь:

На самом деле WordPress  имеет два экшн-хука для AJAX-возврата:

1. wp_ajax_* (тот же, что и выше): для авторизованного пользователя
2. wp_ajax_nopriv_* :для не авторизованного пользователя.

Так, если вы хотите отобразить один и тот же результат для авторизованных и не авторизованных пользователей, мы можем использовать это (просто используйте ту же callback-функцию для обоих хуков):

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

Если вы используете WordPress AJAX в админ-панели, вам просто нужно использовать “wp_ajax_*” –хук, потому что не авторизованные пользователи просто не могут посетить админ-панель. Но если вы используете AJAX во фронтенде и для пользователя, и для посетителя (например, для отображения  контента записи), вам нужно использовать оба хука —  “wp_ajax_*” и “wp_ajax_nopriv_*”.

Вы можете делать все, используя callback-функцию

• Вы можете загрузить запись, используя “wp_query”
• Вы можете возвращать опции, используя “get_option()”
• Вы можете получать метаданные записи, сохранить их и т. д.

Вы можете протестировать этот простой шорткод-плагин, используя код, данный выше:

Сделать это очень просто. Создаем запись, добавляем шорткод  [john-cena] внутрь нее, публикуем и видим результат.

wpnice.ru

Первый вариант

1. Создайте в папке с вашим WordPress-шаблоном новый php-файл (например, ajax_archives.php) со следующим содержимым:

2. Зайдите в админку WordPress и создайте новую страницу. Назовите ее как угодно, например «Список архивов». Справа в блоке «Атрибуты страницы» выберите шаблон «AJAX список архивов».

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

3. В том месте файла sidebar.php, где вы хотите увидеть список архивов, вставьте такой html-код:

4. AJAX мы реализуем с помощью jQuery, поэтому, если он еще не подключен на вашем сайте, в файл header.php перед кодом <?php wp_head(); ?> добавьте следующий код:

5. Теперь осталось добавить на сайт малюсенький скриптик, который будет загружать нужный контент. Создайте js-файл (например, scripts.js) и вставьте в него следующий код:

   Вместо http://ВАШ_ДОМЕН/ajax_archives/ подставьте адрес выше созданной страницы.

   Файл закиньте в папку с шаблоном вашего сайта и подключите в файле header.php, вставив следующую строку перед тегом </head>:

Второй вариант

Этот вариант заметно проще, т.к. здесь не потребуется создавать дополнительную страницу.

1. Создайте в папке с вашим WordPress-шаблоном новый php-файл (например, ajax_archives.php) со следующим содержимым:

   Именно первая строчка кода и позволяет избежать необходимости создания новой страницы.

2. В том месте файла sidebar.php, где вы хотите увидеть список архивов, вставьте такой html-код:

3. Если jQuery еще не подключен на вашем сайте, в файл header.php перед кодом <?php wp_head(); ?> добавьте следующий код:

4. Создайте новый js-файл (например, scripts.js) и вставьте в него следующий код:

   Файл закиньте в папку с шаблоном вашего сайта и подключите в файле header.php, вставив следующую строку перед тегом </head>:

Вот, собственно, и все. Можете наблюдать результат.

Подобным образом можно запихнуть хоть весь сайдбар, либо сделать несколько отдельных блоков с каким-то содержимым.

dimox.name

Добрый день. Возникла проблема, не могу понять где лужа.
Есть набор статей. Выпадающим выводится список, далее я получаю ID статьи, и из этой статьи нужно вывести метки этой статьи.
Решил делать это с помощью ajax. Но выдаёт мне undefined и всё тут.
Привожу код:
HTML:

<div class="block_oborud"> <form method="post" id="geo"> <div class="col-xs-9" style="padding: 0;"> <select class="form-control" name="model" placeholder="Выберите модель"> <?php $args = array( 'post_type' => 'post', 'category' => 3, 'posts_per_page' => 25, 'order' => 'ASC' ); $attachments = get_posts( $args ); if ($attachments) { foreach ( $attachments as $post ) { setup_postdata($post); echo "<option value='"; echo the_ID()."'>"; //передаём ID поста на сервер для отображения городов echo the_title(); //отображаем название модели в форме echo "</option>"; } } wp_reset_postdata(); ?> </select> </div> <div class="col-xs-3" style="padding: 0;"> <input type="hidden" value="citiesView" name="action"> <input type="submit" class="btn" value="Показать"> </div> </form></div>

functions.php

function citiesView(){ if (isset($_POST['model'])) { $post_id = $_POST['model']; $cities = array( 'status' => 1, 'city' => wp_get_post_tags($post_id) ); echo json_encode($cities); } else { $cities = array( 'status' => 0, 'city' => 'Городов не найдено' ); echo json_encode($cities); } wp_die();}add_action('wp_ajax_postview_citiesView', 'citiesView');add_action('wp_ajax_nopriv_postview_citiesView', 'citiesView');

и JS

$('#geo').submit(function(e) { e.preventDefault(); var ajaxurl = 'http://' + location.host + '/wp-admin/admin-ajax.php'; var msg = $(this).serialize(); $.ajax({ type: "POST", url: ajaxurl, data: msg, success: function(html) { var res = JSON.parse(html); alert(res.status); }, error: function(html) { alert('Some Trouble'); } })})

событие error в ajax-запросе не срабатывает. просто выдаётся undefined.
правильно понимаю, что запрос к functions.php происходит нормально, но какая-то фигня с данными которые должны выводиться в алерте?

htmlforum.io

Всем йоханга!
Сегодня будем решать не простую задачу добавления поста с лицевой части сайта на WordPress, да еще и с помощью ajax, и не просто поста, а поста произвольного типа. В одной из прошлых статей мы разобрались как быстро создать таксономии, посты произвольного типа, запилить к ним шаблоны и форму добавления, но этот случай добавления очень простой, работает на API плагина PODS и не освещает кучу подводных камней и сейчас мы это исправим и заодно разберемся как правильно юзать аякс в WordPress.

Итак, задача:

• Сделать возможность добавления поста произвольного типа с фронт-энда, минуя админку.
• Все должно работать без перезагрузки страницы, т.е. на аяксе.
• Посты, помимо стандартных полей, имеют дополнительные поля, а также поле множественной загрузки картинок.
• При добавлении, посты должны привязываться к терминам(элементам) таксономии, тоже произвольной.
• Использовать можно только нативные механизмы WP.

У нас есть произвольный тип постов с полями:

• заголовок(стандартное поле — post_title),
• текст(стандартное — post_content),
• миниатюра(стандартное поле типа файл, потом будем получать id загруженного файла — _thumbnail_id),
• обычная строка(произвольное поле типа строка — string_field),
• форматированный текст(произвольное, текстарея — text_field),
• поле множественной загрузки файлов(произвольное типа файл, дополнительные поля добавляются с помощью jQuery — multifile_field).

Так же посты привязаны к двум произвольным таксономиям:

• простая таксономия без вложенности, как тэги — custom_tax_like_tag,
• таксономия с иерархией/вложенностью как у категорий — custom_tax_like_cat.

Причем если пост принадлежит к дочернему термину — он должен принадлежать и к родителю.
Жирным выделено название полей и слаги таксономий.

Решение: сделаем обычную форму со всеми полями, обработаем её отправку с помощью jQuery и плагина jQuery-forms, примем полученные данные по всем правилам работы ajax в WordPress, все проверим, добавим пост с полями и медиафайлами, привяжем к таксономиям и вернем ответ.

Начнем.

0. Подготовим WP для использования аякса:
В WP существует свой механизм работы с аяксом и раз мы используем только стандартное API, то будем делать все по правилам.
Суем это в functions.php нашей темы:

add_action('wp_print_scripts','include_scripts'); // действие в котором прикрепим необходимые js скрипты и передадим данные   function include_scripts(){   wp_enqueue_script('jquery'); // добавим основную библиотеку jQuery   wp_enqueue_script('jquery-form'); // добавим плагин jQuery forms, встроен в WP   wp_enqueue_script('jquery-chained', '//www.appelsiini.net/projects/chained/jquery.chained.min.js'); // добавим плагин для связанных селект листов     wp_localize_script( 'jquery', 'ajaxdata', // функция для передачи глобальных js переменных на страницу, первый аргумент означет перед каким скриптом вставить переменные, второй это название глобального js объекта в котором эти переменные будут храниться, последний аргумент это массив с самими переменными  			array(    				'url' => admin_url('admin-ajax.php'), // передадим путь до нативного обработчика аякс запросов в wp, в js можно будет обратиться к ней так: ajaxdata.url   				'nonce' => wp_create_nonce('add_object') // передадим уникальную строку для механизма проверки аякс запроса, ajaxdata.nonce  			)  		);  }

Теперь у нас подключены нужные плагины и определены глобальные js переменные для граммотной работы с аяксом.

1. Запиливаем форму добавления:
Так как у нас есть вложенная таксономия, для удобства воспользуемся плагином jQuery chained, это для того, чтобы после выбора родительского термина, в следующий селектлист нам добавились только дочерние термины к выбранному. Еще сделаем ссылку, которая будет добавлять нам поля типа файл, для мультизагрузки картинок.
Пусть поля тайтл, постконтент и выборы терминов таксономий будут обязательны.

Ахтунг! Нельзя чтобы атрибут name у контроллов выбора терминов таксономии был таким же как слаг таксономии — вордпресс может пытаться отфильтровать контент по этой таксономии вместо того, что мы хотим.

Код формы:

<?php  // подготовим актуальные данные таксономий  $cats = get_terms('custom_tax_like_cat', 'orderby=name&hide_empty=0&parent=0'); // получим все термины(элементы) таксономии с иерархией  foreach ($cats as $cat) { // пробежим по каждому полученному термину   $parents.="<option value='$cat->term_id' />$cat->name</option>"; // суем id и название термина в строку для вывода внутри тэга select   $childs_array = get_terms('custom_tax_like_cat', 'orderby=name&hide_empty=0&parent='.$cat->term_id); // возьмем все дочерние термины к текущему  	foreach ($childs_array as $child){  		$childs.="<option value='$child->term_id' class='$cat->term_id' />$child->name</option>"; // делаем то же самое, класс должен быть равным id родительского термина чтобы плагин chained работал  	}  }  $tags_array = get_terms('custom_tax_like_tag', 'orderby=none&hide_empty=0&parent=0'); // получим все термины таксономии без вложенности  foreach ($tags_array as $tag) { // пробежим по каждому   $tags .= '<label><input type="radio" name="tag" value="'.$tag->term_id.'">'.$tag->name.'</label>'; // суем все в radio баттоны  }  ?>  <?php // Выводим форму ?>  <form method="post" enctype="multipart/form-data" id="add_object">  	<label>Кастом категории-родители:  		<select id="parent_cats" name="parent_cats" required>  			<option value="">Не выбрано</option>  			<?php echo $parents; // выводим все родительские термины ?>  		</select>  	</label>    	<label>Кастом категории-дети:  		<select id="child_cats" name="child_cats" required>  			<option value="">Не выбрано</option>  			<?php echo $childs; // выводим все дочерние термины, плагин chained сам покажет только нужные элементы в зависимости от выбранного родительского термина ?>  		</select>  	</label>    	Кастом тэги   	<?php echo $tags; // выводим термины таксономии без иерархии в radio ?>    	<label>Тайтл(стандартное) <input type="text" name="post_title" required/></label>  	<label>Пост контент(стандартное) <textarea name="post_content" required/></textarea></label>  	<label>Поле типа строка(произвольное) <input type="text" name="string_field"/></label>  	<label>Пост типа текст(произвольное) <textarea name="text_field"/></textarea></label>  	<label>Миниатюра(стандартное): <input type="file" name="img"/></label>  	<label id="first_img" class='imgs'>Дополнительные фото(произвольное): <input type='file' name='imgs[]'/></label>  	<a href="#" id="add_img">Загрузить еще фото</a>  	<input type="submit" name="button" value="Отправить" id="sub"/>  	<div id="output"></div> <?php // сюда будем выводить ответ ?>

2. Перехват отправки формы и подготовка данных:
Суньте это куда удобнее: прямо на страницу или в специальный js файл для кастом скриптов =)

function ajax_go(data, jqForm, options) { //ф-я перед отправкой запроса   	jQuery('#output').html('Отправляем...'); // в див для ответа напишем "отправляем.."   	jQuery('#sub').attr("disabled", "disabled"); // кнопку выключим  }  function response_go(out) { // ф-я обработки ответа от wp, в out будет элемент success(bool), который зависит от ф-и вывода которую мы использовали в обработке(wp_send_json_error() или wp_send_json_success()), и элемент data в котором будет все что мы передали аргументом к ф-и wp_send_json_success() или wp_send_json_error()  	console.log(out); // для дебага  	jQuery('#sub').prop("disabled", false); // кнопку включим  	jQuery('#output').html(out.data); // выведем результат  }  jQuery(document).ready(function(){ // после загрузки страницы  	jQuery("#child_cats").chained("#parent_cats"); // подключаем плагин для связи селект листов с терминами вложенной таксономии   	add_form = jQuery('#add_object'); // запишем форму в переменную   	var options = { // опции для отправки формы с помощью jquery form   		data: { // дополнительные параметры для отправки вместе с данными формы   			action : 'add_object_ajax', // этот параметр будет указывать wp какой экшн запустить, у нас это wp_ajax_nopriv_add_object_ajax   	nonce: ajaxdata.nonce // строка для проверки, что форма отправлена откуда надо   	},   	dataType: 'json', // ответ ждем в json формате   	beforeSubmit: ajax_go, // перед отправкой вызовем функцию ajax_go()   	success: response_go, // после получении ответа вызовем response_go()   	error: function(request, status, error) { // в случае ошибки   	console.log(arguments); // напишем все в консоль   	},   	url: ajaxdata.url // куда слать форму, переменную с url мы определили вывели в нулевом шаге    };    add_form.ajaxForm(options); // подрубаем плагин jquery form с опциями на нашу форму      jQuery('#add_img').click(function(e){ // по клику на ссылку "Добавить еще фото"   e.preventDefault(); // выключим стандартное поведение ссылки   jQuery(this).before("<label class='imgs'>Дополнительные фото(произвольное) <input type='file' name='imgs[]'/></label>"); // добавим перед ссылкой еще один инпут типа файл с таким же нэймом   });   });

3. Обработка данных и добавление поста:
Это тоже в functions.php

add_action( 'wp_ajax_nopriv_add_object_ajax', 'add_object' ); // крепим на событие wp_ajax_nopriv_add_object_ajax, где add_object_ajax это параметр action, который мы добавили в перехвате отправки формы, add_object - ф-я которую надо запустить  add_action('wp_ajax_add_object_ajax', 'add_object'); // если нужно чтобы вся бадяга работала для админов  function add_object() {  	$errors = ''; // сначала ошибок нет    	$nonce = $_POST['nonce']; // берем переданную формой строку проверки  	if (!wp_verify_nonce($nonce, 'add_object')) { // проверяем nonce код, второй параметр это аргумент из wp_create_nonce  		$errors .= 'Данные отправлены с левой страницы 
'; // пишим ошибку  	}    	// запишем все поля  	$parent_cat = (int)$_POST['parent_cats']; // переданный id термина таксономии с вложенностью (родитель)  	$child_cat = (int)$_POST['child_cats']; // id термина таксономии с вложенностью (его дочка)  	$tag = (int)$_POST['tag']; // id обычной таксономии  	$title = strip_tags($_POST['post_title']); // запишем название поста  	$content = wp_kses_post($_POST['post_content']); // контент  	$string_field = strip_tags($_POST['string_field']); // произвольное поле типа строка  	$text_field = wp_kses_post($_POST['text_field']); // произвольное поле типа текстарея    	// проверим заполненность, если пусто добавим в $errors строку  	if (!$parent_cat) $errors .= 'Не выбрано "Кастом категория-родитель"
';   if (!$child_cat) $errors .= 'Не выбрано "Кастом категория-ребенок xD"
';				    if (!$tag) $errors .= 'Не выбрано "Кастом тэг"
';   if (!$title) $errors .= 'Не заполнено поле "Тайтл"
';   if (!$content) $errors .= 'Не заполнено поле "Пост контент"
';     // далее проверим все ли нормально с картинками которые нам отправили   if ($_FILES['img']) { // если была передана миниатюра   		if ($_FILES['img']['error']) $errors .= "Ошибка загрузки: " . $_FILES['img']['error'].". (".$_FILES['img']['name'].") 
"; // серверная ошибка загрузки   	$type = $_FILES['img']['type'];   		if (($type != "image/jpg") && ($type != "image/jpeg") && ($type != "image/png")) $errors .= "Формат файла может быть только jpg или png. (".$_FILES['img']['name'].")
"; // неверный формат  	}    	if ($_FILES['imgs']) { // если были переданны дополнительные картинки, пробежимся по ним в цикле и проверим тоже самое  		foreach ($_FILES['imgs']['name'] as $key => $array) {  			if ($_FILES['imgs']['error'][$key]) $errors .= "Ошибка загрузки: " . $_FILES['imgs']['error'][$key].". (".$key.$_FILES['imgs']['name'][$key].") 
";   		$type = $_FILES['imgs']['type'][$key];   			if (($type != "image/jpg") && ($type != "image/jpeg") && ($type != "image/png")) $errors .= "Формат файла может быть только jpg или png. (".$_FILES['imgs']['name'][$key].")
";   		}  	}     	if (!$errors) { // если с полями все ок, значит можем добавлять пост  		$fields = array( // подготовим массив с полями поста, ключ это название поля, значение - его значение  			'post_type' => 'my_custom_post_type', // нужно указать какой тип постов добавляем, у нас это my_custom_post_type  	 	'post_title' => $title, // заголовок поста  	 'post_content' => $content, // контент  	 );  	 $post_id = wp_insert_post($fields); // добавляем пост в базу и получаем его id    	 update_post_meta($post_id, 'string_field', $string_field); // заполняем произвольное поле типа строка  	 update_post_meta($post_id, 'text_field', $text_field); // заполняем произвольное поле типа текстарея    	 wp_set_object_terms($post_id, $parent_cat, 'custom_tax_like_cat', true); // привязываем к пост к таксономиям, третий параметр это слаг таксономии  	 wp_set_object_terms($post_id, $child_cat, 'custom_tax_like_cat', true);  	 wp_set_object_terms($post_id, $tag, 'custom_tax_like_tag', true);    	 if ($_FILES['img']) { // если основное фото было загружено   			$attach_id_img = media_handle_upload( 'img', $post_id ); // добавляем картинку в медиабиблиотеку и получаем её id   			update_post_meta($post_id,'_thumbnail_id',$attach_id_img); // привязываем миниатюру к посту  		}    		if ($_FILES['imgs']) { // если дополнительные фото были загружены  			$imgs = array(); // из-за того, что дефолтный массив с загруженными файлами в пхп выглядит не так как нужно, а именно вся инфа о файлах лежит в разных массивах но с одинаковыми ключами, нам нужно создать свой массив с блэкджеком, где у каждого файла будет свой массив со всеми данными  			foreach ($_FILES['imgs']['name'] as $key => $array) { // пробежим по массиву с именами загруженных файлов  				$file = array( // пишем новый массив  					'name' => $_FILES['imgs']['name'][$key],  					'type' => $_FILES['imgs']['type'][$key],   					'tmp_name' => $_FILES['imgs']['tmp_name'][$key],   					'error' => $_FILES['imgs']['error'][$key],  					'size' => $_FILES['imgs']['size'][$key]  				);  				$_FILES['imgs'.$key] = $file; // записываем новый массив с данными в глобальный массив с файлами  				$imgs[] = media_handle_upload( 'imgs'.$key, $post_id ); // добавляем текущий файл в медиабиблиотека, а id картинки суем в другой массив  			}  			update_post_meta($post_id,'multifile_field',$imgs); // привязываем все картинки к посту  		}   	}    	if ($errors) wp_send_json_error($errors); // если были ошибки, выводим ответ в формате json с success = false и умираем  	else wp_send_json_success('Все прошло отлично! Добавлено ID:'.$post_id); // если все ок, выводим ответ в формате json с success = true и умираем  	  	die(); // умрем еще раз на всяк случ  }

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

Ахтунг! Если вы создавали тип постов с помощью плагина Pods, убедитесь что тип постов не имеет обязательных дополнительных полей, иначе функция wp_insert_post вернет кусок несчастья, пост добавится не полностью и ответ в нужном формате тоже не придет.

4. Примечания:

• Я специально усложнил все насколько смог, чтобы были примеры на все случаи жизни. Очевидно, что для добавления простого поста все проще, но по аналогии.
• Все таксономии и произвольный тип постов были созданы с помощью плагина Pods Framework за 5 минут. Как работать с этим плагином и какие кнопки нажимать читайте здесь. Если обязательные поля нужны, то для добавления используйте api плагина pods.
• Очень полезно будет прочитать про ajax в wordpress у Камы.

Ну вот и все. Мы запилили супер добавление кастом постов с произвольными полями, картинками и привязкой к таксономиям через ajax. оО

Шарьте статью, плюсуйте, спрашивайте, всем мир, развлекайтесь)

dontforget.pro

@Daniel

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

Правила большого пальца:

• В соответствии со стандартами WordPress все запросы ajax должны поступать на «ajaxurl» в javascript. Он фактически содержит путь файла wp-admin/admin-ajax.php.

  Пример:

  $.ajax({ url: ajaxurl, data: {'action':'generateCptApiKey'}, success:function(data) { console.log(data); }, error: function(errorThrown){ console.log(errorThrown); } }); 

Если вы делаете какой-нибудь sutff в разделе wp-admin dashboard или связаны с разделом wp-admin, например , создающим страницу параметров в области панели управления wp-admin, чем «ajaxurl» будет всегда доступна в javascript.

Если этот запрос ajax инициализируется с front end page/post, вам нужно указать путь admin-ajax.php, используя следующий метод и лучше, если вы локализовать это для front-end javascript, поэтому он будет доступен в переменной javascript, как это доступно в разделе панели управления wp-admin.

Для этого нам нужно добавить еще несколько строк кода.

Метод:

Обновленный внешний код ajax для кода примера:

// Register the script wp_register_script( 'ajaxsettings', 'path/to/ajaxsettings.js' );  // Localize the script with new data $ajaxsettings = array(  'ajaxurl' => admin_url('admin-ajax.php') ); wp_localize_script( 'ajaxsettings', 'ajaxsettings', $ajaxsettings );  // Enqueued script with localized data. wp_enqueue_script( 'ajaxsettings' );  $.ajax({  url: ajaxsettings.ajaxurl,  data: {'action':'generateCptApiKey'},  success:function(data) {  console.log(data);  },  error: function(errorThrown){  console.log(errorThrown);  }  }); 

После этого нам нужно написать метод для обработки этого запроса ajax и отправить результат обратно на вызов ajax.

Для обнаружения запроса ajax-запроса в wordpress у них есть два стандартных крючка, крючки — это просто события, например, когда я отправляю запрос ajax, связанный с ajax hook wordclose вызывает, и я могу вызывать любую функцию на этом триггере.

Таким образом, в основном для обработки запроса ajax ниже приведены два крючка:

• wp_ajax_ (действие): он обрабатывает запрос от пользователей, прошедших проверку подлинности/регистрации. (Используется для задач, связанных с домашней страницей wp-admin).
• wp_ajax_nopriv_ (действие): Он обрабатывает внешние аутентифицированные запросы. (Используется для задач, связанных с главной страницей/отправкой ajax-вызовов)

Здесь (действие) — это имя метода, которое вы должны закодировать в текущем файле темы function.php, и этот метод будет обрабатывать этот запрос ajax.

<сильные > Примеры:

Объектно-ориентированный стиль:

add_action( 'wp_ajax_cleanResponseFiles', array($this, 'cleanResponseFiles')); add_action( 'wp_ajax_nopriv_cleanResponseFiles', array($this, 'cleanResponseFiles')); 

Примечание. Здесь «cleanResponseFiles» — это метод класса, который будет обрабатывать запрос ajax. и $это указывает текущий объект класса.

Процедурный стиль:

add_action( 'wp_ajax_cleanResponseFiles', 'cleanResponseFiles'); add_action( 'wp_ajax_nopriv_cleanResponseFiles','cleanResponseFiles'); 

Примечание. Здесь «cleanResponseFiles» добавляется функция в текущий файл theme.php темы, и он будет обрабатывать запрос ajax.

В этом мы рассматриваем, что запрос ajax может быть сделан либо из панели управления wp-admin, либо из front-end page/post.

Пример метода обработчика запроса ajax:

function cleanResponseFiles(){  echo "<pre>";  print_r($_POST);  echo "</pre>";   //Always use exit() in ajax request handler function end  exit(); } 

Правило большого пальца:

• Всегда используйте метод exit() в методе обработчика запроса ajax, это важно.
• Лучшей практикой отправки запроса ajax является использование WordPress_nonce.

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

Это методы, которые мы можем использовать для создания Wordcepress nonce и проверки обработчика запроса WordPress nonce и ajax или простого обработчика HTTP-запросов.

Методы WordPress Nonce:

• wp_create_nonce: используется для создания случайного ключа для отправки в виде скрытого поля.
• wp_verify_nonce: используется для проверки случайного ключа в методе обработчика запросов.

В этом комментарии я приложу рабочий пример wordpress ajax call ASAP.

qaru.site

Зачем использовать AJAX?

Наиболее распространенное использование AJAX связано с формами – проверка, если берется имя пользователя, или заполнение остальной части формы с различными вопросами в зависимости от конкретного задания, который вы даете. В принципе, вы можете используете AJAX, когда вы хотите событие (как пользователь, нажав что – то, или ввести что – то), привязанную к действию на стороне сервера, которое происходит в фоновом режиме.

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

Обзор: Как использовать AJAX в WordPress

1. Измените свой собственный шаблон, чтобы включить форму или события JavaScript, которые будут представлять данные с помощью JQuery AJAX для admin-ajax.php включая любые данные, которые вы хотите передать. Убедитесь, что Jquery загружается.
2. Определим функцию в вашей темы function.php.
3. Добавим действие крюк AJAX для вашей функции.

Создание формы

Давайте начнем с создания простой формы на переднем конце для ввода новых данных о клиенте. В этом нет ничего сложного, просто вставьте этот код в теле html файла, код выполняет проверку is_user_logged_in ():

if (is_user_logged_in()):?>  <form type="post" action="" id="newCustomerForm">  <label for="name">Имя:</label> <input name="name" type="text" />  <label for="email">Почта:</label> <input name="email" type="text" />  <label for="phone">Телефон:</label> <input name="phone" type="text" />  <label for="address">Адрес:</label> <input name="address" type="text" />  <input type="hidden" name="action" value="addCustomer"/> <input type="submit"> </form> <br/><br/> <div id="feedback"></div> <br/><br/>

Единственное, что может выглядеть странным, что есть использование поля ввода скрытого под названием action – оно содержит имя функции, которое мы будем инициировать через AJAX.

PHP приемник

Затем откройте functions.php и добавьте следующую строку, чтобы убедиться, что Jquery загружается на вашем сайте:

wp_enqueue_script ( 'JQuery');

 

Базовая структура для написания вызова AJAX выглядит следующим образом:

function myFunction(){ //do something die(); } add_action('wp_ajax_myFunction', 'myFunction'); add_action('wp_ajax_nopriv_myFunction', 'myFunction');

 

Эти две последних строки крючки действия, которые говорят WordPress «У меня есть функция под названием myFunction, и я хочу, чтобы вы послушали ее, потому что она будет вызываться через интерфейс AJAX» – первый для пользователей уровня администратора, в то время как wp_ajax_nopriv_ является для пользователей, которые не вошли в систему. Вот полный код в functions.php, который мы будем использовать, чтобы вставить данные в специальной таблицы клиентов, которые мы объясним коротко:

wp_enqueue_script('jquery');  function addCustomer(){  global $wpdb;  $name = $_POST['name']; $phone = $_POST['phone']; $email = $_POST['email']; $address = $_POST['address'];  if($wpdb->insert('customers',array( 'name'=>$name, 'email'=>$email, 'address'=>$address, 'phone'=>$phone ))===FALSE){  echo "Ошибка";  } else { echo "Customer '".$name. "' успешно добавлено, строка ID = ".$wpdb->insert_id;  } die(); } add_action('wp_ajax_addCustomer', 'addCustomer'); add_action('wp_ajax_nopriv_addCustomer', 'addCustomer'); // на самом деле не нужна

 

Так же, как и прежде, мы объявили global $wpdb, чтобы дать нам прямой доступ к базе данных. Мы затем захватываем переменную POST, которая содержат данные формы. Окруженный в операторе IF функцию $ wpdb-> insert, мы используем для вставки данных в нашу таблицу. Поскольку WordPress предоставляет специальные функции для вставки регулярных постов и мета – данных, метод $ wpdb-> insert обычно используется только для пользовательских таблиц. Вы можете прочитать об этом на Кодексе, но в основном это принимает имя таблицы, которая будет вставлена, а затем с помощью array из column/value pairs.

=== FALSE проверяет, не удалась ли функция вставки, и если да, то он выдает “ошибка“. Если нет, то мы просто посылаем сообщение пользователю, что был добавлен Клиент X, и показываем переменную $wpdb-> insert_id, которая указывает на переменную auto-increment последней операции вставки, что произошло (предполагается, что вы установили поля, которые автоматически приращиваються, как идентификатор) .

И, наконец, die() переопределяет по умолчанию die(0), предоставленную WordPress – это не важно, как таковой, но без нее вы собираетесь получить 0 к концу, что бы отправить обратно в шаблон.

Javascript

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

jQuery.ajax({  type:"POST",  url: "/wp-admin/admin-ajax.php", // наш обработчик файла PHP  data: "myDataString",  success:function(results){  // что-то делать с возвращаемыми данными  }  )};

 

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

<script type="text/javascript"> jQuery('#newCustomerForm').submit(ajaxSubmit);  function ajaxSubmit(){  var newCustomerForm = jQuery(this).serialize();  jQuery.ajax({ type:"POST", url: "/wp-admin/admin-ajax.php", data: newCustomerForm, success:function(data){ jQuery("#feedback").html(data); } });  return false; } </script>

 

В первой строке мы прикрепили функцию ajaxSubmit формы, которую мы сделали раньше – так что, когда пользователь нажимает кнопку отправить, он проходит через нашу специальную функцию AJAX. Без этого наша форма ничего не будет делать. В нашей функции ajaxSubmit(), первое, что мы сделаем, чтобы serialize() форму. Это просто принимает все значения формы, и превращает их в одну длинную строку, которую наш PHP будет разобрать позже. Если все работает правильно, мы поместим возвращаемые данные в div с идентификатором обратной связи.

Вот и все. Сохраните все, обновите и попробуйте отправить некоторые данные формы.

Что нужно иметь в виду

Безопасность : Этот код не является производством готового и предназначен только для целей обучения. Мы оставили одну ключевую точку, это использование WP-nonce – разовый код, сгенерированный WordPress, который обеспечивает запрос AJAX, откуда он был призван; Ключ доступа. Без этого ваша функция эффективно может быть использована для вставки случайных данных. Атаки инъекции SQL не проблема, хотя, потому что мы перенаправили запросы через WordPress функцию $wpdb->insert – WordPress, которая очищает любые входы для вас и делает их безопасными.

Обновление таблицы клиентов: На данный момент мы только отправили обратно сообщение с подтверждением, но таблица клиентов не обновляется – вы будете видеть только дополнительные записи, если вы обновите страницу (такой вид теряет смысл, если делать это все через AJAX). Смотрите, если вы можете сделать новую функцию AJAX, которая может динамически выводить таблицу.

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

andreyex.ru