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

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;}

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

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

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

<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');	
	}
});

Поделиться в соц. сетях: