Wordpress и фильтрация изотопов
Я пытаюсь использовать изотоп(http://isotope.metafizzy.co /) для фильтрации моих сообщений Wordpress, http://i44.tinypic.com/fco55k.jpg вот как выглядит мой сайт, я хотел бы фильтровать сообщения в зависимости от категории сообщений, поэтому мне нужно добавить имя класса к каждому сообщению, а затем отфильтровать его с помощью isotope
<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, который я использую
<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>
5 answers
Не уверены, что у вас уже работают изотоп и фильтры??
Есть 2 вещи, которые, я думаю, вы пропустили
-
Фильтры должны быть заключены в класс (чтобы jquery можно было активировать, щелкнув по ссылкам a), например:
<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 фильтр данных чувствителен к регистру (поэтому они не будут работать, если они не соответствуют вашим категориям WordPress или тому, что вы используете.
- Jquery isotope необходимо сделать безопасным для WordPress - для запуска режим без конфликтов
Вот исходный код из документации по изотопу
// 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 вставьте это после остальной части вашего сценария isotope и обратите внимание, что #options - это класс из вашего списка фильтров в HTML:)
Вы можете увидеть, как он работает по адресу damien.co/isotope
Надеюсь, это помогло вам?
Возможно, вы захотите использовать эту функцию:
Поместите это в свой functions.php
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 и свяжете с ними категории, они будут отображаться и будут фильтроваться
Я тоже пытался интегрировать плагин jQuery Isotope с WP, когда наткнулся на эту тему. Если вам все еще нужна помощь, вот как это сработало. Мой метод немного отличался, так как я создал пользовательский тип записей проектов, которые я хотел отфильтровать с помощью projects_categories, которая является пользовательской таксономией.
Шаблону страницы требовался следующий php для создания списка фильтров #проекты и div #проекты.
<?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;
});
});
Сначала оберните вывод сообщения в <div>
и добавьте <?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()
(ссылка выше), вы увидите, что среди других классов этот тег шаблона применяет класс category-{slug}
. (Для ваших категорий примеров post_class()
добавит category-design
или category-typo
.
Итак, вам просто нужно выбрать category-{slug}
для реализации изотопного фильтра.
Добавьте анимационную строку: '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;
});