Popovses blog

Личный блог

Работа с AJAX в WordPress

13.04.2014

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

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 — крутая штука, используйте её чаще, делайте свои сайты интерактивнее. Если есть вопросы — отвечу в комментариях или по почте.

Теги:

5 комментариев:

  • Сергей:

    Добрый день! На этой страничке http://zukori.ru/katalog/snyat хочу сделать сортировку на ajax, прочитал вашу статью не могу понять как мне это все переделать под себя.
    Мне необходимо чтобы пользователь мог сортировать записи одновременно по названию и и площади, или по площади и цене.

    Не могли бы вы написать статью на данную тему?

    • Popovses:

      К сожалению, нет времени на статьи такого типа.
      Но суть такая же:

      1. У вас есть javascript, который посылает ajax запросы на сервер;
      2. На сервере есть код, который выполняет различные сортировки через WP_Query;
      3. Связываем запросы из javascript с сортировкой с помощью хуков «wp_ajax_», «wp_ajax_nopriv_».
  • Юлия:

    Добрый день.
    Нашла полезную информацию для себя.
    Очень не хватает кнопок соц сетей под постами, чтобы сохранить статью у себя на странице в соцсети.
    В Закладки складывать не удобно — работаю с разных ноутов. А иметь полезную информацию под рукой иногда очень нужно.

    Маленькое пожелание на будущее — кнопки соцсетей под записями

    • Popovses:

      Добрый день. Спасибо за отзыв. Постараюсь в скором времени добавить кнопки соц сетей.

  • Цифровой:

    Спасибо большое! Вроде все понятно, постараюсь теперь реализовать на деле

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