Микроразметка рецептов при помощи произвольных полей

Если вы хотите получить красивый сниппет в выдаче: с фото готового блюда, ингредиентами и т.д. то микроразметку внедрять надо. Другой момент, как это сделать и на каком сайте?

к содержанию

Введение

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

  • вновь созданным;
  • действующим с кучей статей.

Отсюда и надо плясать, при внедрении микроразметки и применении одного из способов. А способов может быть несколько, опять же при соблюдении вышеуказанных условий:

1. Если сайт действующий:

  • вручную вводить нужные сущности при редактировании рецепта
  • использовать специальные функции (можно почитать здесь)
  • использовать плагин, который формирует что-то вроде карточки рецепта (например, плагин Easy Recipe)
  • использовать произвольные поля, правда при этом придется все статьи переделывать.

Оптимальный способ, если у вас действующий сайт: использовать специальные функции.

2. Если сайт новый и вы только начали его заполнять

  • можно использовать плагины с произвольными записями (например, плагин плагин Recipe Hero) — это когда создается отдельный вид записей и с помощью него заполняются все рецепты
  • можно использовать произвольные поля, для чего создается одна большая рубрика «Рецепты» и к записям в этой рубрике привязываются нужные произвольные поля

В итоге, у меня получалась вот такая схемка для внедрения микроразметки рецептов через произвольные поля

shemaorgrecipe

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

Вот с помощью произвольных полей и будет внедряться микроразметка рецептов. Более подробно в видео

к содержанию

Исходные данные

  • Подопытный сайт: MamaCooks.ru
  • Используемая тема: Selfie (обзор темы)

Добавляем произвольные поля

Для прикручивания произвольных полей используется плагин Custom Field Suite. Процедура не сложная, делаем все по видео:

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

[{"post_title":"\u0418\u043d\u0433\u0440\u0435\u0434\u0438\u0435\u043d\u0442\u044b","post_name":"ingridienty-i-opisanie","cfs_extras":{"order":"0","context":"normal","hide_editor":"0"},"cfs_fields":[{"id":"8","name":"artabr_recipe_ing_foto","label":"\u0424\u043e\u0442\u043e \u0438\u043d\u0433\u0440\u0435\u0434\u0438\u0435\u043d\u0442\u043e\u0432","type":"file","notes":"","parent_id":0,"weight":0,"options":{"return_value":"url","required":"0"}},{"id":"23","name":"artabr_recipe_ing_title","label":"\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0438\u043d\u0433\u0440\u0435\u0434\u0438\u0435\u043d\u0442\u043e\u0432","type":"text","notes":"\u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0440\u0430\u0437\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0438\u043d\u0433\u0440\u0435\u0434\u0438\u0435\u043d\u0442\u044b (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0434\u043b\u044f \u0440\u0435\u0446\u0435\u043f\u0442\u0430 \u043f\u0438\u0440\u043e\u0433\u0430), \u0442\u043e \u0443\u043a\u0430\u0436\u0438\u0442\u0435 \u0437\u0434\u0435\u0441\u044c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \"\u0414\u043b\u044f \u0442\u0435\u0441\u0442\u0430\"","parent_id":0,"weight":1,"options":{"default_value":"","required":"0"}},{"id":"5","name":"artabr_recipe_ing","label":"\u0418\u043d\u0433\u0440\u0435\u0434\u0438\u0435\u043d\u0442\u044b","type":"loop","notes":"","parent_id":0,"weight":2,"options":{"row_display":"0","row_label":"\u0418\u043d\u0433\u0440\u0435\u0434\u0438\u0435\u043d\u0442\u044b","button_label":"\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0438\u043d\u0433\u0440\u0435\u0434\u0438\u0435\u043d\u0442","limit_min":"","limit_max":""}},{"id":"6","name":"artabr_recipe_ing_name","label":"\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0438\u043d\u0433\u0440\u0435\u0434\u0438\u0435\u043d\u0442\u0430","type":"text","notes":"","parent_id":5,"weight":3,"options":{"default_value":"","required":"0"}},{"id":"7","name":"artabr_recipe_ing_count","label":"\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0438\u043d\u0433\u0440\u0435\u0434\u0438\u0435\u043d\u0442\u0430","type":"text","notes":"","parent_id":5,"weight":4,"options":{"default_value":"","required":"0"}},{"id":"24","name":"artabr_recipe_ing_title_dop","label":"\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445  \u0438\u043d\u0433\u0440\u0435\u0434\u0438\u0435\u043d\u0442\u043e\u0432","type":"text","notes":"\u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0440\u0430\u0437\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0438\u043d\u0433\u0440\u0435\u0434\u0438\u0435\u043d\u0442\u044b (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0434\u043b\u044f \u0440\u0435\u0446\u0435\u043f\u0442\u0430 \u043f\u0438\u0440\u043e\u0433\u0430), \u0442\u043e \u0443\u043a\u0430\u0436\u0438\u0442\u0435 \u0437\u0434\u0435\u0441\u044c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \"\u0414\u043b\u044f \u0442\u0435\u0441\u0442\u0430\"","parent_id":0,"weight":5,"options":{"default_value":"","required":"0"}},{"id":"20","name":"artabr_recipe_ing_dop","label":"\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0438\u043d\u0433\u0440\u0435\u0434\u0438\u0435\u043d\u0442\u044b","type":"loop","notes":"","parent_id":0,"weight":6,"options":{"row_display":"0","row_label":"\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0438\u043d\u0433\u0440\u0435\u0434\u0438\u0435\u043d\u0442\u044b","button_label":"\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0438\u043d\u0433\u0440\u0435\u0434\u0438\u0435\u043d\u0442","limit_min":"","limit_max":""}},{"id":"21","name":"artabr_recipe_ing_name_dop","label":"\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0438\u043d\u0433\u0440\u0435\u0434\u0438\u0435\u043d\u0442\u0430","type":"text","notes":"","parent_id":20,"weight":7,"options":{"default_value":"","required":"0"}},{"id":"22","name":"artabr_recipe_ing_count_dop","label":"\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0438\u043d\u0433\u0440\u0435\u0434\u0438\u0435\u043d\u0442\u0430","type":"text","notes":"","parent_id":20,"weight":8,"options":{"default_value":"","required":"0"}}],"cfs_rules":{"post_types":{"operator":"==","values":["post"]},"term_ids":{"operator":"==","values":["1"]}}},{"post_title":"\u041c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0435 \u0440\u0435\u0446\u0435\u043f\u0442\u0430","post_name":"metadannye-recepta","cfs_extras":{"order":"0","context":"side","hide_editor":"0"},"cfs_fields":[{"id":"10","name":"artabr_recipe_resultPhoto","label":"\u0424\u043e\u0442\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430","type":"file","notes":"","parent_id":0,"weight":0,"options":{"return_value":"url","required":"0"}},{"id":"11","name":"artabr_recipe_recipeYield","label":"\u041a\u043e\u043b-\u0432\u043e \u043f\u043e\u0440\u0446\u0438\u0439","type":"text","notes":"","parent_id":0,"weight":1,"options":{"default_value":"","required":"0"}},{"id":"12","name":"artabr_recipe_prepTime","label":"\u0412\u0440\u0435\u043c\u044f \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0438","type":"text","notes":"","parent_id":0,"weight":2,"options":{"default_value":"","required":"0"}},{"id":"13","name":"artabr_recipe_cookTime","label":"\u0412\u0440\u0435\u043c\u044f \u043f\u0440\u0438\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u0438\u044f","type":"text","notes":"","parent_id":0,"weight":3,"options":{"default_value":"","required":"0"}},{"id":"14","name":"artabr_recipe_cookingMethod","label":"\u041c\u0435\u0442\u043e\u0434 \u043f\u0440\u0438\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u0438\u044f","type":"text","notes":"","parent_id":0,"weight":4,"options":{"default_value":"","required":"0"}},{"id":"15","name":"artabr_recipe_recipeCuisine","label":"\u041a\u0443\u0445\u043d\u044f \u0440\u0435\u0446\u0435\u043f\u0442\u0430","type":"text","notes":"","parent_id":0,"weight":5,"options":{"default_value":"","required":"0"}}],"cfs_rules":{"post_types":{"operator":"==","values":["post"]},"term_ids":{"operator":"==","values":["1"]}}},{"post_title":"\u0418\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f \u043f\u043e \u043f\u0440\u0438\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u0438\u044e","post_name":"instrukciya-po-prigotovleniyu","cfs_extras":{"order":"0","context":"normal","hide_editor":"0"},"cfs_fields":[{"id":"18","name":"artabr_stepbystep","label":"\u0418\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f","type":"loop","notes":"","parent_id":0,"weight":0,"options":{"row_display":"0","row_label":"\u041f\u043e\u0448\u0430\u0433\u043e\u0432\u0430\u044f \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f","button_label":"\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0448\u0430\u0433","limit_min":"","limit_max":""}},{"id":"16","name":"artabr_photo_step","label":"\u0424\u043e\u0442\u043e \u0448\u0430\u0433\u0430","type":"file","notes":"","parent_id":18,"weight":1,"options":{"return_value":"url","required":"0"}},{"id":"17","name":"artabr_text_step","label":"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0448\u0430\u0433\u0430","type":"wysiwyg","notes":"","parent_id":18,"weight":2,"options":{"formatting":"default","required":"0"}},{"id":"19","name":"artabr_\u0441alories_nutrition","label":"\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u0430\u043b\u043e\u0440\u0438\u0439","type":"text","notes":"","parent_id":0,"weight":3,"options":{"default_value":"","required":"0"}}],"cfs_rules":{"post_types":{"operator":"==","values":["post"]},"term_ids":{"operator":"==","values":["1"]}}}]
Не забудьте указать нужную рубрику!
к содержанию

