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

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

HIT

30.10.2015

1437

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

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

Тэги: ,

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

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

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

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

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

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

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

Список меток текущей категории

Список меток текущей категории

Формируем и выводим список меток текущей категории. Вариант в файл funсtion.php function get_category_tags($cats) { global $wpdb; $tags = $wpdb->get_results (" SELECT DISTINCT terms2.term_id as tag_id, terms2.name as tag_name, t2.count as Читать далее »

/

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

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

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