Система лэйблов (new, hit, sale и т.п.)

Создаем на сайте систему лэйблов (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) описано тут.

Поделиться в соц. сетях: