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

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

HIT

30.10.2015

1213

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

  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 — сортировать Читать далее »

Сортировка категорий

Сортировка категорий

Сортировка категорий частая задача при формировании каталога. Разберемся в тонкостях данного явления. Сортировка категорий WP Сортировка категорий на wordpress реализована не очень детально. Сходу категории сортируются по алфавиту, но бывает Читать далее »

Сортировка постов (по дате, по заголовку, по дате изменений)

Сортировка постов (по дате, по заголовку, по дате изменений)

Создадим для удобства пользователей функционал сортировки постов (по дате, по заголовку, по дате изменений). Сортировка отличается от фильтрации тем, что при сортировке показываются все записи, но в другом порядке, а Читать далее »

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

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

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