Внесение данных в поля

Поля созданы, теперь для наглядности надо их заполнить

Вывод полей на странице записи

Весь код выводиться в файле single.php

Всего получилось три вида произвольных полей:

  • текст;
  • загрузка файлов;
  • цикл.

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

к содержанию

Выводим текстовые поля

Объявляем переменную и присваиваем ей значение нужного текстового поля (можно не задавать переменные, просто с ними удобнее)

<?php $recipe_method  = CFS()->get('artabr_recipe_cookingMethod'); ?>

Теперь выводим ее в нужном месте, файла single.php

<?php if ( $recipe_method ) { ?> // вывод поля "Метод приготовления"
	<span class="recipe-method">
		<?php echo 'Метод: '; ?>
		<span class="recipe"><strong itemprop="cookingMethod"><?php echo $recipe_method; ?></strong></span>
	</span>
<?php } ?>
Все поля желательно выводить через условие проверки наличия в этих полях значений. Чтобы не выводился лишний контент, если вдруг поля пустые.

По аналогии выводим другие текстовые поля.

к содержанию

Выводим загруженные картинки

Здесь все просто. При загрузке картинки нам возвращают на нее ссылку, остается только вывести ее в теге img. Для вывода нашей картинки с ингредиентами, вывод полей будет выглядеть так:

<div class="recipe-ingr-img col-xs-6">
       <img itemprop="image" src="<?php echo CFS()->get('artabr_recipe_ing_foto'); ?>">
</div>

Выводим циклы

В нашем случае при помощи циклов выводятся ингредиенты и инструкция по приготовлению. Вообще, любое поле типа «цикл (loop)» можно вывести с помощью перебора. В нашем случае, вывод ингредиентов будет происходить так:

 <?php $recipe_ing = CFS()->get('artabr_recipe_ing');
	foreach ($recipe_ing as $one_ingr) {
		echo $one_ingr['artabr_recipe_ing_count']. ' '. $one_ingr['artabr_recipe_ing_name'];
	} ?>

Чтобы все было красиво, добавляем нужные html-теги. Я обычно использую маркированный список:

 <?php $recipe_ing = CFS()->get('artabr_recipe_ing');
	echo '<ul>';
	foreach ($recipe_ing as $one_ingr) {
		echo '<li><p>'. $one_ingr['artabr_recipe_ing_count']. ' '. $one_ingr['artabr_recipe_ing_name'] .'</p></li>';
	}
	echo '</ul>'; ?>

Цикл инструкции по приготовлению создается аналогично, только еще добавляем вывод картинки шага:

<?php $recipe_step = CFS()->get('artabr_stepbystep');
	$i=0;
	echo '<ul>';
	foreach ($recipe_step as $step) {
		$i++;
		echo '<li class="row" ><h4>Шаг '.$i.' </h4><span class="img-step col-xs-6 col-md-4"><a href="'. $step['artabr_photo_step']. '"><img src="'. $step['artabr_photo_step']. '" class="gallery-item" alt="'. esc_html($step['artabr_text_step']) .'" title="'. esc_html($step['artabr_text_step']) .'" width="214" height="143"></a></span><span class="img-text col-xs-12 col-md-8" >'. $step['artabr_text_step'] .'</span></li>';
	}
	echo '</ul>'; ?>

