Popovses blog

Личный блог

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

11.10.2015
Категория: Разработка под WordPress

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

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

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

Начнем с JavaScript

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

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

PHP
1
2
3
<script>
    var send_pid_view = <?php the_ID(); ?>;
</script>

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

PHP
1
2
3
4
5
6
7
8
9
10
11
12
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 
//какой-то html,php код...
 
<?php
comments_template();
?>
 
<?php endwhile; endif; ?>
<?php get_footer(); ?>

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

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
//Начиная с этого места
 
//какой-то html,php код...
 
<?php
comments_template();
?>
 
//И до этого
<?php endwhile; endif; ?>
<?php get_footer(); ?>

Например:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
//Начиная с этого места
 
//какой-то html,php код...
<script>
var send_pid_view = <?php the_ID(); ?>;
</script>
<?php
comments_template();
?>
 
//И до этого
<?php endwhile; endif; ?>
<?php get_footer(); ?>

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

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

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

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//отправляем +1 к просмотру страницы
jQuery(document).ready(function($){
 
    if ( typeof( send_pid_view ) === 'undefined' ) {
        return;
    }
 
    $.ajax({
        url: PJS.ajax_url,
        type: 'POST',
        data: {
            action: 'post_view_set',
            pid: send_pid_view
        }
    });
});

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

Конструкция

JavaScript
1
2
3
jQuery(document).ready(function($){
 
});

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

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

JavaScript
1
2
3
if ( typeof( send_pid_view ) === 'undefined' ) {
    return;
}

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

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

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

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$.ajax({
    //url - ссылка, на которую мы делаем запрос
    //что такое PJS.ajax_url я расскажу ниже в статье
    url: PJS.ajax_url,
    //type - здесь пишем тип запроса, например GET или POST
    type: 'POST',
    //data - здесь пишем параметры запроса
    //например, для GET запроса оно переформатируется в
    // http://наша_ссылка?action=post_view_set&pid=4
    //где 4 это id страницы, который хранится в переменной send_pid_view
    //4 - первое число, что пришло в голову для примера
    data: {
        //action - название нашего ajax хука для WordPress, об этом ниже
        action: 'post_view_set',
        //pid - здесь передаем id, который хранится в переменной send_pid_view
        pid: send_pid_view
    }
});

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

JavaScript
1
2
3
4
5
6
7
8
9
10
11
$.ajax({
    url: PJS.ajax_url,
    type: 'POST',
    data: {
        action: 'post_view_set',
        pid: send_pid_view,
        par1: value1,
        par2: value2
        //и т.д..
    }
});

Теперь PHP

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

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

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/**
* =============
* Просмотры для записей/страниц
* =============
*/
 
/**
* Запись в базу данных
*/
function dds_post_view_set()
{
    $p_id = absint( $_POST['pid'] );
    $views_count = get_post_meta( $p_id, '_views_count', true );
    $views_count++;
    update_post_meta( $p_id, '_views_count', $views_count );
    exit; //чтобы в ответ не попало ничего лишнего
}
 
add_action('wp_ajax_post_view_set', 'dds_post_view_set');
add_action('wp_ajax_nopriv_post_view_set', 'dds_post_view_set');

Для 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 запросе.

Подробнее:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
function dds_post_view_set()
{
    //в переменной $_POST['pid'] мы получаем id страницы,
    //который до этого был отправлен из js переменной send_pid_view
    $p_id = absint( $_POST['pid'] );
    //получаем из базы данных количество просмотров для указанной в id записи
    $views_count = get_post_meta( $p_id, '_views_count', true );
    //увеличиваем счетчик на 1
    $views_count++;
    //обновляем в базе данных количество просмотров
    update_post_meta( $p_id, '_views_count', $views_count );
    exit; //чтобы в ответ не попало ничего лишнего
}

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

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

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

PHP
1
2
3
4
5
6
7
8
9
10
11
/**
* Подключаем скрипты
*/
add_action( 'wp_enqueue_scripts', function(){
 
    wp_enqueue_script( 'popovses_js', get_stylesheet_directory_uri() . '/js/script.js', array( 'jquery' ), '1.0' );
    wp_localize_script( 'popovses_js', 'PJS', array(
            'ajax_url' => admin_url( 'admin-ajax.php' ),
        )
    );
});

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

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

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

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

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

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
//функция wp_enqueue_script подключает js файл
//вообще правильнее было бы сначала записать это в функции wp_register_script()
//но можно и так
wp_enqueue_script( 'popovses_js', get_stylesheet_directory_uri() . '/js/script.js', array( 'jquery' ), '1.0' );
//функция wp_localize_script задает настройки для нашего js скрипта
//обратите внимание, что имя 'popovses_js' у них одинаковое.
//PJS - объект js с настройками для нашего скрипта. Лучше дайте ему уникальное название.
//в массиве в ajax_url функция admin_url( 'admin-ajax.php' )
//передает специальную ссылку для ajax запросов.
wp_localize_script( 'popovses_js', 'PJS', array(
        'ajax_url' => admin_url( 'admin-ajax.php' ),
    )
);

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

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

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

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

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/**
* Отображение количества просмотров в админке
*/
$dds_post_types_for_views = array(
    'post',
    'page'
);
 
foreach ( $dds_post_types_for_views as $dds_post_type ) {  
    add_filter( 'manage_' . $dds_post_type . '_posts_columns', 'dds_add_post_views_column_header' );
    add_action( 'manage_' . $dds_post_type . '_posts_custom_column', 'dds_add_post_views_column', 10, 2 );
}
 
/**
* Добавляем новую колонку (заголовок)
*/
function dds_add_post_views_column_header( $columns )
{
    $columns['post_views_count'] = 'Views';    
    return $columns;
}
 
/**
* Добавляем новую колонку (контент)
*/
function dds_add_post_views_column( $column_name, $p_id )
{
    if ( $column_name === 'post_views_count' ) {        
        echo get_post_meta( $p_id, '_views_count', true );
    }  
}

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

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

—

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

photo credit: brass bingo counters via photopin (license)

Теги: ,

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

  • EEM:
    29.08.2016 в 06:59

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

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

    Ответить
  • EEM:
    29.08.2016 в 07:18

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

    Ответить
  • Popovses:
    15.01.2017 в 01:59

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

    Ответить
  • артур:
    30.09.2017 в 07:06

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

    Ответить

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