Часто на новостных (и не только) сайтах можно заметить в ленте разнообразные пометки возле заголовков, типа "Breaking", "Эксклюзив" или значки фото либо видео. Как можно организовать вывод материалов с пометками "важное", "видео", "фото" на сайте WordPress?
Не буду детально описывать процесс для новичков - ожидается, что определённый багаж знаний по WordPress у вас уже имеется. Так же будет плюсом наличие на сайте подключенного шрифта FontAwesome, но это уже, как говорится, для красоты.
Для начала в файле functions.php необходим добавить такой код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
add_action( 'init', 'build_taxonomies', 0 ); function build_taxonomies() { register_taxonomy( 'label', // название таксономии на латинице 'post', array( 'hierarchical' => true, // на подобие таксономии рубрик, удобно 'label' => 'Вид материала', // название таксономии 'query_var' => true, 'rewrite' => true ) ); } |
Это минимум кода, необходимого нам. На самом деле там можно много чего указывать в этой функции.
После этой нехитрой манипуляции в разделе меню админки "Записи" появится новый пункт с пользовательской таксономией под названием "Вид материала". Давайте добавим в неё несколько пометок для новостей:
- молния
- эксклюзив
- фото
- видео
- важное
Следующим этапом будет добавление к нужной новости нашей пометкой. Просто откройте готовую новость либо создайте новую запись и где-то справа вы сможете увидеть блок выбора под названием "Вид материала". Поставьте галочку как в случае с рубриками и за новостью будет закреплён наш новый вид.
Теперь нам осталось только добавить выбранный вид материала в ленту новостей перед или после заголовка. Тут уже дело вкуса. Рассмотрим три варианта вывода заголовка новости в ленте для новостей с видом материала "Важное".
- Жирный шрифт/цветной шрифт
- Иконка перед/после заголовка
- Слова после/перед заголовком
Для дальнейшей работы предусмотрено, что вы пользуетесь моей функцией для вывода новостной ленты, описанной в заметке "WordPress. Вывод материалов как на новостных сайтах".
1. Жирный шрифт/цветной шрифт.
Первый вариант самый простой. Нам нужно перед выводом заголовка новости проверить, выбран ли для этой новости наш пользовательский "Вид материала". Для этого после строки
|
1 |
$class = ( !empty( $highlight ) && in_array( $highlight, $tag_ids ) ) ? ' class="important"' : '' ; ?> |
дописать такое:
|
1 2 3 4 5 6 7 8 9 10 11 |
$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 в вашем шаблоне) указать, какие стили мы присвоим классам:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
/* если вам необходим жирный шрифт для заголовка, то раскомментируйте строку 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, то сделаем следующие изменения в коде нашей функции:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$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 = ''; } } } |
Дальше в нашей функции ищем строки, отвечающие за вывод новостных заголовков:
|
1 2 3 4 |
<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> |
и делаем такие превращения
|
1 2 3 4 5 6 7 8 |
<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> |
Теперь наша лента будет иметь примерно такой вид:
Цвет иконок можно задать в таблице стилей примерно так:
|
1 2 3 4 |
li > i.fa, li > .labels { color:#ccc; } |
3. Слова после/перед заголовком.
Здесь всё аналогично второму варианту, только вместо иконок мы выводим названия видов материалов.
|
1 2 3 4 5 6 7 8 |
$terms = wp_get_post_terms( $theid,'label' ); // получить список Видов материала, выбранных в новости $labels = '<span class="labels">'; if( $terms && ! is_wp_error($terms) ){ foreach( $terms as $term ){ $labels .= $term->name.' '; // получить имена видов материалов } } $labels .= '</span>'; |
Соответственно, при выводе списка новостей мы прикрепляем название вида материала в начало или конец пункта списка:
|
1 2 3 4 5 6 7 8 9 |
$terms = wp_get_post_terms( $theid,'label' ); // получить список Видов материала, выбранных в новости $labels = ''; if( $terms && ! is_wp_error($terms) ){ $labels = '<span class="labels">'; foreach( $terms as $term ){ $labels .= $term->name.' '; // получить имена видов материалов } $labels .= '</span>'; } |
Вывод наших меток можно преобразить по своему вкусу. Например:
|
1 2 3 4 5 6 |
li > .labels { background-color:#ccc; color:#fff; margin:0 3px; padding:3px; } |
Тогда получится такое:
- Молния Что-то произошло где-то дико далеко
- Фото Рано утром какая-то новость появилась
- Эксклюзив Полуночный материал
- Что-то произошло где-то дико далеко Молния
- Рано утром какая-то новость появилась Фото
- Полуночный материал Эксклюзив
Итоги.
Таким нехитрым способом мы можем помечать нашу ленту новостей нужными "лейбами". Перечень использования такой таксономии довольно обширный: от пометки рекламных материалов, до пометки важных.
Пожертвовать мне на кофе 3USD:
Спасибо большое за такой нужный код. Жаль, у меня знаний не хватает, чтобы реализовать в полной мере. Если с отображением по тегам получилось, то тут никак :( Либо стиль сразу применяется ко всем новостям, либо вообще не применяется. (Пример 1). Можете на конкретном примере показать, что и куда? Например, вид материала exclusive, стиль breaking.
Вообще предусмотрено, что стиль ставится по названию вида материала. То есть, если вид материала exclusive, то новость выведется с классом .exclusive. А вообще дайте ссылку, я посмотрю, скорее всего, где-то что-то упустили.
Что касается кода, порядок тот же, что Вы навели в примере, но недостаточно знаний никак не позволяют реализовать. Или хотя бы понять принцип :( Вот и получается, что есть лишь вид материала 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 . ‘”‘; ?>
Исправил ошибки в своём коде. В вашем необходимо поменять
$styles .= ' exclusive ' . $term->slug . ' exclusive ';на
$styles .= ' ' . $term->slug . ' ';Уведомление: Wordpress. Вывод материалов как на новостных сайтах