Popovses blog

Личный блог

Счетчик просмотров страниц блога на AJAX. Часть 1

11.10.2015

Пришла в голову мысль поставить счетчик просмотров моих записей. Поставил. А теперь расскажу как это сделано.

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

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

Начнем с JavaScript

Кстати да, забыл сказать почему счетчик на ajax. Причина очень простая, если стоит плагин кеширования, то php код для подсчета количества просмотров работать не будет. Поэтому после быстрой загрузки странички из кеша, мы шлем асинхронно, незаметно для посетителя запрос на сайт и увеличиваем счетчик просмотров.

Я люблю и использую jQuery, поэтому ajax запросы будем отправлять с помощью него (или нее 🙂 ). В самом простом варианте, как у меня, нам нужно отправить id страницы, чтобы наша мини программка увеличила значение счетчика именно для нужной записи. Поэтому я в теле страницы вывел javascript переменную с необходимым id. Для этого в шаблоне записей и страниц (single.php и page.php) пишем такой код:

Его нужно вставить в цикле вывода контента между while (have_posts()) и endwhile;. Например, если single.php выглядит примерно так:

То кусочек js нужно вставить здесь:

Например:

var send_pid_view — это и есть наша javascript переменная (ее можно назвать как угодно), а <?php the_ID(); ?> — php функция, которая выводит id текущего поста.

Если нужно получить в переменную, но не выводить id, то для этого есть фунцкия WordPress get_the_ID().

Теперь напишем js код, который будет отправлять запросы. У вас есть какой-то .js файл со своими скриптиками, например script.js? Если есть, то пишем в нем, если нет — создаем в папке шаблона папку js и в ней создаем файл script.js. Пишем в него:

Давайте разберем подробнее, что мы написали.

Конструкция

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

Дальше идет проверка

Здесь мы проверяем, грубо говоря, есть ли у нас переменная send_pid_view. Если ее вдруг нет, то мы не выполняем код дальше, то есть не отправляем ajax запрос. Кстати, обратите внимание, переменную var send_pid_view мы вставили только в single.php и page.php, поэтому на главной странице, на страницах категорий, тегов и т.д. ajax запрос отправлен не будет, так как переменной var send_pid_view на них нет.

А дальше идет наш AJAX запрос. На данный момент, мы только отправляем +1 к просмотру на сайт, поэтому после того как сервер ответит, не нужно что либо делать.

Подробнее, с комментариями в коде:

Вообще мы можем передать любое количество параметров, например:

Теперь PHP

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

Для какого-то нашего дополнительного кода в шаблоне есть файл functions.php. Открываем его и до закрывающего тега ?> вставляем код:

Для Ajax запросов в WordPress есть специальный хук wp_ajax_ и wp_ajax_nopriv_. Разница между ними в том, что первый будет выполняться тогда, когда ajax запрос отправляется от залогиненого пользователя, а второй — для всех остальных посетителей сайта. Так вот, в строке wp_ajax_post_view_set
post_view_set — это имя для нашего ajax запроса. Помните, в js коде мы отправляем параметр action: ‘post_view_set’ ? Вот это оно.

dds_post_view_set — название нашей php функции, которая будет выполнена при ajax запросе.

Подробнее:

Теперь давайте попробуем наш код в работе. Для этого нужно подключить созданный файл script.js. Если вы не создавали новый файл, а писали в своем, то подключать нового не нужно, но полезно будет прочитать следующее.

Самое главное, не пишите в файле header.php ссылку на созданный файл script.js вручную. Так делать не нужно и даже вредно. Об этой и подобных ошибках я еще напишу в следующих статьях (кстати, можете подписаться на обновления блога).

Для того, чтобы подключить script.js идем в functions.php и вставляем такой код:

Давайте разберем подробнее.

popovses_js — название нашего скрипта, лучше замените на что-то свое. Назовите как-то уникально, чтобы плагины, подключая свои скрипты, не перезаписали ваш.

get_stylesheet_directory_uri() — функция выводит ссылку на папку с шаблоном

array( ‘jquery’ ) — говорит нам о том, что для работы скрипта нужно чтобы WordPress автоматически подключил jQuery.

С комментариями:

Этот код подключит наш скрипт и выведет в html специальный объект с настройками для скрипта, в моем случае PJS. Из этого места и берется ajax ссылка url: PJS.ajax_url.

Через консоль браузера можно проверить, отправляются ли запросы:

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

После нашего кода в functions.php вставляем следующее:

Я уже немного устал, поэтому детально комментировать приведенный выше код не буду. Скажу только, что в массиве $dds_post_types_for_views
post’,
‘page’
Означает выводим информацию о просмотрах для записей из блога и для страниц. У меня это выглядит так:

Отмеченная колонка Views — это и есть просмотры страниц.

На этом все. Если что-то не ясно, задавайте вопросы в комментариях или на почту — постараюсь сразу ответить или допишу статью. А в будущем напишу вторую часть, в которой мы немного изменим приведенный js и выведем количество просмотров уже на самих страницах блога. Кстати, пока писал, пришла идея сделать это отдельным плагином. В общем, если интересно, подписывайте на обновления блога, пишите свои комментарии, делитесь статьей в социальных сетях. Спасибо 🙂

photo credit: brass bingo counters via photopin (license)

Теги: ,

4 комментария:

  • EEM:

    Здравствуйте,

    Как вывести число просмотров на страниц статьей ?

  • EEM:

    Добавил такой код: echo get_post_meta ($post->ID,’_views_count’,true); ?>

  • Popovses:

    О том, как выводить число просмотров на страницах сайта я расскажу во второй части.

  • артур:

    все вокруг да около. а сути нет.
    я отправил запрос. функция обработала его. мне нужно получить результат. читаю 2 статью на вашем сайте ..об этом нечего не написано . зря потратил время((((

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