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


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

Все, кто пытался сделать микроразметку комментариев для своего сайта или блога, сталкивались с предупреждением 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

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

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

<?php
   wp_list_comments( array(
     'style' => 'ol',
     'short_ping' => true,
     'avatar_size' => 56,
     'callback' => 'micro_comment',
) );
?>
Второй пример изменения comments.php

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

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

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

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

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

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

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

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

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



Если статья оказалась для Вас полезной, поделитесь с друзьями, жмите на кнопочки:


Подписывайтесь на новые статьи!


Оставьте комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

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

  • ZhenyaZERO

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

    • Максим Зайцев От автора

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

    • Максим Зайцев От автора

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

      • Ivan

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

        • Максим Зайцев От автора

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

  • Василий

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

    • Максим Зайцев От автора

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

  • Артем

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

    • Максим Зайцев От автора

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

      • Артем

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

        • Максим Зайцев От автора

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

      • Артем

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

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

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

          • Максим Зайцев От автора

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

        • Максим Зайцев От автора

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

          • Артем

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

          • Максим Зайцев От автора

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

          • Артем

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

          • Максим Зайцев От автора

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

          • Артем

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

          • Максим Зайцев От автора

            ОК, договорились. 😉

  • Лариса

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

  • Лариса

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

    • Максим Зайцев От автора

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

      • Лариса

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

        • Максим Зайцев От автора

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

          • Лариса

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

          • Максим Зайцев От автора

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

          • Алена

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

          • Максим Зайцев От автора

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

          • Алена

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

          • Максим Зайцев От автора

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

          • Алена

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

          • Максим Зайцев От автора

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

  • Seva

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

    • Максим Зайцев От автора

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