javascript — категория WordPress для вызовов / ссылок с классами jquery / изотопов
Я работаю над разделом портфолио моего веб-сайта, и эти коды у меня есть в сценарии filter.js (в папке wp-includes / js)
jQuery(document).ready(function(){
jQuery(".grid-item").first().addClass("comercial");
jQuery(".grid-item:eq(1)").addClass("residencial");
jQuery(".grid-item:eq(2)").addClass("cultural");
jQuery(".grid-item:eq(3)").addClass("interiores");
jQuery(".grid-item:eq(4)").addClass("residencial");
jQuery(".grid-item:eq(5)").addClass("residencial");
jQuery('.grid').isotope({
itemSelector: '.grid-item',
layoutMode: 'fitRows'
});
jQuery(".dcjq-parent-li ul li a").click(function() {
jQuery(".dcjq-parent-li ul li a").removeClass("active");
jQuery(this).addClass("active");
var filtro=jQuery(this).attr("data-filter");
jQuery(".grid").isotope({ filter: filtro});
});
jQuery(".dcjq-parent").click(function() {
if(jQuery(this).siblings("ul").css("display")=="block")
jQuery(this).siblings("ul").slideToggle( "slow" );
else
{
jQuery(".accordionMenu ul").each(function( index ) {
if(jQuery(this).css('display')=="block")
{
jQuery(this).slideToggle( "slow" );
jQuery(this).siblings("a").removeClass("active");
}
});
jQuery(this).siblings("ul").slideToggle( "slow" );
jQuery(this).addClass("active");
}
});
});
У меня есть разные классы в приведенных выше кодах, но я не уверен, как использовать эти классы в постах WordPress или как создать функцию / цикл для использования этих классов в постах.
Этот код у меня на странице портфолио:
<div id="aside">
<ul id="subMenu" class="accordionMenu" data-option-key="filter">
<li class="dcjq-parent-li">
<a href="#" class="dcjq-parent active">Tipologia<span class="dcjq-icon"></span>
</a>
<ul style="display: block;">
<li><a href="#filter" data-filter="*" class="active">todos</a></li>
<li><a href="#filter" data-filter=".residencial">Residencial</a></li>
<li><a href="#filter" data-filter=".comercial">Comercial</a></li>
<li><a href="#filter" data-filter=".cultural">Cultural</a></li>
<li><a href="#filter" data-filter=".interiores">Interiores</a></li>
</ul>
</li>
<li class="dcjq-parent-li">
<a href="#" class="dcjq-parent">Datas<span class="dcjq-icon"></span></a>
<ul style="display: none;">
<li><a href="#filter" data-filter="*" class="actv">todos</a></li>
<li><a href="#filter" data-filter=".1980, .1981, .1982, .1983, .1984">1980 - 1984</a></li><li><a href="#filter" data-filter=".1985, .1986, .1987, .1988, .1989">1985 - 1989</a></li><li><a href="#filter" data-filter=".1990, .1991, .1992, .1993, .1994">1990 - 1994</a></li><li><a href="#filter" data-filter=".1995, .1996, .1997, .1998, .1999">1995 - 1999</a></li><li><a href="#filter" data-filter=".2000, .2001, .2002, .2003, .2004">2000 - 2004</a></li><li><a href="#filter" data-filter=".2005, .2006, .2007, .2008, .2009">2005 - 2009</a></li><li><a href="#filter" data-filter=".2010, .2011, .2012, .2013, .2014">2010 - 2014</a></li>
</ul>
</li>
</ul>
</div>
<div class="projecto"><div class="grid">
<?php $my_query = new WP_Query('post_type=portfolio&posts_per_page=-1');
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<?php $feat_image = wp_get_attachment_url(get_post_thumbnail_id($post->ID) );?>
<?php if($feat_image!=''){?> <li class="grid-item"><a href="<?php the_permalink(); ?>"><div class="proimg"><img alt="" src="<?php echo $feat_image;?>" /></div></a>
<h5><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h5>
<div class="textblock"><?php echo $text = get_post_meta( $post->ID, 'text', true ); ?>
</div>
</li><?php } ?>
<?php endwhile; wp_reset_query(); ?>
</div>
</div>
<?php get_sidebar( $blog-widgets ); ?>
<?php get_footer(); ?>
Я сделал все эти коды, читая учебники по интеграции WordPress / Isotope, создавая классы в JQuery, создавая коды на странице проекта, и я не понял, как использовать эти классы изотопов / JQuery в WordPress сообщениях.
поэтому они будут отображаться в виде фильтров.
Я знаю, это можно сделать с помощью фильтрации категорий, тегов, метабокса или пользовательского цикла, но я не знаю, как именно создать пользовательский цикл, который использует классы фильтров в категориях.
Извините, если я не правильно задал вопрос, я новичок и пытаюсь сделать все с помощью учебников и с помощью экспертов.
Решение
Удалите код JS, который автоматически добавляет класс, который вы хотите добавить вручную,
эти строки
jQuery(".grid-item").first().addClass("comercial");
jQuery(".grid-item:eq(1)").addClass("residencial");
jQuery(".grid-item:eq(2)").addClass("cultural");
jQuery(".grid-item:eq(3)").addClass("interiores");
jQuery(".grid-item:eq(4)").addClass("residencial");
jQuery(".grid-item:eq(5)").addClass("residencial");
в вашем цикле wordpress, получите список категорий текущего элемента и сохраните их в переменной, разделенной пробелом, так как это будет использоваться в качестве классов позже, вы можете использовать get_the_category функция
//get the category assign to the post
//$cat_objects = get_the_category();
$cat_objects = wp_get_post_terms( get_the_ID(), 'portfolio_category');
/**Define category variable to be use as class, leave empty if you don't want to add global classes you can add 'grid-item' in here and remove it on the LI element, **/
$categories = '';
// Loop through each category object
foreach ( $cat_objects as $cat ) {
// extract the category slug and add them to $categories variable,
$categories .= ' '. $cat->slug; /** Added Space at the beginning of each category so they will be separated during actual output**/
}
Затем вы можете добавить список категорий, хранящихся в $categories переменная из приведенного выше кода в качестве дополнительного класса для элементов сетки li, <li class="grid-item<?php echo $categories; ?>">
Ваш цикл должен выглядеть примерно так
<div class="projecto"><div class="grid">
<?php $my_query = new WP_Query('post_type=portfolio&posts_per_page=-1');
while ($my_query->have_posts()) : $my_query->the_post();
$cat_objects = get_the_category();
$categories = '';
foreach ( $cat_objects as $cat ) {
$categories .= ' '. $cat->slug;
}
?>
<?php $feat_image = wp_get_attachment_url(get_post_thumbnail_id($post->ID) );?>
<?php if($feat_image!=''){?> <li class="grid-item<?php echo $categories; ?>"><a href="<?php the_permalink(); ?>"><div class="proimg"><img alt="" src="<?php echo $feat_image;?>" /></div></a>
<h5><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h5>
<div class="textblock"><?php echo $text = get_post_meta( $post->ID, 'text', true ); ?>
</div>
</li><?php } ?>
<?php endwhile; wp_reset_query(); ?>
</div>
Другие решения
Других решений пока нет …