Переменная $i — просто счетчик, чтобы считать шаги. В итоге получаем: шаг 1, шаг 2 и т.д.

к содержанию

Выводим время подготовки и время приготовления

Если вы внимательно смотрели третью серию, то знаете, что время надо указывать в минутах. Ну а чтобы эти минуты преобразовать в штатный формат — часы-минуты используем такие функции:

Пересчет времени из минут в часы

/**
 * Пересчет времени из минут в часы
 */
if ( ! function_exists( 'artabr_convert_minute_hour' ) ) {
	function artabr_convert_minute_hour( $time ) {
		$hours_postfix = '&nbsp;час';
		$minutes_postfix = '&nbsp;мин';
	    settype( $time, 'integer' );
	    if ( $time < 1 ) {
	        return;
	    }
	    $hours = floor( $time / 60 );
	    $minutes = $time % 60;
	    if ( $time < 60 ) {
	    	$content = $minutes . $minutes_postfix;
	    } else {
   		$content = $hours . $hours_postfix . '&ensp;' . $minutes . $minutes_postfix;
	    }
	    return $content;
	}
}

Подсчет общего времени

Данная функция понадобиться для внедрения микроразметки, значения функции нигде не выводяться
/**
 * Подсчет общего времени
 */
if ( ! function_exists( 'artabr_calc_total_cook_time' ) ) {
	function artabr_calc_total_cook_time() {
		global $post;
		$prep_time = (int) ( CFS()->get('artabr_recipe_prepTime'));
		$cook_time = (int) ( CFS()->get('artabr_recipe_cookTime') );
		$total_time = $prep_time + $cook_time;
		return $total_time;
	}
}

Функции добавляем в файл functions.php и теперь надо полученные значения вывести на странице рецепта

/* Передаем на вход функции пересчета времени значения полей времени и записываем их в переменные */
$prep_time = artabr_convert_minute_hour( CFS()->get('artabr_recipe_prepTime') ); // время подготовки
$cook_time = artabr_convert_minute_hour( CFS()->get('artabr_recipe_cookTime') ); // время приготовления

/* Выводим в нужном месте*/
/* Время на подготовку*/
<?php if ( $prep_time ) { ?>
	<span class="prep-time">
		<?php echo 'Время на подготовку: '; ?>
		<span class="the-time"><strong><span class="dashicons dashicons-clock"></span> <?php echo $prep_time; ?></strong></span>
	</span>
<?php } ?>
/* Время на приготовление*/
<?php if ( $cook_time ) { ?>
	<span class="cook-time">
		<?php echo 'Время приготовления: '; ?>
		<span class="the-time"><strong><span class="dashicons dashicons-clock"></span> <?php echo $cook_time; ?></strong></span>
	</span>
<?php } ?>
к содержанию

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

Внедрение микроразметки очень похоже на расстановку тегов. Требуется только расставить нужные теги (по другому — сущности) в нужных местах…

Единственный момент — это необходимо написать условие для вывода записей относящихся к разным рубрикам:

  • для рецептов должно выводиться itemscope itemtype="http://schema.org/Recipe"
  • для остальных записей itemscope itemtype="http://schema.org/Article"

Выглядит это примерно так

<?php if (in_category(1)) { ?> // указываем ID нужной рубрики
<div itemscope itemtype="http://schema.org/Recipe">
          <!-- Цикл вывода страницы записи рецептов-->
</div>
<?php } else { ?>
<div itemscope itemtype="http://schema.org/Article">
	 <!-- Цикл вывода страницы записи рецептов-->
</div>		
<? } ?>
к содержанию

Нужные сущности схемы Recipe

Рецепт itemscope itemtype="http://schema.org/Recipe"
	Метаданные рецепта
		Название itemprop="name"
		Автор itemprop="author"
		Дата публикации itemprop="datePublished"
		Фото результат itemprop="resultPhoto"
		Количество порций itemprop="recipeYield"
		Время на подготовку itemprop="prepTime"
		Время приготовления itemprop="cookTime"
		Общее время itemprop="totalTime"
		Метод приготовления itemprop="cookingMethod"
		Национальная кухня itemprop="recipeCuisine"
		Рубрика рецепта itemprop="recipeCategory"
	Основные данные рецепта 
		Описание рецепта itemprop="description"
		Ингредиенты рецепта itemprop="ingredients"
