Добавляем вывод количества просмотров записи из Jetpack Stats

Всем привет! У каждой записи в моем блоге есть метаинформация, где присутствует цифра с глазиком — это общее количество просмотров записи. Получается эта информация из плагина Jetpack. Сначала использовал специальный плагин, который вытаскивает эту информацию самостоятельно, потом, подсмотрев как он работает, решил сделать это сам. Получилось не сразу. Рассказываю как всё было.

Попытка №1 — решение в лоб с кешированием

Получение количества просмотров работает чрезвычайно медленно. Например, некоторые мои страницы при работе напрямую с плагином загружались аж ПЯТЬДЕСЯТ ТРИ (!!!) секунды. Поэтому в один прекрасный день я выключил этот функционал. Код был такой (functions.php), не используйте его, он здесь только для истории:

# Используем класс WPCOM_Stats из Jetpack
use Automattic\Jetpack\Stats\WPCOM_Stats;

# Метод получения количества просмотров с кэшированием
function get_post_views($post_id) {
  # Ключ кэша "wp_cached_counter_номер_поста"
  $cache_key = 'wp_cached_counter_' . $post_id;

  # Получим значение кэша по ключу
  $counter = get_transient($cache_key);

  # Если значения нет, значит создадим
  if (false == $counter) {
    # Объект класса для работы со статистикой Jetpack
    $wp_stats = new WPCOM_Stats();

    # Получим статистику просмотров для $post_id и преобразуем её в объект (тут может пройти до ДЕСЯТИ секунд)
    $stats = $wp_stats->convert_stats_array_to_object($wp_stats->get_post_views($post_id));

    # Количество просмотров
    $counter = intval($stats->views);

    # Сохраним в кэше на час
    set_transient($cache_key, $counter, HOUR_IN_SECONDS);
  }

  return $counter;
}

# Печатаем количество просмотров поста
function print_view_counter() {
  # Получим значение
  $counter = get_post_views(get_the_ID());

  # Нулевые счётчики не выводим
  if ($counter) {
    return;
  }

  # Если больше тысячи, выведем количество тысяч с суффиксом K. То есть вместо 6404 будет 6K
  if (intval($counter) > 1000) {
    printf('<span class="view" title="%s">%sK</span>', $counter, intdiv($counter, 1000));
  }
  else {
    printf('<span class="view">%s</span>', $counter);
  }
}

Затем вставляем в любом месте темы код:

<?php print_view_counter(); ?>

и получаем цифру просмотров.

Спустя какое-то время я увидел, что страницы грузятся безбожно долго, особенно страницы с категориями или тегами. Некоторые грузились по минуте, потому что запрос количества просмотров идёт с сайта stats.wp.com и иногда доходит до ДЕСЯТИ СЕКУНД на запрос.

Попытка №2 — использование WPCron без кеширования

В итоге я решил запускать обновление счётчиков периодически по крону, записывать/получать их значения с помощью update_post_meta и get_post_meta соответственно в поле _post_counter. В моём самописном плагине я ежедневно обновляю информацию:

# Используем Jetpack WPCOM_Stats
use Automattic\Jetpack\Stats\WPCOM_Stats;

# Метод получения счётчика без кеширования, возвращает цифру
function b2k_get_post_counter($wp_stats, $post_id) {
  $stats = $wp_stats->convert_stats_array_to_object($wp_stats->get_post_views($post_id));
  return intval($stats->views);
}

# Обновление счётчиков у всех страниц в блоге
function b2k_update_all_counters() {
  $posts = get_posts(
    array(
      'post_type' => 'any',
      'posts_per_page' => -1,
      'post_status' => 'publish'
    )
  );

  # Создадим один раз объект для запроса статистики
  $wp_stats = new WPCOM_Stats();

  # Для каждой страницы
  foreach ($posts as $post) {
    # Запрашиваем счётчик
    $counter = b2k_get_post_counter($wp_stats, $post->ID);
    # Записываем его в мета поле с именем _post_counter каждой странице
    update_post_meta($post->ID, '_post_counter', $counter);
  }
}
# Создаём событие b2k_update_counters_event
add_action('b2k_update_counters_event', 'b2k_update_all_counters');

