Intereting Posts
Почему мой сайт WordPress не отображает текст urdu полностью, ища какую-либо вещь в своих барах поиска? Настроить главную страницу https? Показать сообщения с расширенной формой поиска Изменение языка одной страницы Действие pre_get_posts: поиск по post_title и post_content с другой поисковой фразой в том же запросе Как использовать пользовательскую мобильную тему? UPDATED: сохранить значение custom_field при автоматическом создании сообщения с помощью wp_insert_post проблема миграции файлов с https на сайт http mock – как увидеть сайт-макет Пользовательская страница входа с настраиваемыми переадресациями для каждого пользователя? Чтобы сохранить информацию пользователя на той же странице, отправив форму Javascript в wordpress Между функциями.php, виджетами и плагинами, которые загружаются первыми? Я не получаю письмо с напоминанием пароля Какие данные отправляются на / с сайтов с трекбэком или Pingback? Как установить глобальную переменную в functions.php

Печать в WordPress и изотопах

Я пытаюсь использовать Isotope ( http://isotope.metafizzy.co/ ), чтобы отфильтровать мои сообщения в WordPress, http://img.wordpressask.com/categories/404.gif так выглядит мой сайт, я хотел бы фильтровать сообщения в зависимости от категории сообщений, поэтому мне нужно добавить имя класса для каждого сообщения, а затем отфильтровать его с помощью изотопа

<li><a href="#" data-filter="*">show all</a></li> <li><a href="#" data-filter=".design">design</a></li> <li><a href="#" data-filter=".typo">typography</a></li> 

это имена моих категорий, а затем я хотел бы добавить название класса сообщения в зависимости от категории, в которой он находится.

 <div id="main"> <?php $args = array('orderby' => 'rand' ); $random = new WP_Query($args); ?> <?php if(have_posts()) : ?><?php while($random->have_posts()) : $random->the_post(); ?> <a href="<?php the_permalink() ?>"> <div id="img" class="<?php $category = get_the_category(); echo $category[0]->cat_name; ?>"> <?php the_post_thumbnail();?> <h1><?php the_title(); ?></h1> </div></a> 

и javascript im, используя

  <script type="text/javascript"> jQuery(window).load(function(){ jQuery('#main').isotope({ masonry: { columnWidth: 20 }, }); $('#filters a').click(function(event){ var selector = $(this).attr('data-filter'); $('#main').isotope({ filter: selector }); return false; }); }); </script> 

Не уверен, что у вас есть изотопы и фильтры?

Есть две вещи, которые, я думаю, вы пропустили

  1. Фильтры должны быть завернуты в класс (так что jquery может быть активирован щелчком по ссылкам) так:

     <ul id="options"> <li><a href="#" data-filter="*">show all</a></li> <li><a href="#" data-filter=".web">web</a></li> <li><a href="#" data-filter=".mobile">mobile</a></li> </ul> 

NB фильтр данных чувствителен к CaSe (поэтому они не будут работать, если они не соответствуют вашим категориям WordPress или тому, что вы используете.

  1. Изотопный jquery должен быть безопасным для WordPress – для запуска в режиме без конфликтов

Вот исходный код из документации Isotope

 // filter items when filter link is clicked $('#filters a').click(function(){ var selector = $(this).attr('data-filter'); $container.isotope({ filter: selector }); return false; }); 

Вот код, измененный для WordPress

 // filter items when filter link is clicked jQuery('#options a').click(function(){ var selector = jQuery(this).attr('data-filter'); mycontainer.isotope({ filter: selector }); return false; }); 

NB добавьте это после остальной части вашего сценария изотопа и обратите внимание, что #options – это класс из вашего списка фильтров в HTML 🙂

Вы можете видеть, как он работает на damien.co/isotope

Надеюсь, что это помогло вам?

Вы можете использовать эту функцию:

Поместите это в свои функции.

 function isotope_categories() { $categories = get_categories(); $html = '<ul class="filters option-set" data-option-key="filter">'; $html .= '<li><a href="#filter" data-option-value="*" class="selected">All items</a></li>'; foreach ($categories as $category) { $html .= "<li><a href='#filter' data-option-value='.category-{$category->category_nicename}'>{$category->cat_name}</a></li>"; } $html .= '</ul>'; echo $html; } 

а затем вызовите эту функцию в файле, где находится ваш изотопный контейнер.

Подобно:

 <nav class="options"> <?php isotope_categories() ?> </nav> 

Он выведет правильную разметку для изотопа

Поэтому, если вы создадите новые записи в бэкэнд WordPress и категории ссылок для них, они будут отображаться и быть фильтруемыми

Во-первых, завершите вывод сообщения в <div> и добавьте <?php post_class(); ?> <?php post_class(); ?> тег шаблона для этого <div> .

Итак, измените это:

 <a href="<?php the_permalink() ?>"> <div id="img" class="<?php $category = get_the_category(); echo $category[0]->cat_name; ?>"> <?php the_post_thumbnail();?> <h1><?php the_title(); ?></h1> </div></a> 

….к этому:

 <div <?php post_class(); ?> <a href="<?php the_permalink() ?>"> <div id="img"> <?php the_post_thumbnail();?> <h1><?php the_title(); ?></h1> </div></a> </div> 

Теперь, если вы прочитаете post_class() Codex (связанная выше), вы увидите, что среди других классов этот тег шаблона применяет класс category-{slug} . (Для ваших категорий категорий post_class() добавит category-design или category-typo .

Итак, вам нужно просто настроить таргетинг на category-{slug} для реализации изотопного фильтра.

Я также пытался интегрировать плагин jQuery Isotope с WP, когда я наткнулся на эту тему. Если вам все еще нужна помощь, вот как это работает. Мой метод был немного иным, так как я создал персонализированный тип проектов, который я хотел бы отфильтровать по категориям проектов, которые представляют собой обычную таксономию.

Шаблон страницы нуждался в следующем php для списка # проектов-фильтров и создаваемого div #projects.

 <?php $terms = get_terms('project_categories'); $count = count($terms); if ( $count > 0 ){ echo '<ul id="projects-filter">'; echo '<li><a href="#" data-filter="*">All</a></li>'; foreach ( $terms as $term ) { $termname = strtolower($term->name); $termname = str_replace(' ', '-', $termname); echo '<li><a href="#" data-filter="' . '.' . $termname . '">' . $term->name . '</a></li>'; } echo '</ul>'; } ?> <?php $loop = new WP_Query(array('post_type' => 'projects', 'posts_per_page' => -1)); $count =0; ?> <div id="project-wrapper"> <div id="projects"> <?php if ( $loop ) : while ( $loop->have_posts() ) : $loop->the_post(); ?> <?php $terms = get_the_terms( $post->ID, 'project_categories' ); if ( $terms && ! is_wp_error( $terms ) ) : $links = array(); foreach ( $terms as $term ) { $links[] = $term->name; } $links = str_replace(' ', '-', $links); $tax = join( " ", $links ); else : $tax = ''; endif; ?> <?php $infos = get_post_custom_values('wpcf-proj_url'); ?> <div class="project-item <?php echo strtolower($tax); ?>"> <div class="thumb"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail( 'projects-thumb' ); ?></a></div> <h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3> <p class="excerpt"><a href="<?php the_permalink() ?>"><?php echo get_the_excerpt(); ?></a></p> <p class="links"><a href="<?php echo $infos[0]; ?>" target="_blank">Live Preview →</a> <a href="<?php the_permalink() ?>">More Details →</a></p> </div> <?php endwhile; else: ?> <div class="error-not-found">Sorry, no portfolio entries for while.</div> <?php endif; ?> </div> <div class="clearboth"></div> </div> <!-- end #project-wrapper--> 

И вот javascript, который работает с магией.

 jQuery(document).ready(function(){ var mycontainer = jQuery('#projects'); mycontainer.isotope({ filter: '*', animationOptions: { duration: 750, easing: 'liniar', queue: false, } }); jQuery('#projects-filter a').click(function(){ var selector = jQuery(this).attr('data-filter'); mycontainer.isotope({ filter: selector, animationOptions: { duration: 750, easing: 'liniar', queue: false, } }); return false; }); }); 

Добавьте анимациюEngnine: 'jquery' – и анимация будет более плавной.

 var mycontainer = jQuery('#projects'); mycontainer.isotope({ filter: '*', animationEngine: 'jquery', animationOptions: { duration: 350, easing: 'linear', queue: true } }); jQuery('#projects-filter a').click(function(){ var selector = jQuery(this).attr('data-filter'); mycontainer.isotope({ filter: selector, animationOptions: { duration: 350, easing: 'linear', queue: true, } }); return false; });