к содержанию

Места для расстановки

к содержанию

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

«Финт ушами» для микроразметки даты

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

<time datetime="<?php the_time('Y-m-d') ?>" itemprop="datePublished"></time>

Подставлять его надо рядом с функцией вывода даты

Функции конвертирования времени в формат ISO8601

Для пересчета времени используются похожие функции, что были описаны выше

Функция конвертирования минут в часы для микроразметки
/**
 * Пересчет времени в формат ISO8601
 */
if ( ! function_exists( 'schema_convert_minute_hour' ) ) {
	function schema_convert_minute_hour( $time ) {
		$hours_postfix = 'h';
		$minutes_postfix = 'm';
	    settype( $time, 'integer' );
	    if ( $time < 1 ) {
	        return;
	    }
	    $hours = floor( $time / 60 );
	    $minutes = $time % 60;
	    if ( $time < 60 ) {
	    	$content = $minutes . $minutes_postfix;
	    } else {
	   		$content = $hours . $hours_postfix . ' ' . $minutes . $minutes_postfix;
	    }
	    return $content;
	}
}
Пересчет времени подготовки
/**
 * Пересчет времени подготовки в формат ISO8601
 */
if ( ! function_exists( 'schema_prep_time' ) ) {
	function schema_prep_time() {
		global $post;
		$prep_time = schema_convert_minute_hour( CFS()->get('artabr_recipe_prepTime') );
		$prep_time_alt = strtoupper( str_replace( array( ' ', '-', ',' ), array( '' ), $prep_time ) );
		$prep_time_schema = 'PT' . $prep_time_alt;
		return $prep_time_schema;
	}
}
Конвертирование времени приготовления
/**
 * Время приготовления в формат ISO8601
 */
if ( ! function_exists( 'schema_cook_time' ) ) {
	function schema_cook_time() {
		global $post;
		$cook_time = schema_convert_minute_hour( CFS()->get('artabr_recipe_cookTime') );
		$cook_time_alt = strtoupper( str_replace( array( ' ', '-', ',' ), array( '' ), $cook_time ) );
		$cook_time_schema  = 'PT' . $cook_time_alt;
		return $cook_time_schema;
	}
}
Пересчет общего времени
/**
 * Пересчет общего времени в формат ISO8601
 */
if ( ! function_exists( 'schema_total_time' ) ) {
	function schema_total_time() {
		global $post;
		$total_time = schema_convert_minute_hour ( artabr_calc_total_cook_time() );
		$total_time_alt = strtoupper( str_replace( array( ' ', '-', ',' ), array( '' ), $total_time ) );
		$total_time_schema = 'PT' . $total_time_alt;
		return $total_time_schema;
	}
}

Вывод функций времени на странице рецепта

Результаты данных функций следует выводить в теге meta. Что не даст дублировать контент на странице рецепта. Примерно так

Время подготовки
<meta itemprop="prepTime" content="<?php echo schema_prep_time(); ?>">
Время приготовления
<meta itemprop="cookTime" content="<?php echo schema_cook_time(); ?>">
Общее время
<meta itemprop="totalTime" content="<?php echo schema_total_time(); ?>">
к содержанию

Заключение и нужные ссылки

к содержанию

Документация и ссылки

Плагин Custom Field Suite

Есть вопросы? Пишем в комментариях.

Всегда ваш, Артем

