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

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

HIT

30.10.2015

1352

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

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

Тэги: ,

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

  • Похожие записи
  • Комментарии
  • Вложения
Сортировка постов (по дате, по заголовку, по дате изменений)

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

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

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

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

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

/
Сортировка по произвольным полям

Сортировка по произвольным полям

Более продвинутая форма сортировки — сортировка по произвольным полям. Для рассматриваемого функционала сортировки, нет принципиальной разницы: создано поле штатными средствами wordpress или плагином ACF. Метод сортировки по произвольному полю Ранее Читать далее »

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

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

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