WordPress. Вывод материалов с пометками "важное", "видео", "фото".

| 11 |

Часто на новостных (и не только) сайтах можно заметить в ленте разнообразные пометки возле заголовков, типа "Breaking", "Эксклюзив" или значки фото либо видео. Как можно организовать вывод материалов с пометками "важное", "видео", "фото" на сайте WordPress?

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

Для начала в файле functions.php необходим добавить такой код:

add_action( 'init', 'build_taxonomies', 0 );
function build_taxonomies() {
    register_taxonomy( 
		'label', // название таксономии на латинице
		'post', 
		array( 
			'hierarchical' => true, // на подобие таксономии рубрик, удобно
			'label' => 'Вид материала', // название таксономии 
			'query_var' => true, 
			'rewrite' => true 
		) 
	);
}

Это минимум кода, необходимого нам. На самом деле там можно много чего указывать в этой функции.

После этой нехитрой манипуляции в разделе меню админки "Записи" появится новый пункт с пользовательской таксономией под названием "Вид материала". Давайте добавим в неё несколько пометок для новостей:

  • молния
  • эксклюзив
  • фото
  • видео
  • важное

Следующим этапом будет добавление к нужной новости нашей пометкой. Просто откройте готовую новость либо создайте новую запись и где-то справа вы сможете увидеть блок выбора под названием "Вид материала". Поставьте галочку как в случае с рубриками и за новостью будет закреплён наш новый вид.

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

  1. Жирный шрифт/цветной шрифт
  2. Иконка перед/после заголовка
  3. Слова после/перед заголовком

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

1. Жирный шрифт/цветной шрифт.

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

$class = ( !empty( $highlight ) && in_array( $highlight, $tag_ids ) ) ? ' class="important"' : '' ; ?>

дописать такое:

$terms = wp_get_post_terms( $theid,'label' ); // получить список Видов материала, выбранных в новости
$styles = '';
if( $terms && ! is_wp_error($terms) ){
	foreach( $terms as $term ){
		$styles .= ' ' . $term->slug . ' '; // сформировать строку из названий классов 
// например, будет строка "breaking photo ", то есть для названия классов мы используем значения поля "Ярлык" для каждого вида нашего материала
	}
}
$class = ( strlen($class) > 0 ) ? mb_substr($class, 0, strlen($class)-1) . $styles . '"' : ' class="' . $styles . '"';
// мы добавляем к существующей строке $class (она нужна для стилизации вывода заголовка в ленте, см. код функции) наши новые классы
// получится что-то вроде class="important breaking photo" (если перед этим был указан class="important")

Осталось только в таблице стилей (например, это файл styles.css в вашем шаблоне) указать, какие стили мы присвоим классам:

/* если вам необходим жирный шрифт для заголовка, то раскомментируйте строку font-weight:bold */
.breaking,
.exclusive,
.important,
.photo,
.video {
 /* font-weight:bold; */
}

.breaking,
.breaking a {
 color:#c00; /* красный текст */
}
.exclusive,
.exclusive a {
 color:#0c0; /* зелёный текст */
}
.important,
.important a {
 color:#00c; /* синий текст */
}
.photo,
.video,
.photo a,
.video a {
 color:#aaa; /* серый текст */
}

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

2. Иконка перед/после заголовка.

Если в вашей теме подключён шрифт с иконками FontAwesome, то сделаем следующие изменения в коде нашей функции:

$terms = wp_get_post_terms( $theid,'label' ); // получить список Видов материала, выбранных в новости
$icons = '';
if( $terms && ! is_wp_error($terms) ){
 foreach( $terms as $term ){
  switch ($term->slug) {
   case 'important': $icons = '<i class="fa fa-warning"></i> '; break;
   // иконки берём здесь: http://fontawesome.io/cheatsheet/
   case 'video': $icons = '<i class="fa fa-video-camera"></i> '; break;
   case 'breaking': $icons = '<i class="fa fa-flash"></i> '; break;
   case 'photo': $icons = '<i class="fa fa-photo"></i> '; break;
   case 'exclusive': $icons = '<i class="fa fa-check-circle"></i> '; break;
   default: $icons = '';
  }
 }
}

Дальше в нашей функции ищем строки, отвечающие за вывод новостных заголовков:

 <li<?php echo $class ?>>
  <?php if ($time) { ?><time datetime="<?php the_time('Y-m-d') ?>"><?php echo get_the_time( 'G:i', $theid ) ?></time><?php } ?>
  <a href="<?php echo get_permalink( $theid ) ?>" title="Читать: <?php the_title_attribute(); ?>"><?php the_title(); ?></a>
 </li>