48 комментариев
  • Ирина

    03.09.2015

    Статья понравилась. Единственное — пара комментариев — в большинстве новых тем микроразметка для даты используется из коробки, и ничего добавлять не надо, а пользователи как правило ее удаляют вместе и с выводом даты. И второе — может быть, Вы подумаете о том, чтобы полностью дублировать видео текстом? Мне, например, намного удобнее читать, чем смотреть — и я уверена, я такая не одна. Еще раз спасибо за статью!

    • Артем

      03.09.2015

      Спасибо.
      Да, в новых часто встречается вообще разметка. Но чтобы именно дату размечали — это редко встречал. Ну и с датой есть нюанс — размечаться она должна по ISO , а русскоязычном инете чаще используется более привычный для нас формат, типа 1 сентября 2015. А иностранные разработчики не заморачиваются с разметкой, добавили тег и привет. Вот и приходиться финты ушами делать, чтобы и пользователям было удобно и разметка была.
      Постараюсь более подробно дублировать. Хотя мне у вас, как у серьезного разработчика, еще учиться и учиться, но если есть вопросы то я завсегда.

      Пожалуйста. Рад оказаться полезным

  • Денис

    25.12.2015

    Добрый день! Подскажите пожалуйста, если у шага в инструкции не добавляется изображение, то как убрать вывод alt текста? Если нет изображение у любого шага, то на месте где оно должно быть, появляется рамка, а в ней описание alt. Вот хотелось бы этого избежать… Если добавил изображение, то оно показывается, а если нет, то ничего не выводить в этом месте. Заранее благодарен. Статья очень хорошая, долго искал как сделать разметку для кулинарного сайта.

    • Артем

      25.12.2015

      Добрый день! А картинка в шаге как выводится? Через поля?

      • Денис

        25.12.2015

        Да по Вашей инструкции все делаю. Картинка выводится через поля, только если я не добавляю к какому нибудь шагу картинку, то выводится рамка и в ней alt текст с описанием шага…

  • Денис

    25.12.2015

    Использовал эту конструкцию для вывода шагов и картинок к ним :

    get('artabr_stepbystep');
    	$i=0;
    	echo '';
    	foreach ($recipe_step as $step) {
    		$i++;
    		echo 'Шаг '.$i.' '. $step['artabr_text_step'] .'';
    	}
    	echo ''; ?>
    
    • Артем

      25.12.2015

      Вопрос вот в чем: почему вообще появляется alt без картинки? Если картинка не загружена, то и выводится ничего не должно,а если выводится просто рамка, значит путь к картинке не правильно задан или выводится. Ну и можно еще условие прописать: если поле заполнено то выводим, если нет, то не выводим. Получается что-то вроде такого

      < ?php $recipe_step = CFS()->get('artabr_stepbystep');
            if ($recipe_step) {
      	$i=0;
      	echo '
        '; foreach ($recipe_step as $step) { $i++; echo '
      • Шаг '.$i.'

        '. esc_html($step['artabr_text_step']) .''. $step['artabr_text_step'] .'
      • '; } echo '
      '; } ?>
    • Артем

      25.12.2015

      А! Если надо только на наличие картинки проверять, то можно так

      < ?php $recipe_step = CFS()->get('artabr_stepbystep');
           if ($recipe_step) {
      	$i=0;
      	echo '
        '; foreach ($recipe_step as $step) { $i++; ?>
      • Шаг < ?php echo $i; ?>

        < ?php if ($step['artabr_photo_step']) { ?> " rel="nofollow"> < ?php echo esc_html($step['artabr_text_step']); ?> < ?php } ?> < ?php echo $step['artabr_text_step']; ?>
      • '; < ?php } ?>
      < ?php } ?>

      В итоге получаем 2 проверки: на наличие всех полей и только картинки

      • Денис

        25.12.2015

        Ооо, Вот теперь то что надо. Вы меня прямо спасли от бессонной ночи )))))) Теперь все заработало так как и хотелось… Очень Вам благодарен!!!
        Теперь можно дальше статью изучать и внедрять )))

        • Артем

          25.12.2015

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

  • Денис

    26.12.2015

    Здравствуйте Артем! У меня еще есть вопрос. Может быть это особенность моего шаблона, но почему у меня в поле «время приготовления» часы и минуты показываются на латинице (1h 25m). Хотелось бы, чтобы на русском было )))

    • Денис

      26.12.2015

      Все разобрался, я в коде допустил ошибку )) А функции, которые у Вас в видео показаны, не все выложены в статье, я правильно понимаю?

      • Артем

        26.12.2015

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

        В принципе все те же функции времени есть и в этой статье Там даже все виде плагина есть….

  • Денис

    02.01.2016

    Добрый день Артем! Поздравляю с Новым 2016 годом!!!
    Подскажите пожалуйста, если возможность вывести в сайдбаре список статей например по кухне или ингредиентам?
    Заранее благодарю!

    • Артем

      02.01.2016

      Добрый день! И вас с праздниками!
      Если кухня или ингредиенты выведены полями то можно, хотя с кухней сложнее, там поля повторяющиеся, геморно. А вот с простыми полями без проблем — просто штатным циклом по полям http://wp-kama.ru/function/wp_query

      • Денис

        02.01.2016

        Получается, что вывести статьи по определенным произвольным полям, которые выводит плагин не получится?
        Все поля выведены через плагин. Хотелось выводить статьи по определенным полям в сайдбаре.
        А стандартные произвольные поля из wordpress можно штатными средствами. Правильно понимаю?

        • Артем

          02.01.2016

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

          function employ_short() {
          ob_start();
          	$args_meb = array(
          	'post_type' => 'employ',
          	'posts_per_page' => -1,
          	'orderby' => 'meta_value',
          	'order' => 'ASC',
          	'meta_key' => 'round_employ'
          	);
          $query = new WP_Query( $args_meb );
          	 if ( $query->have_posts() ) { ?>
          		 
          < ?php while ( $query->have_posts() ) { $query->the_post();?> < ?php } wp_reset_postdata(); ?>
          < ?php } $myvariable = ob_get_clean(); return $myvariable; } add_shortcode('employee', 'employ_short');
          • Денис

            02.01.2016

            Спасибо Артем! Ну и код конечно ))) Попробую разобраться что к чему в нем….

          • Артем

            02.01.2016

            Пожалуйста. В принципе ничего сложного, это основная функция вывода записей WP_Query. Почитайте, у Камы хорошее полное описание http://wp-kama.ru/function/wp_query

  • Виктория

    12.02.2016

    Спасибо! Оооооочееень полезно и все понятно!

  • Сергей

    26.02.2016

    Странно, у меня почему-то не выводятся в записях произвольные поля. Делал все по инструкции.
    А могут конфликтовать между собой 2 плагина произвольных полей?

    • Артем

      26.02.2016

      Запросто, если названия полей одинаковые. А зачем использовать 2 плагина?

      • Сергей

        26.02.2016

        У меня давно уже стоит плагин «Advanced Custom Fields», через него у меня выводится произвольное поле description.
        Сейчас поставил плагин, который рассматривается в данной статье, но в статьях произвольные поля через него не выводятся.

        • Артем

          26.02.2016

          Хм. видимо конфликт между плагинами. А сео плагины у вас не используются? Зачем через ACF выводить 1 поле? Попробуйте отключить ACF и сделать тоже самое поле description, но уже через другой плагин. Если названия полей одинаковые, то данные сохранятся… Или просто пробуйте выключить ACF посмотрите что произойдет.
          Может быть еще момент. Если вы привязывали поля к определенной рубрике, а в ней нет записей, то естественно и поля не будут показываться. Проверьте рубрику на наличие в ней записей

          • Сергей

            26.02.2016

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

          • Артем

            26.02.2016

            Пожалуйста

  • Денис

    26.03.2016

    Артем, а если произвольные поля нужны на рубрику как это реализовать?

    Ситуация такая — есть произвольные типы записей, в них категории(рубрики) и на эти категории(рубрики) нужны три произвольных поля(описание). Задача чтобы при добавлении рубрики можно было описать рубрику. У меня получается в шапке описание, верхнее описание рубрики и под циклом уже большое описание.

    • Артем

      26.03.2016

      Хороший вопрос. Сделать сие возможно, но надо кодить, вот пример
      Или использовать плагин Advanced Custom Fields для него есть отдельный аддон

      • Денис

        26.03.2016

        Благодарю за ответ и за полезную ссылку на Custom Meta — пойду этим путем. Advanced Custom Fields согласен, но он не встает на мою тему почему то, точнее встает, но не работает, не отображает, сейчас разбираюсь.

          • Денис

            27.03.2016

            Все таки сделал через Advanced Custom Fields, втулил отличный функционал на рубрики, заказчик остался довольный. Но есть некоторые особенности по рубрикам и категориям таксономий , возможно кому то пригодится.

            Первое — расширение Advanced Custom Fields Categories не требуется. Плагин Advanced Custom Fields работает и на рубрики нормально и на термины таксономий.

            Второе — если в записях произвольные поля выводятся вот так —

            , то с рубриками и категориями это не прокатит. Если вы хотите вывести произвольное поле в рубрике, то структура кода сложнее —

            taxonomy;$term_id = $queried_object->term_id; the_field(‘ваше_произвольное_поле’, $taxonomy . ‘_’ .$term_id); ?>.

            Для тех кто шарит пхп, ничего сложного. Например, у меня в рубрике в шапке меняется фон. Создается произвольное поле в Advanced Custom Fields (изображение ссылкой), и на див я написал функцию с проверкой:

            <div class="banner-page" style="background: url(taxonomy;$term_id = $queried_object->term_id; if( get_field(‘ваше_произвольное_поле’, $taxonomy . ‘_’ .$term_id) ): ?>taxonomy;$term_id = $queried_object->term_id; the_field(‘ваше_произвольное_поле’, $taxonomy . ‘_’ .$term_id); ?>/ссылка-на-изображение, если произвольное поле не задано.jpg);background-position: 50% 0; background-repeat: no-repeat;»>

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

            Кончено сложно, но работает нормально. Неплохо бы было записать видео урок по данному вопросу, особенно интересует как сделать слайдер через произвольные поля. Плагин Custom Field Suite очень понравился, основное преимущество — есть циклы.

          • Артем

            27.03.2016

            Логично, что просто так не получится вывести, надо таксономию указывать…
            Чтобы код не резался его надо в теги pre заключать, все никак руки не дойдут)))

          • Денис

            27.03.2016

            Коммент порезался с пхп, жаль…

      • Денис

        27.03.2016

        Да поставьте http://cackle.me/ комменты и все, они интегрированы с ВП или Дискус.

        • Артем

          27.03.2016

          Не сильно они интегрированы, тоже надо с бубном настраивать… Да и не хочу)))

  • Алексей

    23.08.2016

    Здравствуйте, подскажите как вместо размера катринки width=»214″ height=»143″ вывести миниатюру thumbnail?

    • Артем

      24.08.2016

      Добрый день! Штатными средствами можно, через функцию the_post_thumbnail

  • Алексей

    24.08.2016

    Я пытаюсь вставить вместо ширины и высоты вот это но ничего не получается. Пожалуйста помогите разобраться.
    Это код в цикле которым вывожу картинку:

    • Алексей

      24.08.2016

      Почему то код не добавился (

      • Артем

        24.08.2016

        Для вставки кода надо тег pre использовать
        Я так понимаю в переменной $step['img_kuzov_detal'] находится ссылка на картинку? Если да то размеры получить будет сложно, но возможно.
        Например, значение этой переменной прогонять через функцию attachment_url_to_postid и уже потом получать значения картинки (ссылку и размеры) штатным функционалом ВП.
        Или в настройках поля сразу установить получение ID картинки и уже с ним работать

  • Ирина

    24.08.2016

    Добрый день!
    Подскажите, а можно как-то реализовать вывод ингредиентов в одном поле?
    Т.е. сейчас нужно каждый ингредиент прописать в свое поле. А просто списком в одном поле нельзя задать?
    При подходе «1 ингредиент — 1 поле» — процесс размещения рецепта растягивается в разы.

    • Артем

      24.08.2016

      Добрый! Создаете большое поле (textarea) и можно списком прописать. Только станется момент с разметкой, я уже не помню, но по Яндексу вроде каждый ингредиент должен быть обозначен

  • Денис

    02.11.2016

    Здравствуйте, Артем!
    Хочу поблагодарить вас за столь подробный и нужный урок. Делал всё по вашей инструкции. Почти всё сделал, получается здорово, но единственное: подскажите где размещать все функции по времени (кроме Вывод функций времени на странице рецепта)?

    • Артем

      02.11.2016

      Добрый день! Данные функции надо размещать в файле function.php

  • Сергей

    15.04.2017

    Здравствуйте, Артем. Сделал как на видео и в этой инструкции. Только не понятно, как скрыть подзаголовки «Ингредиенты» и «Инструкция» в записях, которые находятся в других рубриках, а не в рецептах. Подскажите пожалуйста.

    • Артем

      19.04.2017

      Добрый день! Через условие прописывать, проверять в нужной рубрике запись значит выводить, нет — не выводить. Готовое решение сложно написать, не понятно как и что у вас сделано

  • Дмитрий

    10.06.2017

    Все сделал, как вы описали в статье, и все получилось, очень выручило видео.

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

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