SOFT SPRINT

softsprint.net
(en) shop

Фильтр постов по категориям WordPress

Есть задача: отображать при клике на ссылку «WordPress» работы с портфолио, которые относятся именно к категории WordPress, т.е., фильтровать посты по категориям:

Очевидно, что при клике на PrestaShop должны отображаться работы, относящиеся лишь к категории PrestaShop и т.д.

Решение
Собственно, вот наши ссылки:

1
2
3
<div id="works">
<p class="links"><a href="/category/all/">All</a><a href="/category/wordpress/">WordPress</a><a href="/category/prestashop/">PrestaShop</a><a href="/category/cakephp/">CakePHP</a><a href="/category/mobile/">Mobile</a></p>
</div>

Вот тело цикла вывода постов:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<section class="swiper-container">
 <ul id="da-thumbs">
  <?php
   $my_posts = get_posts('numberposts=16&category_name="all"');
    foreach ($my_posts as $post) :
     setup_postdata($post);
  ?>
   <li class="<?php the_category_unlinked(' '); ?> " style="background-image: url(<?php
    if ( has_post_thumbnail()) {
     $full_image_url = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full');
     echo ''.$full_image_url[0] . '';
    }
   ?>)">
    <a href="<?php the_permalink() ?>">
     <div class="hover">
      <h3><?php the_title(); ?></h3>
     </div>
    </a>
   </li>
  <?php endforeach; ?>
 </ul>
</section>

Нам с Вами нужно обратить внимание здесь лишь на эту строку:

1
<li class="<?php the_category_unlinked(' '); ?> "

Тело функции the_category_unlinked() находится в файле functions.php:

1
2
3
4
5
6
7
8
9
10
<?php
 function the_category_unlinked($separator = ' ') {
  $categories = (array) get_the_category();
  $thelist = '';
  foreach($categories as $category) {    // concate
   $thelist .= $separator . $category->category_nicename;
  }
  echo $thelist;
}
?>

Что получаем в итоге? Запрашиваем для каждого поста в цикле соответствующие ему категории и добавляем их в class нужного нам тега. В нашем случае получаем такой HTML-код на выходе:
html-code

Далее осталось дело за малым – нам нужен JS или jQuery-скрипт примерно такого вида:

1
2
3
4
5
6
7
8
9
10
$('#works .links a').on( "click", function(event) {
 event.preventDefault();
 var $attrName = $(this).attr('href');
 $('#works #da-thumbs li').each(function(index, element){
  $(element).removeClass("worktohide");
  if(!$(element).hasClass($attrName)) {
   $(this).addClass("worktohide");
  }
 })
})

Логика скрипта: при клике на ссылку читаем её атрибут href (например, wordpress) и проверяем весь массив постов (наших работ из портфолио) на предмет: если у данного поста нет класса wordpress, то его нужно скрыть. В нашем случае мы скрываем посты путём добавления им класса c соответствующими стилями:

1
2
3
4
5
6
7
8
9
10
11
.worktohide {
 opacity: 0.15;
 filter: grayscale(100%); /* Current draft standard */
 -webkit-filter: grayscale(100%); /* New WebKit */
 -moz-filter: grayscale(100%);
 -ms-filter: grayscale(100%); 
 -o-filter: grayscale(100%); /* Not yet supported in Gecko, Opera or IE */ 
 filter: url(resources.svg#desaturate); /* Gecko */
 filter: gray; /* IE */
 -webkit-filter: grayscale(1); /* Old WebKit */
}

В итоге получим такой результат (дублирую первое изображение данной статьи):

Получили способ динамической фильтрации постов без применения AJAX.

CONTACT US
Cookies | Privacy Policy | Terms and ConditionsSoftSprint ©