# Во время активации плагина
function b2k_cron_activation() {
  # Убираем хук b2k_update_counters_event
  wp_clear_scheduled_hook('b2k_update_counters_event');
  # Добавляем ежедневный запуск события b2k_update_counters_event
  wp_schedule_event(time(), 'daily', 'b2k_update_counters_event');
}
register_activation_hook(__FILE__, 'b2k_cron_activation');

# Во время деактивации плагина
function b2k_cron_deactivation() {
  # Удаляем хук
  wp_clear_scheduled_hook('b2k_update_counters_event');
}
register_deactivation_hook(__FILE__, 'b2k_cron_deactivation');

В теме я просто получаю значение поля:

function print_view_counter() {
  # Получить значение мета поля _post_counter, всегда строка
  $counter = get_post_meta($post_id, "_post_counter", true);
  # Если счётчика нет, значит ноль
  if (!$counter) {
    $counter = 0;
  }
  else {
    # Иначе нам нужна цифра
    $counter = intval($counter);
  }

  # Если больше тысячи, выведем количество тысяч с суффиксом K. То есть вместо 6404 будет 6K
  if ($counter > 1000) {
    printf('<span class="view" title="%s">%sK</span>', $counter, intdiv($counter, 1000));
  }
  else {
    printf('<span class="view">%s</span>', $counter);
  }
}

В вычислении скорости загрузи меня выручил плагин Query Monitor. Для работы кода обязателен плагин Jetpack с включенным модулем Stats. Для первоначальной установки Cron события необходимо выключить и включить плагин.

Настройка title для каждой страницы сайта на WordPress без плагинов

Просто добавьте этот код в functions.php вашей темы:

function your_document_title($title) {
  $sep = ' | ';
  $array = [];
  $term = get_queried_object();

  global $page;

  if (is_singular()) {
    if ($page) {
      array_push($array, 'Часть '.intval($page));
    }
    array_push($array, get_the_title($term));
  }
  else if (is_paged()) {
    array_push($array, 'Страница ' . intval(get_query_var('paged')));
  }

 if (is_search()) {
    array_push($array, 'Результат поиска по запросу "'.esc_html($_GET['s'].'"'));
  }
  else if (is_category($term)) {
    array_push($array, 'Категория "' . $term->name . '"');
  }
  else if (is_tag($term)) {
    array_push($array, 'Метка "' . $term->name . '"');
  }

  array_push($array, get_bloginfo('name'));

  if (is_front_page() && !is_paged()) {
    array_push($array, get_bloginfo('description'));
  }

  return implode($sep, $array);
}
add_filter('document_title', 'your_document_title');

Эти строчки добавляют фильтр к методу document_title.
Для каждого заголовка страницы WordPress вызывает наш код следующим образом:

$title = your_document_title(default_title());

Правила такие:

  • для одиночных постов — «Название поста»
  • для страницы категории выводится — Категория «Название»
  • для страницы тега выводится — Метка «Название»
  • для главной страницы «Название сайта | Описание сайта»
  • для постов разбитых на части добавляется «Часть N» в начале
  • для страница поиска типа /s=QUERY «Результат поиска QUERY»
  • для страниц пагинации типа /page/N добавляется «Страница N» в начале
  • для всех страниц добавляется информация из поля Настройки->Общие->Название сайта
  • для всех страниц, кроме главной и страниц пагинаций, в конце добавляется информация из поля «Настройки->Общие->Краткое описание»

Добавляем мета тег canonical к каждой странице сайта на WordPress без плагинов

Всем привет! Чтобы добавить запись типа meta rel="canonical" href="url" к каждой странице вашего сайта на WordPress, добавьте этот код в functions.php вашей темы:

function remove_args($url) {
  $parsed = parse_url($url);

  $fragment = '';

  if (array_key_exists('fragment', $parsed)) {
    $fragment = '#' . $parsed['fragment'];
  }

  return sprintf("%s://%s%s%s",
    $parsed['scheme'],
    $parsed['host'],
    $parsed['path'] ?? '',
    $fragment);
}


function print_canonical_link() {
  $url = "";

  // Одиночная страница
  if (is_single()) {
    global $page;
    // Пост из нескольких частей
    if ($page) {
      $url = get_pagenum_link($page);
    }
    else {
      $url = get_permalink();
    }
  }
  // Страница пагинации типа что-то-там/page/N
  else if (is_paged()) {
    $url = get_pagenum_link(get_query_var('paged'));
  }
  // Главная страница сайта
  else if(is_front_page()) {
    $url = get_home_url();
  }
  // Страницы категории или тега
  else if(is_category() || is_tag()) {
    $url = get_term_link(get_queried_object());
  }

  if ($url) {
    echo '<link rel="canonical" href="'.remove_args($url).'" />';
  }
}
add_action('wp_head', 'print_canonical_link');

Подробности для непосвящённых: функция print_canonical_link() выводит запись вида
<meta rel="canonical" href="url" /> во время вызова штатной функции wp_head(), что очень уважают поисковые системы, но это неточно. А функция remove_args() удаляет GET аргументы вида «?key=value» из URL. Критика, замечания, пожелания приветствуются.

Загрузка разных счётчиков с помощью jQuery.getScript() без плагинов WordPress

Всем привет! Иногда бывает, что счётчики Google Analytics, Яндекс.Метрика и счётчик mail.ru тормозят загрузку основной страницы. Написал js скрипт для того, чтобы это избежать.

jQuery(document).ready(function($) {
    $.ajaxSetup({cache : true});

    // Данные для Google Analytics
    window.dataLayer = [];
    window.gtag = function() {
        window.dataLayer.push(arguments);
    }

    $.getScript(
        // !! ОБЯЗАТЕЛЬНО ЗАМЕНИТЕ ИДЕНТИФИКАТОР GOOGLE ANALYTICS "G-41BWRDZLG5" НА СВОЙ !!
        'https://www.googletagmanager.com/gtag/js?id=G-41BWRDZLG5',
        function() {
            gtag('js', new Date());
            gtag('config', 'G-41BWRDZLG5');
        }
    );

    // Данные для Яндекс.Метрики
    window.ym = function() { (window.ym.a||[]).push(arguments); }
    window.ym.l = 1*new Date();

    $.getScript(
        'https://mc.yandex.ru/metrika/tag.js',
        function() {
            // !! ОБЯЗАТЕЛЬНО ЗАМЕНИТЕ ИДЕНТИФИКАТОР ЯНДЕКС МЕТРИКИ "91531653" НА СВОЙ !!
            ym(91531653, "init", {
                    webvisor:true,
                    trackLinks:true,
                    clickmap:true,
                    accurateTrackBounce:false
                }
            );
        }
    );

    // Данные для top.mail.ru
    var _tmr = window._tmr || (window._tmr = []);
    _tmr.push({
        // !! ОБЯЗАТЕЛЬНО  ЗАМЕНИТЕ ИДЕНТИФИКАТОР MAIL.RU "2601331" НА СВОЙ !!
        id: "2601331",
        type: "pageView",
        start: (new Date()).getTime()
    });

    $.getScript('//top-fwz1.mail.ru/js/code.js');
});

Известная бага счётчика Яндекс.Метрика — замедление сайта, поэтому скачал его локально в папку [wordpress_folder]/metrika и добавил в задачу в crontab для обновления этого файла каждый час, Затем заменил https://mc.yandex.ru/metrika/tag.js в скрипте выше на /metrika_tag.js.

@hourly curl -s https://mc.yandex.ru/metrika/tag.js -o [wordpress_folder]/metrika_tag.js

Источник вдохновения статья Yandex Metrika: Сторонний код заблокировал основной поток. Не забудьте поменять идентификаторы счётчиков и проверить, что tag.js доступен по адресу [ваш сайт]/metrika/tag.js, если вы решили воспользоваться ускорением загрузки счётчика.

Чтобы добавить загрузку счётчиков в WordPress, необходимо положить его содержимое в файлик wordpress/wp-content/themes/[ваша_тема]/js/counters.js и добавить следующий код в wordpress/wp-content/themes/[ваша_тема]/functions.php:

functions.php (для всех пользователей)

function enqueue_counter() {
  // Регистрируем скрипт
  wp_register_script('counters', get_template_directory_uri() . '/js/counters.js', array('jquery'), false, true);
    
  // Загружаем скрипт
  wp_enqueue_script('counters');
}
add_action('wp_enqueue_scripts', 'enqueue_counters');

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

functions.php (только для неавторизованных пользователей)

function enqueue_counter() {
  // Регистрируем скрипт
  wp_register_script('counters', get_template_directory_uri() . '/js/counters.js', array('jquery'), false, true);
    
  // Загружаем скрипт, если пользователь неавторизован
  if (!is_user_logged_in()) {
    wp_enqueue_script('counters');
  }
}
add_action('wp_enqueue_scripts', 'enqueue_counters');

Добавляем Social Likes Next на сайт с WordPress

В прошлой заметке я рассказывал как добавить Social Likes на сайт с WordPress, с тех пор прошло много времени и появилась новая версия Social Likes под названием Social Likes Next. Отличается от предыдущей тем, что иконки теперь в SVG формате и для работы не требуется загрузка jQuery.

Шаг первый (скачиваем скрипт и файл стилей)

Скачиваем social-likes.min.js, например отсюда или отсюда в папку js вашей темы.

Скачиваем social-likes_flag.css, например отсюда или отсюда в папку css вашей темы.

Шаг второй (подключаем файл стилей и скрипт)

В файле functions.php вашей темы вставляем следующие строки

function b2k_enqueue_js_and_css() {
    wp_register_script(
        'social-likes',
        get_stylesheet_directory_uri() . 'js/social-likes.min.js',
        array(),
        false,
        true);

    wp_enqueue_script('social-likes');

    wp_register_style(
        'social-likes',
        get_stylesheet_directory_uri() . 'css/social-likes_flat.css');

    wp_enqueue_style('social-likes');
}

add_action('wp_enqueue_scripts', 'b2k_enqueue_js_and_css');

Шаг третий (добавляем кнопки в конце каждого поста)

Вставляем данный скрипт в functions.php

function b2k_social_likes($content='') {
    global $post;

    $buttons = array();
    $buttons['vk'] = '<div data-service="vkontakte" title="Поделиться ВКонтакте"></div>';
    $buttons['fb'] = '<div data-service="facebook" title="Поделиться в Facebook"></div>';
    $buttons['twitter'] = '<div data-service="twitter" title="Поделиться в Twitter"></div>';
    $buttons['plusone'] = '<div data-service="plusone" title="Поделиться в Google+"></div>';
    $buttons['ok'] = '<div data-service="odnoklassniki" title="Поделиться в Одноклассниках"></div>';
    $buttons['telegram'] = '<div data-service="telegram" title="Поделиться в Telegram"></div>';
    $buttons['linkedin'] = '<div data-service="linkedin" title="Поделиться в LinkeIn"></div>';
    $buttons = implode('', $buttons);

    $tags = array();
    $tags['class'] = 'class="social-likes"';
    $tags['data-title'] = 'data-title="' . $post->post_title . '"';
    $tags['data-url'] = 'data-url="' . get_permalink($post->ID) . '"';
    $tags = implode(' ', $tags);

    $main = '<div ' . $tags . '>';
    $main .= $buttons;
    $main .= '</div>';

    $content .= $main;

    return $content;
}
add_filter('the_content', 'b2k_social_likes');

Шаг четвертый (добавляем отслеживание Google Analytics)

jQuery(window).load(function() {
    jQuery('.social-likes__icon').css('pointer-events', 'none');
    jQuery('.social-likes__widget').click(function(e) {
        var service = jQuery(e.target).attr('data-service');
        var parent = jQuery(e.target).parent();
        var url = parent.attr('data-url');
        var title = parent.attr('data-title');
        gtag('event', 'share', {
            'service' : service,
            'location' : url,
            'title' : title
        });
    });
});

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

Личный блог Евгения Жирнова