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

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

HIT

30.10.2015

2721

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

  1. Выводим все метки включенные в данную категорию
  2. Добавляем скрипт в header (при добавлении к div post_class())
  3. В скрипте прописываем имеющиеся метки
$(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();  }); 

});

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

<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: rgb(12, 48, 75);
  color: #fff;
  margin: 1%;
  padding: 0.5%;
  cursor: pointer;
}

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

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

Фильтр в виде выпадающего меню

Прописываем выпадающее меню или можно сформировать его динамически как в предыдущем примере:

<select id="sfera" name="sfera">
	<option value="all">Все сферы</option>
	<option value="EnergyNet">EnergyNet</option>
	<option value="AeroNet">AeroNet</option>
	<option value="FinNet">FinNet</option>
	<option value="MariNet">MariNet</option>				
</select>

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

$('#sfera').change(function(){ //функция работает при изменении select
	var sortValues = $("#sfera option:selected").val(); //получаем значение выбранного пункта select

	if($("#sfera").val()=="") { 
		//если пустое значение формы
	} else if($("#sfera").val()=="all") { 	
		$('.requests > div').addClass('activ');
	} else {
		$('.requests > div').removeClass('activ');
		$('.requests > div.' + sortValues).addClass('activ');	
	}
});
[site-socialshare]
  • Похожие записи
  • Комментарии
  • Вложения
Сортировка постов (по дате, по заголовку, по дате изменений)

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

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

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

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

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

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

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

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

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

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

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