Создание плагина Добавление в Избранное. Урок 5

Создание плагина Добавление в Избранное

От автора: в этом уроке мы продолжим создание плагина «Добавление в Избранное». В частности, мы доработаем AJAX-запрос, добавив проверку подлинности запроса, а также реализуем индикатор запроса в клиентской части сайта, добавив анимацию.

автор

Автор: Андрей Кудлай

Зовут меня Андрей Кудлай. Родом я из Украины, живу в Днепропетровске. Веб-программированию учился сам. Неплохо знаю HTML, CSS, PHP, JavaScript.

скачать исходникискачать урок

Начнем с добавления анимации, которая даст понять пользователю, что его запрос обрабатывается. Этим мы достигнем сразу 2 цели: во-первых, пользователь будет видеть, что его запрос обрабатывается, и во-вторых, это не даст нажать ему на ссылку повторно, поскольку вместо ссылки мы как раз и будем показывать анимацию.

Итак, в функции wfm_favorites_content() добавим вывод анимационной картинки рядом со ссылкой:

Бесплатный курс «Основы создания тем WordPress»

Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц

Скачать курс

Теперь скроем эту картинку в wfm-favorites-style.css:

В запросе AJAX добавим опцию beforeSend, в которой опишем скрытие ссылки и показ анимации:

Также изменим функцию в параметре success, скрывая анимацию и показывая результат запроса:

Бесплатный курс «Основы создания тем WordPress»

Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц

Скачать курс

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

Теперь добавим проверку безопасности к запросу. Для этого воспользуемся функцией WordPress wp_create_nonce() для генерирования проверочного кода и функцией wp_verify_nonce() для проверки кода.

В функции wfm_favorites_scripts() добавим генерирования кода, который будем использовать в параметрах запроса. Также сразу передадим ID поста, который будет добавляться в избранное — для этого обратимся к свойству ID объекта $post:

Теперь в объекте wfm-favorites доступно два новых свойства: nonce и postId. Передадим их в запросе. Итоговый вид запроса будет таким:

Осталось внести правки в функцию, принимающую запрос:

На этом текущий урок завершен. Удачи и до новых встреч!

Бесплатный курс «Основы создания тем WordPress»

Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц

Скачать курс

Основы создания тем WordPress

Научитесь создавать мультиязычные темы с нестандартной структурой страниц

Смотреть

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий