Добавляем вывод количества просмотров записи из 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
        });
    });
});

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

Блог Евгения Жирнова