Микроразметка шаблона Customizr Pro – главная страница

Здравствуйте, уважаемые друзья. Сегодня расскажу, как создать микроразметку Schema.org для шаблона Customizr Pro. И начнём мы с главной страницы. Создадим разметку для шапки, контента, сайтбара и футера.

А в следующих статьях разметим статьи, страницы и перепроверим всё остальное.

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

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

Результат я продемонстрирую в видеоуроке.

Общая структура главной страницы шаблона Customizr Pro

Но, в принципе такая структура поддерживается на многих современных, то есть шаблон представлен отдельными блоками:

Шапка (header) – отвечает файл header.php.

Сайтбар (sidebar) может быть несколько – sidebar.php, sidebar-left.php, sidebar-right.php.

Блок с контентом (content), в зависимости от типа используются разные файлы – index.php, main.php, single.php, page.php и так далее.

Подвал (footer) – footer.php.

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

Микроразметка шапки

Для начала оценим, что есть в шапке и что можно разметить. А здесь есть, название сайта, описание и меню.

Итак, для работы с файлами сайта я использую связку бесплатных программ WinSCP и Notepad++. Ну уж очень они удобны для подобной работы, в видеоуроке увидите почему.

Для создания микроразметки вам нужно открыть папку с темой.

wp-content/themes/customizr-pro

Я использую дочернюю тему, поэтому у меня эта папка отличается. Но, все файлы необходимые для работы над микроразметкой расположены либо в папке самой темы, либо в подпапках темы customizr-pro/inc/parts.

Итак, в папке темы открываем файл header.php.

В этом файле добавляем всего две строчки:

itemscope itemtype="https://schema.org/WebPage"

Для обозначения сущности страницы (строка 26).

А для обозначения заголовка добавляем эту строку кода (строка 34):

itemscope itemtype="http://schema.org/WPHeader"

И, казалось бы, в этом файле должны быть все элементы шапки, но только не для темы Customizr Pro.

Для разметки названия сайта, описания и меню нужно вносить разметку структурных элементов в файл class-header-header_main.php, который расположен по адресу:

wp-content/themes/customizr-pro/inc/parts

В строке 279 нужно добавить код разметки для заголовка сайта и ссылки на главную страницу:

itemprop="name"

itemprop="url"

Добавляете разметку, как показано на скриншоте ниже.

В строке 472 нужно добавить код разметки для описания сайта:

itemprop="description"

Меню в теме представлено несколькими вариантами, одно основное и два вида адаптивного меню. Для обозначения каждого нужно добавить код три раза (строка 375, 385, 417):

itemscope itemtype="http://schema.org/SiteNavigationElement"

Этим кодом мы только определили сущность меню, а для разметки пунктов будем использовать функцию. Добавить её нужно в файл functions.php:

/* микроразметка меню */
function nav($content) {
$pattern = "<a ";
$replacement = '<a itemprop="url" ';
$content = str_replace($pattern, $replacement, $content);
return $content;
}
add_filter('wp_nav_menu', 'nav');

Если не знаете где разместить функцию, то сделайте это в самом конце файла либо перед этим обозначением(?>), либо вместо него.

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

Для начала нужно обозначить сущность анонса. Открываем файл index.php, который расположен в папке темы. Для обозначения сущности нужно добавить код на 37 строке:

itemscope itemtype="http://schema.org/BlogPosting"

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

Добавляем этот код в строке 39, перед закрытием блока статьи.

<meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="<?php the_permalink() ?>" content="<?php the_title(); ?>"/>

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

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

<?php if ( !is_single () && !is_page () ) : ##no single and page ?>
 <div id="content" class="<?php echo implode(' ', apply_filters( 'tc_article_container_class' , array( TC_utils::tc_get_layout( TC_utils::tc_id() , 'class' ) , 'article-container' ) ) ) ?>">

 <?php do_action ('__before_loop');##hooks the heading of the list of post : archive, search... ?>

 <?php if ( tc__f('__is_no_results') || is_404() ) : ##no search results or 404 cases ?>

 <article <?php tc__f('__article_selectors') ?>>
 <?php do_action( '__loop' ); ?>
 </article>

 <?php endif; ?>

 <?php if ( have_posts() && ! is_404() ) : ?>
 <?php while ( have_posts() ) : ##all other cases for single and lists: post, custom post type, page, archives, search, 404 ?>
 <?php the_post(); ?>

 <?php do_action ('__before_article') ?>
 <article <?php tc__f('__article_selectors') ?> itemscope itemtype="http://schema.org/BlogPosting">
 <?php do_action( '__loop' ); ?>
 <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="<?php the_permalink() ?>" content="<?php the_title(); ?>"/>
 </article>
 <?php do_action ('__after_article') ?>

 <?php endwhile; ?>

 <?php endif; ##end if have posts ?>

 <?php do_action ('__after_loop');##hook of the comments and the posts navigation with priorities 10 and 20 ?>

 </div><!--.article-container -->
<?php endif; ?>
<?php if ( is_single () || is_page () ) : ##single or page ?>
 <div id="content" class="<?php echo implode(' ', apply_filters( 'tc_article_container_class' , array( TC_utils::tc_get_layout( TC_utils::tc_id() , 'class' ) , 'article-container' ) ) ) ?>" itemscope itemtype="http://schema.org/BlogPosting">

 <?php do_action ('__before_loop');##hooks the heading of the list of post : archive, search... ?>

 <?php if ( tc__f('__is_no_results') || is_404() ) : ##no search results or 404 cases ?>

 <article <?php tc__f('__article_selectors') ?>>
 <?php do_action( '__loop' ); ?>
 </article>

 <?php endif; ?>

 <?php if ( have_posts() && ! is_404() ) : ?>
 <?php while ( have_posts() ) : ##all other cases for single and lists: post, custom post type, page, archives, search, 404 ?>
 <?php the_post(); ?>

 <?php do_action ('__before_article') ?>
 <article <?php tc__f('__article_selectors') ?> >
 <?php do_action( '__loop' ); ?>
 <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="<?php the_permalink() ?>" content="<?php the_title(); ?>"/>
 </article>
 <?php do_action ('__after_article') ?>

 <?php endwhile; ?>

 <?php endif; ##end if have posts ?>

 <?php do_action ('__after_loop');##hook of the comments and the posts navigation with priorities 10 and 20 ?>

 </div><!--.article-container -->
<?php endif; ?>

Его нужно вставить в файл, заменив всё со строки 19 по 49.

Таким образом, на главной странице, архивах и рубриках сущность статьи будет размечена в одном блоке, а в статьях и страницах эта разметка будет в отдельном блоке ДИВ.

Заголовок статьи

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

А для этого открываем файл class-content-headings.php, строка 159 и меняем стандартную функцию на вот эту с условием:

function tc_post_page_title_callback( $_content = null , $_heading_type = null ) {
 $_title = apply_filters( 'tc_title_text', get_the_title() );
 if (!is_page ())
 return sprintf('<%1$s class="entry-title%2$s" itemprop="headline">%3$s</%1$s>',
 apply_filters( 'tc_content_title_tag' , is_singular() ? 'h1' : 'h2' ),
 apply_filters( 'tc_content_title_icon', 'format-icon' ),
 apply_filters( 'tc_the_title', $_title )
 );
 if (is_page ())
 return sprintf('<%1$s class="title%2$s" itemprop="headline">%3$s</%1$s>',
 apply_filters( 'tc_content_title_tag' , is_singular() ? 'h1' : 'h2' ),
 apply_filters( 'tc_content_title_icon', 'format-icon' ),
 apply_filters( 'tc_the_title', $_title )
 );
 }

Далее, в анонсах идёт строка метаданных, где представлена информация о рубрике, теги, дата публикации и авторе.

Метаданные

За этот блок отвечает файл class-content-post_metas.php, расположен в папке темы, в inc/parts.

Для разметки рубрики нужно код, отвечающий за вывод рубрики, поместить внутрь блоков СПАН с кодом микроразметки.

<span itemprop="articleSection">%1$s</span>

Делается это в 258 строке.

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

<span itemprop="keywords">%2$s</span>

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

Для этого переходим к строке 427 и добавляем вот эту хитрую конструкцию:

itemprop="datePublished">%4$s</time></a><meta itemprop="dateModified" content="' . esc_html( get_the_modified_date( $_format ) ) . '"/>

И остаётся создать микроразметку для автора и издателя. Для этого переходим к строке 447 и между одинарными кавычками всё меняем на этот код:

<span class="author vcard" itemprop="author" itemscope itemtype="https://schema.org/Person"><a href="%1$s" title="%2$s" rel="author"><span class="fn" itemprop="name">%3$s</span></a></span><span itemprop="publisher" itemscope itemtype="https://schema.org/Organization"><meta itemprop="name" content="Бизнес в Сети - блог Максима Зайцева | 1zaicev.ru"><meta itemprop="address" content="Россия"><meta itemprop="telephone" content="Используйте форму обратной связи"><span itemprop="logo" itemscope itemtype="https://schema.org/ImageObject"><link itemprop="url" href="https://1zaicev.ru/wp-content/uploads/2016/03/logo.png"><link itemprop="contentUrl" href="https://1zaicev.ru/author/admin/"></span></span>

И не забудьте изменить элементы, обозначенные оранжевым цветом. То есть подставьте свои ссылки и данные. Этим кодом мы угодим и Яндексу и Гуглу.

Миниатюра статьи

За этот элемент отвечает файл class-content-post_thumbnails.php, открываем его на строке 67, где нужно создать переменную и добавить её в строке 77, как показано на скриншоте.

$tc_img  = 'iitemprop=image url';

Далее, переходим к строке 260 и между кавычками меняете код на этот:

<div class="%5$s %1$s" itemprop="image" itemscope itemtype="http://schema.org/ImageObject"><div class="round-div" itemprop="width height" content="250"></div><a itemprop="contentUrl" class="round-div %1$s" href="%2$s" title="%3$s"></a>%4$s</div>

Вы в этом коде меняете размер миниатюры, в соответствии с вашими параметрами темы.

Текст анонса

Открываем файл class-content-post_list.php на строке 261 и добавляем код микроразметки:

itemprop="description"

На этом микроразметка анонсов статей окончена.

Далее, можно разметить подвал и сайтбар, чтобы не возвращаться к ним потом.

Микроразметка сайтбара

В теме есть возможность использовать два сайтбара и за них отвечают файлы sidebar-left.php и sidebar-right.php. Отрываете файл используемого сайтбара и на 9 строке добавляете код:

itemscope itemtype="http://schema.org/WPSideBar"

А сами заголовки виджетов нужно разметить в файле class-content-sidebar.php. Открываем его и в строке 185 добавляем код микроразметки:

itemprop="name"

Микроразметка подвала

Сущность подвала размечаем в файле footer.php. Для этого открываем файл и в строке 11 добавляем вот этот код:

itemscope itemtype="http://schema.org/WPFooter"

А содержимое подвала размечаем в файле class-footer-footer_main.php. Для этого открываем файл и в строке 243 добавляем код микроразметки.

itemprop="copyrightYear" – год создания.

itemprop="name" – имя.

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

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

Друзья, желаю вам удачи!

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