Автоматическая микроразметка комментариев в WordPress

Здравствуйте, уважаемые друзья. Поговорим сегодня о том, как создать автоматическую микроразметку комментариев в WordPress, и избавится от предупреждения vcard в валидаторе разметки Яндекс.

Все, кто пытался сделать микроразметку комментариев для своего сайта или блога, сталкивались с предупреждением vcard.

Предупреждение vcard

При этом в валидаторе микроразметки Google таких предупреждений нет.

В чём причина предупреждения vcard?

Связано это с тем, что vcard относится к микроформату hCard, который широко используется во всём мире, и предназначен для структурной микроразмкети контактной информации.

А так как почти все шаблоны, которые мы используем для своих сайтов WordPress созданы иностранными разработчиками, то и этот микроформат встречается в каждой теме.

Только вот Яндекс, пока, частично поддерживает этот формат. И в результате комментарии, размеченные по умолчанию микроформатом hCard, выдают предупреждение. Что мол, этот формат предназначен для контактных данных организаций, а не людей.

Как создать автоматическую микроразметку комментариев и избавится от предупреждения vcard.

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

А теперь приступаем к созданию автоматической разметки комментариев по типу мкроданных schema.org.

В качестве примера рассмотрим разметку на моём тестовом блоге. Итак, внешне комментарии выглядят так:

Вид комментария до микроразметки

Обращаю ваше внимание на дату и время комментария. Для корректной микроразметки походит только формат типа (Y-m-d). Поэтому дата после добавления разметки примет вид 2015-04-10. Все остальные структурные элементы комментария, внешне не изменятся.

Шаг 1. Вставка функции в файл functions.php.

Первое, что нужно сделать – это вставить функцию в файл functions.php. Именно в этой функции заключена вся «соль». Эта функция меняет фрагмент кода в файле comment-template.php на код с микроразметкой.

Предупреждение: перед началом работ, сделайте резервные копии файлов functions.php и comments.php.

Итак, открываете административную панель WordPress – «Внешний вид»«Редактор»«Функции темы». Пролистываете, файл в самый низ, и вставляете код функции.

Подсказка: Как не ошибиться с местом вставки, смотрите в видеоуроке.

/* Автомикроразметка в комментариях */
?>
<?php
function micro_comment($comment, $args, $depth){
$GLOBALS['comment'] = $comment;
if ( 'div' == $args['style'] ) {
$tag = 'div';
$add_below = 'comment';
} else {
$tag = 'li';
$add_below = 'div-comment';
}
?>
<<?php echo $tag; ?> <?php comment_class( empty( $args['has_children'] ) ? '' : 'parent' ); ?> id="comment-<?php comment_ID(); ?>">
<?php if ( 'div' != $args['style'] ) : ?>
<div id="div-comment-<?php comment_ID(); ?>" class="comment-body" itemprop="comment" itemscope itemtype="http://schema.org/Comment">
<?php endif; ?>
<div class="comment-author">
<?php if ( 0 != $args['avatar_size'] ) echo get_avatar( $comment, $args['avatar_size'] ); ?>
</div>
<div >
<?php printf( __('<div itemprop="creator">%s:</div>' ), get_comment_author_link() ); ?>
<?php if ( '0' == $comment->comment_approved ) : ?>
<em class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.' ) ?></em>
<br />
<?php endif; ?>
<div class="comment-meta commentmetadata"><a href="<?php echo esc_url( get_comment_link( $comment->comment_ID, $args ) ); ?>">
<span itemprop="datePublished"><?php
/* translators: 1: date, 2: time */
printf( __( '%1$s' ), get_comment_date('Y-m-d')); ?></span> в <?php echo (get_comment_time() ); ?></a><?php edit_comment_link( __( '(Edit)' ), '&nbsp;&nbsp;', '' );
?>
</div>
<span itemprop="text"><?php comment_text( get_comment_id(), array_merge( $args, array( 'add_below' => $add_below, 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?></span>
<div class="reply">
<?php comment_reply_link( array_merge( $args, array( 'add_below' => $add_below, 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
</div>
</div>
<?php if ( 'div' != $args['style'] ) : ?>
</div>
<?php endif; ?>
<?php
}
?>

 

Сохраняете файл. Сейчас внешне комментарии изменились только датой.

Вид комментария после микроразметки

Шаг 2. Вызов функции в файле comments.php.

Теперь открываете файл comments.php и используя поиск (CTRL+F), ищите вот этот фрагмент кода:

<?php wp_list_comments(); ?>

Выглядеть этот код может и по-иному:

<?php
   wp_list_comments( array(
     'style' => 'ol',
     'short_ping' => true,
     'avatar_size' => 56,
) );
?>

 

В первом, варианте делаете так: в скобках, в одинарных кавычках вставляете вызов функции.

<?php wp_list_comments('callback=micro_comment'); ?>

Первый пример изменения comments.php

Во втором, варианте делаете так: добавляете по образцу предыдущих строк вызов функции, как показано в примере.

<?php
   wp_list_comments( array(
     'style' => 'ol',
     'short_ping' => true,
     'avatar_size' => 56,
     'callback' => 'micro_comment',
) );
?>

Второй пример изменения comments.php

Сохраняете изменения в файле и можно идти проверять работу в валидаторе микроразметки.

Ваши комментарии в валидаторе Яндекса должны выглядеть подобным образом.

Микроразметка комментариев готова

И никаких предупреждений vcard. Одним действием вы решаете две задачи.

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

Друзья, у меня сегодня всё. Желаю вам успехов и хорошего настроения. И конечно, жду ваших комментариев.

С уважением, Максим Зайцев.

Понравилась статья? Поделиться с друзьями:
Комментарии: 53
  1. ZhenyaZERO

    Круто конечно, только вот не понимаю смысл всего этого
    Кого может не удовлетворить стандартный вид комментария? :)

    1. Максим Зайцев (автор)

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

  2. Иван

    Максим, а кой толк от неё? Яша выше оценивает сайт?

    1. Максим Зайцев (автор)

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

      1. Ivan

        У меня комментарии «22 часа ago». При наведении вопросик и «Воскресенье, Сентябрь 20, 2015, 7:31 и что надо менять?

        1. Максим Зайцев (автор)

          Ничего менять не надо, в функции уже всё учтено. Дата визуально изменится после внедрения микроразметки.

  3. Василий

    Максим, а если что-то меняется в comment-template.php, то после обновления движка придется снова исправлять?

    1. Максим Зайцев (автор)

      Вася, привет. Это базовая часть файла comment-template.php не меняется при обновлении движка. Так что можно не переживать. Но, а если и появится изменения в файле, которые отразятся на работе функции, то внести коррективы в функцию всё же легче, чем править все структурные данных в этом файле.

  4. Артем

    Добрый вечер! А в чем заключается автоматизация? Вы ведь просто делаете калбак функцию для коментов. И другой момент, если уже существует калбак функция, то что произойдет?
    И третье, что делать со стилями комментариев? Ведь они явно поедут.

    1. Максим Зайцев (автор)

      Здравствуйте, Артём. Автоматизация заключается в отсутствии необходимости вносить изменения в файл comment-template.php. Так же не нужно удалять классы vcard и править стили вручную. С функцией стили никуда не едут. В видеоуроке всё наглядно показано.

      1. Артем

        В том то и дело, что если в теме уже была калбак функция, то в ней как правило используются свои классы и идентификаторы. А если мы ее меняем, то и классы изменяться, а значит стили поплывут. Может быть и не сильно, но поедут — это точно.
        Видео я смотрел, в нем вы показываете на стандартной теме, в которой по определению не может быть никаких калбак функций.
        Возьмите тему, где уже используется калбак функция и попробуйте на ней…

        1. Максим Зайцев (автор)

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

      2. Артем

        Кстати, чтобы не менять отображение даты, можно использовать такой финт ушами. Вместо этой строки
        <a href="comment_ID, $args ) ); ?>»>
        в

        использовать эту
        <a href="comment_ID, $args ) ); ?>»>
        <time datetime="» itemprop=»datePublished»> в

        Тогда и валидаторы ругаться не будут и дата будет какой надо

        1. Артем

          Эх, код не правильно оторажается в коментах. Ну ладно…

          1. Максим Зайцев (автор)

            Да, коды в комментариях моей темы туго проходят. Лучше через почту, а я уже адаптирую и выложу.

        2. Максим Зайцев (автор)

          С датой идею понял, хорошее дополнение. Я же исходил из соображений минимального изменения в файле comment-template.php.

          1. Артем

            Раз идею уловили, тогда не буду беспокоить. Вроде и так понятно.
            А вот изменять файлы ядра, смысла совсем не вижу. Правда я не совсем понял при чем тут comment-template.php, ну да ладно

          2. Максим Зайцев (автор)

            Артём, теперь я знаю кто делал разметку для Васи (http://vellisa.ru). ;-) Хорошая работа! А я был одним из тех, кто её оценил. Вот ведь земля круглая. Рад знакомству.

          3. Артем

            Ага, это был я)) Спасибо. И мне приятно.
            Более того, с подачи Василия, я еще и плагин для разметки видео написал http://wpruse.ru/mikrorazmetka/plagin-dlya-video/ ну или в репозитории можно глянуть https://wordpress.org/plugins/insert-video-with-schemaorg-ivws/

          4. Максим Зайцев (автор)

            Артём, видео посмотрел, статьи прочитал. Реально круто! Скачал, буду пробовать. Спасибо. ;-)

          5. Артем

            Вам спасибо. Если кривултки какие заметите, скажите. Может я что не вижу…

          6. Максим Зайцев (автор)

            ОК, договорились. ;-)

  5. Лариса

    Здравствуйте, Максим! Пробовала сделать микроразметку комментариев по вашему предыдущему уроку, но ничего не изменилось. Сегодня сделала по этому уроку и сначала тоже ничего не произошло, пока не удалила строку, отвечающую за вывод комментариев, определяемых шаблоном (темой). Вместо этой строки я и вставила «micro_comment» и все заработала. Кстати, код не выглядит ни первым, ни вторым вариантом, а чем-то средним между ними. Главное, что получилось. Спасибо.

  6. Лариса

    Упс! Максим, погорячилась: валидатор показывает, что все правильно, vcard-предупреждение не высвечивает, а на сайте творится бяка: граватары уменьшились в размерах и стали наезжать на текст комментов (в ответах на комменты). Пришлось все вернуть к исходному состоянию. Что делать?

    1. Максим Зайцев (автор)

      Здравствуйте, Лариса. Вся причина в выводе комментариев, когда вы подправили (удалили) там код, то нарушили и стили оформления. Так как в этом коде у вас вероятней всего был параметр отвечающий за размер граватаров 'avatar_size' => 56,, что-то вроде этого.
      Пришлите мне на почту ваш файл comment.php и я посмотрю что можно сделать. ;-)

      1. Лариса

        Нет, там не было ничего подобного. Исправила только участок: ‘callback’ => ‘название темы_comment’. Сейчас на почту отправлю файл, напишу, что конкретно сделала.

        1. Максим Зайцев (автор)

          Всё посмотрел. Готовое решение отправил по почте. Внедряйте, желаю удачи!

          1. Лариса

            Спасибо большое, Максим, за помощь. Все работает, валидаторы не ругаются на vcard, на сайте все отображается как надо. Благодаря вам полезла еще дальше в микроразметку и исправила еще несколько ошибок, которые выдавали валидаторы Яндекс и Гугл.
            Еще раз благодарю за уделенное мне, чайнику, время.

          2. Максим Зайцев (автор)

            Лариса, рад что смог помочь. Если нужна будет помощь, — обращайтесь. Желаю удачи!

          3. Алена

            Добрый день, Максим. А что это за готовое решение? У меня та же проблема)

          4. Максим Зайцев (автор)

            Здравствуйте, Алена. Вы имеете ввиду готовое решение для Ларисы? Всё нужно смотреть. Сообщите название вашей темы и я могу посмотреть что к чему.

          5. Алена

            Здравствуйте, Максим. Спасибо за ответ. Тема Sydney. Или может быть сориентируете, где что смотреть?

          6. Максим Зайцев (автор)

            Алена, добрый день. Посмотрел вашу тему. В ней всё отлично, нужно сделать всё в точности, как я описал в статье. Изначально вставляете в конце файла functions.php функцию из статьи. Затем в файле comments.php добавляете вызов этой функции, добавив строчку 'callback' => 'micro_comment',. Для облегчения поиска, откройте этот файл, нажмите сочетание клавиш CTRL+F, введите вот этот фрагмент 'avatar_size'=> 60, и ниже этой строки вставляйте нужный код. Желаю удачи!

          7. Алена

            Спасибо за помощь, Максим. Все так и сделала. В файле комментариев вызываем функцию по первому варианту. Все работает. Гугл и Яндекс видят микроразметку. А имя и дата ушли под аватарку. Поэтому пока-что просто выровняла их по правому краю в функции micro_comment )

          8. Максим Зайцев (автор)

            Алена, рад это слышать. Кстати, комментарии хорошо смотрятся. Мне нравится. И внешний вид всегда можно изменить через стили css. Это не сложно.

          9. Алена

            Спасибо, Максим. Хорошего дня

  7. Seva

    Все сработало спасибо но есть один недостаток, граваторы изменились по размерам стали 32×32 в comment.php изменяю размеры но все равно не измениться.

    1. Максим Зайцев (автор)

      Здравствуйте, Seva. Хорошо, что всё получилось. С аватарами так произошло, потому что у вас в файле functions.php есть определение размеров. Попробуйте поищите этот параметр 'avatar_size' и исправьте на нужные значения. Удачи!

  8. Артём

    Большое спасибо за консультацию по почте!

    1. Максим Зайцев (автор)

      Всегда пожалуйста! ;-)

      1. Роман

        Максим здравствуйте, вставляю функцию ‘callback’ => ‘micro_comment’, как во втором варианте и комментарии просто исчезают с сайта, что я не так делаю ?

        1. Максим Зайцев (автор)

          Здравствуйте, Роман. Вероятно у вас уже используется функция callback и вам нужно совместить её работу с разметкой комментариев, или сделать разметку вручную.

          1. Роман

            Максим, а вы не сможите мне помочь ?
            вот такая функция у меня в шаблоне комментариев:

            new clean_comments_constructor, // класс, который собирает все структуру комментов, нах-ся в function.php
            );
            wp_list_comments($args); // выводим комменты
            ?>
            И в шаблоне страницы есть такая запись:
            /**
            * Возвратная функция (Callback)
            */
            function true_option_page(){
            global $true_page;
            ?>
            Дополнительные параметры сайта

            <input type="submit" class="button-primary" value="» />

            <?php
            Все ! Больше ничего про данную функцию нет.

  9. Роман

    Все получилось, спасибо за статью !

    1. Максим Зайцев (автор)

      Роман, рад что всё получилось. Удачи вам!

      1. Роман

        А шапка у вас не размечена как я вижу ? У вас есть статья как разметить шапку и статью ?

        1. Максим Зайцев (автор)

          Здравствуйте, Роман. Что именно в шапки вы хотели бы разметить? Элементы моего блога размечены. Посмотрите статьи по разметке моего шаблона, под статьёй есть список похожим, там посмотрите.

  10. Роман

    Например вот этот блок (шапка)
    wpheader

    itemType = http://schema.org/WPHeader
    name = Бизнес в Сети — блог Максима Зайцева
    url
    href = https://1zaicev.ru/
    text = Бизнес в Сети — блог Максима Зайцева
    description = Инструкции и видеоуроки о создании сайтов, блогов. Продвижение в поисковых системах, оптимизация и заработок на сайте.
    С виду все просто, но в 99% блоках тот же title и description выводится плагином Yoast SEO и как разметить ?

    1. Максим Зайцев (автор)

      Роман, в таком случае сеть тег meta, с его помощью можно сделать элементы только для микроразметки.

  11. Блог Александра Гаврина

    Максим, огромное спасибо сделал как у вас все в статье указано все получилось яндекс перестал показывать ошибки и да, в Гугл появилась разметка по комментам и без ошибок!!

    1. Максим Зайцев (автор)

      Александр, рад что смог помочь!

  12. Красотка

    Спасибо большое! Уже 2020 год, а инструкция до сих пор актуальна и работает. Сейчас, спустя 5 лет, микроразметка стала еще более важной и её уже нельзя игнорировать.

    1. Максим Зайцев (автор)

      Да, микроразметка важная часть для технической составляющей сайта. И сегодня её значение ещё актуальнее.

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