Лэйблы используя PHP

Как делать создание лэйблов налету средствами jQuery используя post_class описано здесь. В данной статье сделаем вывод подобных лэйблов средствами WordPress (PHP). Данный способ даст более гибкий и универсальный подход к данному функционалу.

Вывод лэйблов

Выводим блок лэйблов, только у тех записей у которых назначены метки. Можно использовать как в категории, так и в шаблоне записи.

<?php if( has_tag() ) { 
echo '<div class="labels">';
$posttags = get_the_tags();
foreach( $posttags as $tag ){
	echo '<div class="label-'.$tag->slug.'">'.$tag->name.'</div>';
}
echo '</div>';
} ?>

Стили:

.labels {
    top: 15px;
    left: 15px;
    position: absolute;
    z-index: 9;
    font-size: 0.8rem;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

.labels > div {
    position: relative;
    background: #fff;
    margin-right: 15px;
    margin-bottom: 15px;
    padding: 5px 15px;
}	

Для каждой метки можно настроить индивидуальные стили.

Лэйблы у товаров

Создадим единую функцию для категории и для карточки товара:

// Вывод лэйблов
function insert_labels_product() {
	global $product;
	$producttags = wp_get_object_terms($product->get_ID(), 'product_tag');
	if (!empty($producttags) || $product->is_on_sale() == 1 || $product->is_featured() == 1 ) {
		echo '<div class="labels">';
			if ( $product->is_on_sale() ) { echo '<div class="onsale">Акция!</div>'; }
			if ( $product->is_featured() ) { echo '<div class="onhit">Хит</div>'; }
			foreach( $producttags as $tag ){
				echo '<div class="label-'.$tag->slug.'">'.$tag->name.'</div>';
			}
		echo '</div>';
	}
}

add_action( 'woocommerce_before_shop_loop_item_title', 'insert_labels_product', 10 );
add_action( 'woocommerce_before_single_product_summary', 'insert_labels_product', 10 );

Эта функция включает вывод автоматических меток Распродажа! (on_sale, товар с акционной ценой) и Рекомендуемый (featured). Поэтому стандартный вывод лэйбла Распродажа! отключим в шаблонах:

remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 10 );
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_sale_flash', 10 );

Стили для лэйблов у товаров:

.labels {
    top: 5px;
    left: 0;
    position: absolute;
    z-index: 9;
    font-size: 0.8rem;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

.labels > div {
    position: relative;
    background: #5f498b;
    color: #fff;
	box-shadow: 2px 2px 4px rgba(17, 17, 17, 0.5);
    border-radius: 3px 3px 3px 0px;
    width: 75px;
	margin: 5px 50% 5px -10px;
    line-height: 20px;
	font-weight: 600;
	padding: 2px 5px 1px 10px;
}

.labels > div:before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0px;
    border: 10px solid transparent;
    border-bottom: 0;
    border-right: 0;
	border-top-color: #412f65;
}

.labels > div.label-onsale {background: yellow; color: #000;}
.labels > div.label-onsale:before {border-top-color: rgb(221,168,0);}

.labels > div.label-new {background-color: limegreen;}
.labels > div.label-new:before {border-top-color: rgb(41, 119, 9);}

.labels > div.label-onhit {background-color: #F72F2F;}
.labels > div.label-onhit:before {border-top-color: rgb(178, 20, 0);}


@media screen and (max-device-width:480px) { .labels > div {width: 60px; line-height: 14px; margin-bottom: 0;} }
@media screen and (max-device-width:375px) { .labels > div {width: 75px; line-height: 20px; margin-bottom: 5px;} }