Как посчитать и встроить количество просмотров в WordPress

Удивительно, я думал что можно отображать количество просмотров вот таким образом в WordPress нажатием нескольких клавиш в меню.

как я себе это представлял

как я себе это представлял

Оказывается всё не так просто! Далее подробная инструкция как посчитать количество просмотров страницы и встроить это как можно более нативно в тему twenty fourteen.

Немного вводных о проблеме подсчёта просмотров

В WordPress существует достаточное количество плагинов, которые позволяют считать просмотры страниц/записей, учитывать или не учитывать поисковых ботов, пользователей и много всего другого, но популярны и всегда можно найти актуальную версию всего нескольких из них. Для того, чтобы объяснить почему я отказался от их использования, приведу краткий их обзор.

wp-postviews

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

wp-postviews-plus

Менее ста тысяч скачиваний. Плагин позиционирующий себя как расширенная версия wp-postviews, дополнительно считает статистику по браузерам, IP и другим данным. Для меня небольшая проблема лишь в том, что описание на иероглифах, вероятнее всего, на китайском.

簡介

這是 WP-PostViews 的強化版本。讓你的瀏覽數可以區分使用者或機器人。

Если вы понимаете что тут написано и вам нужно на плагин возложить функции статистики, то плагин может вам подойти. Шучу, сам плагин, конечно, написан на php и снабжен достаточным количеством комментариев разработчика Richer Yang на английском.

Почему я отказался от плагинов

  1. Не нужен лишний функционал предлагаемый плагинами, который хоть и не значительно, но требует ресурсы сервера
  2. Не нужно следить за совместимостью при обновлении плагина/системы WP
  3. Плагин не даёт конечного результата, т.е. сам не встраивается и не начинает отображать количество записей в нужном виде, всё равно приходится лезть в код и работать с php

Я выбрал наиболее понятный и простой метод реализации функции подробно рассмотренный авторитетным специалистом в WordPress Kama в его блоге.

/* Подсчет количества посещений страниц
Автор:http://wp-kama.ru/id_55/schitaem-kolichestvo-posescheniy-stranits-na-wordpress.html 

---------------------------------------------------------- */
add_action('wp_head', 'twentyfourteen_postviews');
function twentyfourteen_postviews() {

/* ------------ Настройки -------------- */
$meta_key		= 'views';	// Ключ мета поля, куда будет записываться количество просмотров.
$who_count 		= 1; 		// Чьи посещения считать? 0 - Всех. 1 - Только гостей. 2 - Только зарегистрированых пользователей.
$exclude_bots 		= 1;		// Исключить ботов, роботов, пауков и прочую нечесть :)? 0 - нет, пусть тоже считаются. 1 - да, исключить из подсчета.
/* ------------/Настройки -------------- */

	global $user_ID, $post;
	if(is_singular()) {
		$id = (int)$post->ID;
		static $post_views = false;
		if($post_views) return true; // чтобы 1 раз за поток
		$post_views = (int)get_post_meta($id,$meta_key, true);
		$should_count = false;
		switch( (int)$who_count ) {
			case 0: $should_count = true;
				break;
			case 1:
				if( (int)$user_ID == 0 )
					$should_count = true;
				break;
			case 2:
				if( (int)$user_ID > 0 )
					$should_count = true;
				break;
		}
		if( (int)$exclude_bots==1 && $should_count ){
			$useragent = $_SERVER['HTTP_USER_AGENT'];
			$notbot = "Mozilla|Opera"; //Chrome|Safari|Firefox|Netscape - все равны Mozilla
			$bot = "Bot/|robot|Slurp/|yahoo"; //Яндекс иногда как Mozilla представляется
			if ( !preg_match("/$notbot/i", $useragent) || preg_match("!$bot!i", $useragent) )
				$should_count = false;
		}

		if($should_count)
			if( !update_post_meta($id, $meta_key, ($post_views+1)) ) add_post_meta($id, $meta_key, 1, true);
	}
	return true;
}

Важно что этот метод не пригоден для блогов у которых используется кэширование, в остальном метод очень прост: в информации о записи WordPress создаётся еще одно поле с именем $meta_key, в нашем случае views, которое изменяет свое значение как счётчик и хранит количество просмотров.
Но в этом разбираться не обязательно, вам нужно только вставить этот код в файл functions.php, лучше в конец, отредактировав значения переменных $who_count и $exclude_bots в зависимости от того, что вы собрались считать. Также имя функции twentyfourteen_postviews можете заменить на любое имя которое считаете подходящим.
Осталось самое сложное — вывести значение поля views в аккуратном формате в соответствие теме twenty fourteen.

Как встроить количество просмотров в twenty fourteen

К сожалению, предложенный автором метод вывода, работает только внутри loop(цикла) WordPress

Просмотров: <?php echo get_post_meta ($post->ID,'views',true); ?>

Этим конечно же можно воспользоваться вписав код в тело файла index.php темы WordPress.


	<?php
if ( have_posts() ) :
// Start the Loop.
while ( have_posts() ) : the_post();

/*
* Include the post format-specific template for the content. If you want to
* use this in a child theme, then include a file called called content-___.php
* (where ___ is the post format) and that will be used instead.
*/