и делаем такие превращения

 <li<?php echo $class ?>>
  <?php if ($time) { ?><time datetime="<?php the_time('Y-m-d') ?>"><?php echo get_the_time( 'G:i', $theid ) ?></time><?php } ?>
  <?php // здесь пишем, если хотим, чтобы иконки выводились ДО заголовка
  echo $icons; ?>
  <a href="<?php echo get_permalink( $theid ) ?>" title="Читать: <?php the_title_attribute(); ?>"><?php the_title(); ?></a>
  <?php // а чтобы ПОСЛЕ, раскомментируйте следующую строку
  // echo $icons; ?>
 </li>

Теперь наша лента будет иметь примерно такой вид:

Цвет иконок можно задать в таблице стилей примерно так:

li > i.fa,
li > .labels {
 color:#ccc;
}

3. Слова после/перед заголовком.

Здесь всё аналогично второму варианту, только вместо иконок мы выводим названия видов материалов.

$terms = wp_get_post_terms( $theid,'label' ); // получить список Видов материала, выбранных в новости
if( $terms && ! is_wp_error($terms) ){
$labels = '<span class="labels">'; foreach( $terms as $term ){ $labels .= $term->name.' '; // получить имена видов материалов }
$labels .= '</span>'; }

Соответственно, при выводе списка новостей мы прикрепляем название вида материала в начало или конец пункта списка:

<li<?php echo $class ?>>
<?php if ($time) { ?><time datetime="<?php the_time('Y-m-d') ?>"><?php echo get_the_time( 'G:i', $theid ) ?></time><?php } ?>
<?php // здесь пишем, если хотим, чтобы иконки выводились ДО заголовка echo $labels; ?>
<a href="<?php echo get_permalink( $theid ) ?>" title="Читать: <?php the_title_attribute(); ?>"><?php the_title(); ?></a>
<?php // а чтобы ПОСЛЕ, раскомментируйте следующую строку // echo $labels; ?>
</li>

Вывод наших меток можно преобразить по своему вкусу. Например:

li > .labels {
 background-color:#ccc;
 color:#fff;
 margin:0 3px;
 padding:3px;
}

Тогда получится такое:

Итоги.

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

Якщо вам сподобався чи став у нагоді текст, ви завжди можете віддячити! Закинути на каву

11 комментариев

  1. Андрей says:
    09.12.2017 в 17:38

    Спасибо большое за такой нужный код. Жаль, у меня знаний не хватает, чтобы реализовать в полной мере. Если с отображением по тегам получилось, то тут никак :( Либо стиль сразу применяется ко всем новостям, либо вообще не применяется. (Пример 1). Можете на конкретном примере показать, что и куда? Например, вид материала exclusive, стиль breaking.

    • Стас Пономарёв says:
      09.12.2017 в 17:58

      Вообще предусмотрено, что стиль ставится по названию вида материала. То есть, если вид материала exclusive, то новость выведется с классом .exclusive. А вообще дайте ссылку, я посмотрю, скорее всего, где-то что-то упустили.

  2. Андрей says:
    12.12.2017 в 4:31

    Что касается кода, порядок тот же, что Вы навели в примере, но недостаточно знаний никак не позволяют реализовать. Или хотя бы понять принцип :( Вот и получается, что есть лишь вид материала exclusive, а вот где его прописать, чтоб получить результат… Попытки разобраться закончились провалом))

    $tag_ids = wp_get_post_tags( $theid, array( ‘fields’ => ‘ids’ ) ); // получаем ID всех тегов поста
    $class = ( !empty( $highlight ) && in_array( $highlight, $tag_ids ) ) ? ‘ class=»important»‘ : » ;

    $terms = get_terms( ‘label’ );
    if( $terms && ! is_wp_error($terms) ){
    foreach( $terms as $term ){
    $styles .= ‘ exclusive ‘ . $term->slug . ‘ exclusive ‘;
    }
    }
    $class = ( strlen($class) > 0 ) ? mb_substr($class, 0, strlen($class)-1) . $styles . ‘»‘ : ‘ class=»‘ . $styles . ‘»‘; ?>

    • Стас Пономарёв says:
      12.12.2017 в 7:46

      Исправил ошибки в своём коде. В вашем необходимо поменять
      $styles .= ' exclusive ' . $term->slug . ' exclusive ';
      на
      $styles .= ' ' . $term->slug . ' ';

  3. […] UPD. Кому интересно, на основе этой функции я расписал WordPress. Вывод материалов с пометками "важное", "видео", "фо… […]

  4. Александр says:
    16.08.2019 в 18:11

    Подскажите, пожалуйста, получилось нормальное отображение списка новостей. Но, в конце страницы выводит все новости целиком

  5. Татьяна says:
    15.02.2020 в 18:57

    С кодом вывода новостей (который на github) этот метод не работает :(

  6. Стас Пономарёв says:
    25.02.2020 в 22:26

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

  7. Ярослав says:
    03.01.2022 в 13:56

    Код не работает((( как можно связатся?

    • Стас Пономарёв says:
      31.01.2022 в 9:57

      читайте комментарии, смотрите репозиторий, ищите где ошибка) или за вас нужно всё сделать?)

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

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