Intereting Posts
Как вызвать изображения из папки с вашими плагинами? «Параметры экрана» отсутствуют. Где я должен начать поиск неисправностей? Нужна помощь для написания циклов для отображения сообщений по категориям в отдельных divs Включая параметры Javascript Почему мои данные wp_posts настолько огромны? Различные категории для пользовательских типов сообщений meta_query с массивом как значение с несколькими массивами Используется более одного текстового домена из-за включенных шаблонов для плагинов Создание плагина для изменения слизняков дата автоматического изменения, когда почта составляет 30 дней Обратный порядок событий на домашней странице Переименовать категорию по умолчанию (без рубрики) через функцию Плагин кэширования объектов заставляет каждый плагин кэшировать объекты? Страница архива таксономии WP_Query не возвращает значение get_the_permalink () или get_permalink () Данные метаданных не сохраняются

Фильтруемый портфолио в WordPress с использованием изотопа jQuery

Я хочу фильтровать портфолио с помощью изотопа. Я могу показать элементы, но не могу фильтровать. Вот мой код. Посмотрите и поделитесь своими мыслями, что мне не хватает.

<ul id="cat"> <li> <ol class="type"> <?php $terms = get_terms('portfolio-type'); $count = count($terms); echo '<li><a href="javascript:void(0)" data-filter="*" class="active">All</a></li>'; if ( $count > 0 ){ foreach ( $terms as $term ) { $termname = strtolower($term->name); $termname = str_replace(' ', '-', $termname); echo '<li><a href="javascript:void(0)" data-filter=".'.$termname.'">'.$term->name.'</a></li>'; } } ?> </ol> </li> </ul> <div class="portfolio-items"> <?php $args = array( 'post_type' => 'portfolio', 'posts_per_page' => 8 ); $loop = new WP_Query( $args ); while ( $loop->have_posts() ) : $loop->the_post(); ?> <div class="col-sm-6 col-md-3 col-lg-3 web"> <div class="portfolio-item"> <div class="hover-bg"> <a href="<?php display_taxonomy_terms('portfolio-link'); ?>" title="Project description" rel="prettyPhoto" target="_blank"> <div class="hover-text"> <h4><?php the_title(); ?></h4> <small><?php display_taxonomy_terms('portfolio-type'); ?></small> </div> <img class="img-responsive" alt="Project Image" src="<?php echo the_post_thumbnail_url(); ?>"/> </a> </div> </div> </div> <?php endwhile; ?> </div> <script> (function($){ var $container = $('.portfolio-item'); // create a clone that will be used for measuring container width $containerProxy = $container.clone().empty().css({ visibility: 'hidden' }); $container.after( $containerProxy ); // get the first item to use for measuring columnWidth var $item = $container.find('.hover-bg').eq(0); $container.imagesLoaded(function(){ $(window).smartresize( function() { // calculate columnWidth var colWidth = Math.floor( $containerProxy.width() / 2 ); // Change this number to your desired amount of columns // set width of container based on columnWidth $container.css({ width: colWidth * 2 // Change this number to your desired amount of columns }) .isotope({ // disable automatic resizing when window is resized resizable: false, // set columnWidth option for masonry masonry: { columnWidth: colWidth } }); // trigger smartresize for first time }).smartresize(); }); // filter items when filter link is clicked $('#cat a').click(function(){ var selector = $(this).attr('data-filter'); $container.isotope({ filter: selector, animationEngine : "css" }); $('#cat a.active').removeClass('active'); $(this).addClass('active'); return false; }); } ) ( jQuery ); </script>