Создаем на сайте систему лэйблов (new, hit, sale и т.п.) для дополнительной маркировки записей. Данный функционал может получить применение в самых разных сферах.
Концепция на основе таксономии
Добавляем пользовательскую таксономию «лэйблов», в файл functions.php
// Таксономия - лэблы NEW, HIT, SALE и т.п. function label_taxonomies() { /* создаем функцию с произвольным именем и вставляем в неё register_taxonomy() */ register_taxonomy('label', array('track', 'post'), array( 'hierarchical' => false, /* true - по типу рубрик, false - по типу меток, по умолчанию - false */ 'labels' => array( /* ярлыки, нужные при создании UI, можете не писать ничего, тогда будут использованы ярлыки по умолчанию */ 'name' => 'Лэйбл', 'singular_name' => 'Лэйбл', 'search_items' => 'Найти лэйбл', 'popular_items' => 'Популярные лэйблы', 'all_items' => 'Все лэйблы', 'parent_item' => null, 'parent_item_colon' => null, 'edit_item' => 'Редактировать лэйбл', 'update_item' => 'Обновить лэйбл', 'add_new_item' => 'Добавить новый лэйбл', 'new_item_name' => 'Название нового лэйбла', 'separate_items_with_commas' => 'Разделяйте лэйблы запятыми', 'add_or_remove_items' => 'Добавить или удалить лэйбл', 'choose_from_most_used' => 'Выбрать из наиболее часто используемых лэйблов', 'menu_name' => 'Лэйблы' ), 'public' => true, /* каждый может использовать таксономию, либо только администраторы, по умолчанию - true */ 'show_in_nav_menus' => true, /* добавить на страницу создания меню */ 'show_ui' => true, /* добавить интерфейс создания и редактирования */ 'show_tagcloud' => true, /* нужно ли разрешить облако тегов для этой таксономии */ 'update_count_callback' => '_update_post_term_count', /* callback-функция для обновления счетчика $object_type */ 'query_var' => true, /* разрешено ли использование query_var, также можно указать строку, которая будет использоваться в качестве него, по умолчанию - имя таксономии */ 'rewrite' => array( /* настройки URL пермалинков */ 'slug' => 'label', // ярлык 'hierarchical' => false // разрешить вложенность ), ) ); } add_action( 'init', 'label_taxonomies', 0 );
При этом вывод post_class() изменится и добавятся классы новой таксономии: .label-new, .label-sale, .label-hit
Скрипт JQuery
$(document).ready(function() { // Лэйблы NEW, HIT, SALE и т.п. $('.label-new, .label-sale, .label-hit').prepend('<div class="label"></div>'); $('.label-new .label').append('<p class="new">NEW</p>'); $('.label-hit .label').append('<p class="hit">HIT!</p>'); $('.label-sale .label').append('<p class="sale">SALE</p>'); });
CSS
.label {position: absolute; z-index: 9; width: 45px;}
.label p {
float: left;
position: relative;
width: 100%;
color: #fff;
padding: 5px 5px 5px 20px;
margin: 5px 0 5px -10px;
box-shadow: 2px 2px 4px rgba(17, 17, 17, 0.5);
border-radius: 0px 5px 5px 0px;
}
.hit {background-color: red;}
.hit:before {
content: '';
position: absolute;
bottom: -10px;
left: 0px;
border: 10px solid transparent;
border-top-color: rgb(178, 20, 0);
border-bottom: 0;
border-right: 0;
}
.new {background-color: limegreen;}
.new:before {
content: '';
position: absolute;
bottom: -10px;
left: 0px;
border: 10px solid transparent;
border-top-color: rgb(41, 119, 9);
border-bottom: 0;
border-right: 0;
}
.sale {background-color: yellow; color: #000 !important;}
.sale:before {
content: '';
position: absolute;
bottom: -10px;
left: 0px;
border: 10px solid transparent;
border-top-color: rgb(221, 168, 0);
border-bottom: 0;
border-right: 0;
}
Система лэйблов на woocommerce
Woocommerce уже наделен неким набором лэйблов, но их в основном требуется доработать. В вышеупомянутой статье про новинки я затрагивал тему и про товар. Далее необходимо оформить Рекомендованные товары (features) и Акции.
Скрипт:
$(document).ready(function() { // Лэйблы NEW, HIT, SALE и т.п. для woocommerce $('.products .new a > .label, .new #product-gallery > .label').prepend('NEW'); $('.products .product.featured a > .label, .featured #product-gallery > .label').prepend('ХИТ!'); });
Стили:
/* Система лэйблов woocommerce */
.label {top: 15px; position: absolute; z-index: 9; width: 50px; font-size: 12px;}
.products .product .label span, #product-content .label span {
position: relative;
left: 0;
top: 0;
float: left;
text-align: center;
color: #fff;
padding: 2px 5px 1px 10px;
margin: 5px 0 5px -10px !important;
box-shadow: 2px 2px 4px rgba(17, 17, 17, 0.5);
border-radius: 0px 3px 3px 0px;
width: 50px;
min-height: 0;
line-height: 20px;
z-index: 9;
}
.products .product .label span.onsale:before, #product-content .label span.onsale:before,
.products .product .label span.onnew:before, #product-content .label span.onnew:before,
.products .product .label span.onhit:before, #product-content .label span.onhit:before,
.products .product .label span.ondis:before, #product-content .label span.ondis:before {
content: '';
position: absolute;
bottom: -10px;
left: 0px;
border: 10px solid transparent;
border-bottom: 0;
border-right: 0;
}
.products .product .label span.onsale,
#product-content .label span.onsale {background-color: #0c54a0;}
.products .product .label span.onsale:before,
#product-content .label span.onsale:before {border-top-color: rgb(7, 53, 103);}
.products .product .label span.onnew,
#product-content .label span.onnew {background-color: #63bd11;}
.products .product .label span.onnew:before,
#product-content .label span.onnew:before {border-top-color: rgb(41, 119, 9);}
.products .product .label span.onhit,
#product-content .label span.onhit {background-color: #F72F2F;}
.products .product .label span.onhit:before,
#product-content .label span.onhit:before {border-top-color: rgb(178, 20, 0);}
Концепция на основе логики
Намного интереснее и правильней, когда лэйблы назначаются автоматически. Если запись новая — NEW, если запись/страница популярная — HIT, и так далее. Мне этого удалось добиться в некоторых случаях: новые записи, популярные записи. Также можно добавлять дополнительные лэйблы с помощью стандартных меток, не прибегая к дополнительной таксономии.
В скрипте это будет выглядеть так, где label — это добавленная метка:
$('.products .product_tag-label a > .label, .product_tag-label #product-gallery > .label').prepend('LABEL');
Или например, мы хотим сделать новым товар, который по факту не новый (не по дате, не по порядку добавления). Прописываем ему метку new, и немного меняем скрипт:
$('.products .new a > .label, .new #product-gallery > .label, .products .product_tag-new a > .label, .product_tag-new #product-gallery > .label').prepend('NEW');
Общий лэйбл таксономии
Как вывести общий лэйбл для всех терминов таксономии описано в статье Технология акций на Woocommerce.
Как создать вышеописанный функционал на функциях WordPress (PHP) описано тут.
[site-socialshare]