/*
* Вписываем заветную строку вставки значений счётчика вот сюда
*/

echo "Просмотров:".get_post_meta ($post->ID,'views',true);

get_template_part( 'content', get_post_format() );

endwhile;
// Previous/next post navigation.
twentyfourteen_paging_nav();

else :
// If no content, include the "No posts found" template.
get_template_part( 'content', 'none' );

endif;
?>

Но в результате выглядеть это будет так, что лучше бы вы этого не делали:

вставка вывода просмортов в цикле

Вывод количества просмотров в цикле

Для правильного красивого встраивания в тему WordPress в нашем случае twenty fourteen, необходимо открыть файл в теме inc\template-tags.php и заменить код функции

function twentyfourteen_posted_on() {
if ( is_sticky() && is_home() && ! is_paged() ) {
echo '<span class="featured-post">' . __( 'Sticky', 'twentyfourteen' ) . '</span>';
}

$postcustom = get_post_custom();//получения массива с пользовательскими данными о записи
$views = $postcustom['views'][0];//значение views

// Set up and print post meta information.
printf( '<span class="entry-date"><a href="%1$s" rel="bookmark"><time class="entry-date" datetime="%2$s">%3$s</time></a></span> <span class="entry-views"><a href="%1$s"> %4$s</a></span> <span class="byline"><span class="author vcard"><a class="url fn n" href="%5$s" rel="author">%6$s</a></span></span>',
esc_url( get_permalink() ),
esc_attr( get_the_date( 'c' ) ),
esc_html( get_the_date() ),
$views,
esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
get_the_author()
); }

Стоит обратить внимание на то, что в функцию были добавлены строки получения значения переменной views способом отличным от предложенного выше. Также в html код был добавлен вывод $views с использованием нового класса css entry-views, названного по аналогии с уже имеющимся entry-date.
В итоге этих манипуляций можно наблюдать следующую картинку:

Вывод количества просмотров внутри функции форматирования

Вывод количества просмотров внутри функции форматирования

Прежде чем двинуться дальше — проверьте полученный результат.
Согласитесь, теперь количество просмотров находятся на своём месте, но и это еще не все: имеются проблемы с адаптивностью и не хватает значка в стиле WordPress.
Все значки используемые в теме twenty fourteen берутся из специального шрифта Genericons уже встроенного в тему twenty fourteen и использующегося для значков часов и комментариев. Выбираем на сайте шрифта Genericons нужный значок и нажимаем на него. Мне показался наиболее подходящим значок глаза. После нажатия значок появится в увеличенном виде слева вверху, нажимаем на ссылку copy CSS и перед нами появляется всплывающее окно из которого копируем UTF-8 код символа, в случае с глазом это \f403. Сохраняем этот код символа(значка), он нам пригодится в дальнейшем.

Последний штрих, заведение стиля entry-views в файл style.css вашей темы

...

/* Separators */

.site-content span + .entry-date:before,
.full-size-link:before,
.parent-post-link:before,
span + .byline:before,
span + .entry-views:before,
span + .comments-link:before,
span + .edit-link:before,
.widget_petukhovsky_ephemera .entry-title:after {
	content: "\0020\007c\0020";
}


...



.byline {
	display: none;
}

.single .byline,
.single .entry-views,
.group-blog .byline,
.group-blog .entry-views {
	display: inline;
}


...

@media screen and (min-width: 401px) {
	a.post-thumbnail:hover img {
		opacity: 0.85;
	}

	.full-size-link:before,
	.parent-post-link:before,
	.site-content span + .byline:before,
	.site-content span + .entry-views:before,
	.site-content span + .comments-link:before,
	.site-content span + .edit-link:before,
	.site-content span + .entry-date:before {
		content: "";
	}

	.attachment span.entry-date:before,
	.entry-content .edit-link a:before,
	.entry-meta .edit-link a:before,
	.site-content .byline a:before,
	.site-content .entry-views a:before,
	.site-content .comments-link a:before,
	.site-content .entry-date a:before,
	.site-content .featured-post:before,
	.site-content .full-size-link a:before,
	.site-content .parent-post-link a:before,
	.site-content .post-format a:before {
		-webkit-font-smoothing: antialiased;
		display: inline-block;
		font: normal 16px/1 Genericons;
		text-decoration: inherit;
		vertical-align: text-bottom;
	}


...

	.site-content .byline a:before {
		content: "\f304";
	}
	
	.site-content .entry-views a:before {
		content: "\f403"; /* код значка */
	}
		
	.site-content .comments-link a:before {
		content: "\f300";
		margin-right: 2px;
	}

...


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

Вывод количества просмотров с применением стилей

Вывод количества просмотров с применением стилей

Для чего показывать количество просмотров?

Это самый правильный вопрос с которого стоило начать и на который у меня до конца нет единственно верного ответа.
Очевидно, это нужно не для владельца блога, так как владелец сможет посмотреть всю статистику в таких замечательных системах как Yandex.metrika, Google.analytics и других.
Это нужно для того, чтобы гости могли определять степень востребованности той или иной записи помимо такого параметра как количество комментариев. Но и это утверждение следует проверить, что я и намереваюсь сделать.