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

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

HIT

30.10.2015

1294

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

  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) создает нужный функционал, без ручного заполнения меток.

Тэги: ,

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

  • Похожие записи
  • Комментарии
  • Вложения
Автоматическая разбивка записей по тегам

Автоматическая разбивка записей по тегам

Автоматически разбиваем записи определенной категории по тегам. Подробнее: у нас есть определенное количество записей в какой-либо категории, при этом у некоторых записей заданы теги. Выводится будет так: Сначала записи с Читать далее »

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

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

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

Облако меток, категорий, таксономий

Облако меток, категорий, таксономий

В wordpress есть внутренняя функция выводить облако меток. Также можно выводить облака категорий и терминов таксономий. Стандартное облако меток Вывести облако тегов <?php wp_tag_cloud(''); ?> Облако меток Создаем облако меток, Читать далее »

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

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

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