/ Сайтостроение / Scripts & jquery / Сортировка по меткам

Сортировка по меткам

HIT

30.10.2015

1146

Делаем функционал сортировки постов по меткам

  1. Выводим все метки включенные в данную категорию
  2. Добавляем скрипт в header (при добавлении к div post_class())
  3. В скрипте прописываем имеющиеся метки
<script>

$(document).ready(function() {  

$('#tag-list div').click(function() {

$('#tag-list div').removeClass(' activ '); 
$('#tag-list div').addClass(' passiv '); 
$(this).removeClass(' passiv ');
$(this).addClass(' activ ');
  
});  
  
  
$(' #tag-list div ').click(function() {  $('.hentry').parent('div').show();  }); 

// Прописываем имеющиеся метки

$('#trance').click(function() {  $('.hentry:not(.tag-trance).parent('div')').hide();   }); 
$('#vocal').click(function() { $('.hentry:not(.tag-vocal)').parent('div').hide();   }); 
$('#remix').click(function() { $('.hentry:not(.tag-remix)').parent('div').hide();   }); 

$('#landing').click(function() { $('.hentry:not(.tag-landing).parent('div')').hide();  }); 
$('#woocommerce').click(function() { $('.hentry:not(.tag-woocommerce).parent('div')').hide();  }); 

}); 

</script>

Код в шаблон категории:

<div id="tag-list"><div id="all">All</div><?php echo get_category_tags($category_id); ?></div>

С проверкой: есть ли вообще метки, если есть то выводить:

<?php if ( get_category_tags($category_id) ):  ?><div id="tag-list"><div id="all" class="activ">All</div><?php echo get_category_tags($category_id); ?></div><?php endif; ?>

CSS

#tag-list {
  width: 100%;
  clear: both;
  float: left;
}

#tag-list div {
  float: left;
  width: 10%;
  background-color: rgb(12, 48, 75);
  color: #fff;
  margin: 1%;
  padding: 0.5%;
  cursor: pointer;
}

#tag-list div:hover {
background-color: rgb(255, 127, 80);
}

.activ {
background-color: rgb(0, 127, 80) !important;
}

#tag-list sub {
font-size: 10px;
}

Данный скрипт работает при условии что для записей категории добавлен генерируемый класс post_class(). Пример: <div <?php post_class() ?> >

Данный метод имеет серьёзный недостаток: созданные метки нужно создавать в ручную.

Автоматическое создание меток из базы

Вставляем !обязательно в верстку, после модуля вывода меток, следующий скрипт:

<script type="text/javascript">
$(document).ready(function() {

$('#tag-list div').click(function() {

$('#tag-list div').removeClass(' activ ');
$('#tag-list div').addClass(' passiv ');
$(this).removeClass(' passiv ');
$(this).addClass(' activ ');

});


$('#tag-list div').click(function() { $('.hentry').parent('div').show(); });

<?php

$tags = get_tags(array('taxonomy'=>'tag','hide_empty'=>false));

if($tags) {
foreach($tags as $tag) {

echo '$("#'.$tag->slug.'").click(function() { $(".hentry").not(".tag-'.$tag->slug.'").parent("div").hide(); });';

}
}

?>

});
</script>

Данный скрипт (гибрид jquery и php) создает нужный функционал, без ручного заполнения меток.

Тэги: ,

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Шорткод вывода товаров по метке

Шорткод вывода товаров по метке

Иногда требуется быстро вывести товары с определенной меткой. Данный шорткод еще не испытывал. // Шорткод для вывода товаров по метке function woo_products_by_tags_shortcode( $atts, $content = null ) { // Get Читать далее »

/
Миниатюры меток

Миниатюры меток

Произвольными полями делаем поле «миниатюра (изображение)» в метках. Там где надо вывести миниатюру ставим <?php // номер метки $tag_id = get_query_var( 'tag_id' ); // данные о текущей категории $tag = Читать далее »

/
Доработка сортировки постов

Доработка сортировки постов

В wordpress существуют следующие варианты сортировки записей: author — сортировать по ID авторов content — сортировать по контенту date — сортировать по дате создания записи (по умолчанию) ID — сортировать Читать далее »

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

Пока нет комментариев. Будь первым!

Сортировка по меткам
Взаимодействие форм и scripts
Рекомендации для васВзаимодействие форм и scriptsOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.