Здравствуйте, уважаемые друзья. Поговорим сегодня о том, как создать автоматическую микроразметку комментариев в WordPress, и избавится от предупреждения 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)' ), ' ', '' ); ?> </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'); ?>
Во втором, варианте делаете так: добавляете по образцу предыдущих строк вызов функции, как показано в примере.
<?php
wp_list_comments( array(
'style' => 'ol',
'short_ping' => true,
'avatar_size' => 56,
'callback' => 'micro_comment',
) );
?>
Сохраняете изменения в файле и можно идти проверять работу в валидаторе микроразметки.
Ваши комментарии в валидаторе Яндекса должны выглядеть подобным образом.
И никаких предупреждений vcard. Одним действием вы решаете две задачи.
На этом автоматическая микроразметка комментариев окончена. Но, для наглядности я предлагаю посмотреть видеоурок с примерами вставки кода и пошаговой инструкцией.
Друзья, у меня сегодня всё. Желаю вам успехов и хорошего настроения. И конечно, жду ваших комментариев.
С уважением, Максим Зайцев.
Круто конечно, только вот не понимаю смысл всего этого
Кого может не удовлетворить стандартный вид комментария?
Поисковый роботы видят наши сайты в виде сплошного кода, а микроразметка структурных данных позволяет быстрей разобраться, что к чему и просканировать за отведённый промежуток времени значительно больше страниц.
Максим, а кой толк от неё? Яша выше оценивает сайт?
Вань, привет. Как известно на сканирование страниц сайта у робота есть ограниченное время, та вот с микроразметкой поисковые роботы быстрей сканирую страниц и за то же время сканируют в разы больше страниц. Сегодня микроразметка не является фактором ранжирования, но эффект от неё реальный.
У меня комментарии «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. Это не сложно.
Спасибо, Максим. Хорошего дня
Все сработало спасибо но есть один недостаток, граваторы изменились по размерам стали 32×32 в comment.php изменяю размеры но все равно не измениться.
Здравствуйте, Seva. Хорошо, что всё получилось. С аватарами так произошло, потому что у вас в файле functions.php есть определение размеров. Попробуйте поищите этот параметр
'avatar_size'
и исправьте на нужные значения. Удачи!Большое спасибо за консультацию по почте!
Всегда пожалуйста!
Максим здравствуйте, вставляю функцию ‘callback’ => ‘micro_comment’, как во втором варианте и комментарии просто исчезают с сайта, что я не так делаю ?
Здравствуйте, Роман. Вероятно у вас уже используется функция callback и вам нужно совместить её работу с разметкой комментариев, или сделать разметку вручную.
Максим, а вы не сможите мне помочь ?
вот такая функция у меня в шаблоне комментариев:
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
Все ! Больше ничего про данную функцию нет.
Все получилось, спасибо за статью !
Роман, рад что всё получилось. Удачи вам!
А шапка у вас не размечена как я вижу ? У вас есть статья как разметить шапку и статью ?
Здравствуйте, Роман. Что именно в шапки вы хотели бы разметить? Элементы моего блога размечены. Посмотрите статьи по разметке моего шаблона, под статьёй есть список похожим, там посмотрите.
Например вот этот блок (шапка)
wpheader
itemType = http://schema.org/WPHeader
name = Бизнес в Сети — блог Максима Зайцева
url
href = https://1zaicev.ru/
text = Бизнес в Сети — блог Максима Зайцева
description = Инструкции и видеоуроки о создании сайтов, блогов. Продвижение в поисковых системах, оптимизация и заработок на сайте.
С виду все просто, но в 99% блоках тот же title и description выводится плагином Yoast SEO и как разметить ?
Роман, в таком случае сеть тег meta, с его помощью можно сделать элементы только для микроразметки.
Максим, огромное спасибо сделал как у вас все в статье указано все получилось яндекс перестал показывать ошибки и да, в Гугл появилась разметка по комментам и без ошибок!!
Александр, рад что смог помочь!
Спасибо большое! Уже 2020 год, а инструкция до сих пор актуальна и работает. Сейчас, спустя 5 лет, микроразметка стала еще более важной и её уже нельзя игнорировать.
Да, микроразметка важная часть для технической составляющей сайта. И сегодня её значение ещё актуальнее.