如何让我的 Wordpress(wp_query - 自定义 post 类型)、isotope.js 和 Bootstrap 过滤器正确显示?
How do I get my Wordpress (wp_query - custom post type), isotope.js, and Bootstrap filter to display correctly?
我在使用同位素按类别显示我的自定义 post 类型时遇到问题,它似乎快到了,但我找不到为什么它显示奇怪。
应该有三个 Bootstrap 列
显示问题的截图 -
https://i.stack.imgur.com/a9NBs.jpg
这是我的页面模板中使用的代码
<div class="container" style="margin-top:30px;">
<div class="center">
<ul id="filters" class="button-group">
<li class="button"><a href="#" data-filter="*" class="selected">All</a></li>
<?php
$terms = get_terms("category");
$count = count($terms);
if ( $count > 0 ){
foreach ( $terms as $term ) {
echo "<li class=button><a href='#' data-filter='.".$term->slug."'>" . $term->name . "</a></li>\n";
}
}
?>
</ul>
</div>
</div>
<!------->
<div class="container" style="padding-bottom:100px;margin-top:30px;">
<div class="grid">
<div id="isotope-list">
<?php $the_query = new WP_Query( 'post_type=property-items' ); ?>
<?php if ( $the_query->have_posts() ) : ?>
<?php while ( $the_query->have_posts() ) : $the_query->the_post();
$termsArray = get_the_terms( $post->ID, "category" );
$termsString = "";
foreach ( $termsArray as $term ) {
$termsString .= $term->slug.' ';
}
?>
<div class="col-md-4">
<div class="<?php echo $termsString; ?>item">
<a href= "<?php the_permalink(); ?>">
<div class="shadow-border">
<?php the_post_thumbnail(); ?>
<header class="entry-header">
<?php the_title('<h1 class="entry-title property-entry-title-home">', '</h1>'); ?>
</header>
<div class="center">
<?php the_category() ?>
</div>
</div>
</a>
</div>
</div>
<!-- end item -->
<?php endwhile; endif; wp_reset_postdata(); ?>
</div>
</div>
<!-- end isotope-list -->
</div>
这是我的同位素初始化代码
var $container = $('#isotope-list'); //The ID for the list with all the blog posts
$container.isotope({ //Isotope options, 'item' matches the class in the PHP
itemSelector: '.item',
layoutMode: 'masonry',
});
//Add the class selected to the item that is clicked, and remove from the others
var $optionSets = $('#filters'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function () {
var $this = $(this);
// don't proceed if already selected
if ($this.hasClass('selected')) {
return false;
}
var $optionSet = $this.parents('#filters');
$optionSets.find('.selected').removeClass('selected');
$this.addClass('selected');
//When an item is clicked, sort the items.
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector
});
return false;
});
});```
Isotope.js 有自己的布局顺序。您不需要在容器元素 isotope-list
.
内设置列
删除 col-4
包装器 - 让 isotope 处理它:
<?php $the_query = new WP_Query( 'post_type=property-items' ); ?>
<div class="container" style="padding-bottom:100px;margin-top:30px;">
<div class="grid">
<div id="isotope-list">
<?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post();
$termsArray = get_the_terms( $post->ID, "category" );
$termsString = "";
foreach ( $termsArray as $term ) {
$termsString .= $term->slug.' ';
}
?>
<div class="<?php echo $termsString; ?> item">
<a href= "<?php the_permalink(); ?>">
<div class="shadow-border">
<?php the_post_thumbnail(); ?>
<header class="entry-header">
<?php the_title('<h1 class="entry-title property-entry-title-home">', '</h1>'); ?>
</header>
<div class="center">
<?php the_category() ?>
</div>
</div>
</a>
</div>
<!-- end item -->
<?php endwhile; endif; wp_reset_postdata(); ?>
</div>
</div>
<!-- end isotope-list -->
</div>
如果您仍然想使用 bootsrap 来调整列大小,请查看 official docs,并更改相关的 JS:
$container.prepend('<div class="grid-size col-md-4"></div>" );
$container.isotope({ //Isotope options, 'item' matches the class in the PHP
itemSelector: '.item', // use a separate class for itemSelector, other than
percentPosition: true,
masonry: {
columnWidth: '.grid-sizer'
}
});
JS解释:
- 添加另一个 div 用于确定列开头处的宽度
网格.
- 更改同位素设置以支持 bootstrap 大小调整
我在使用同位素按类别显示我的自定义 post 类型时遇到问题,它似乎快到了,但我找不到为什么它显示奇怪。
应该有三个 Bootstrap 列
显示问题的截图 - https://i.stack.imgur.com/a9NBs.jpg
这是我的页面模板中使用的代码
<div class="container" style="margin-top:30px;">
<div class="center">
<ul id="filters" class="button-group">
<li class="button"><a href="#" data-filter="*" class="selected">All</a></li>
<?php
$terms = get_terms("category");
$count = count($terms);
if ( $count > 0 ){
foreach ( $terms as $term ) {
echo "<li class=button><a href='#' data-filter='.".$term->slug."'>" . $term->name . "</a></li>\n";
}
}
?>
</ul>
</div>
</div>
<!------->
<div class="container" style="padding-bottom:100px;margin-top:30px;">
<div class="grid">
<div id="isotope-list">
<?php $the_query = new WP_Query( 'post_type=property-items' ); ?>
<?php if ( $the_query->have_posts() ) : ?>
<?php while ( $the_query->have_posts() ) : $the_query->the_post();
$termsArray = get_the_terms( $post->ID, "category" );
$termsString = "";
foreach ( $termsArray as $term ) {
$termsString .= $term->slug.' ';
}
?>
<div class="col-md-4">
<div class="<?php echo $termsString; ?>item">
<a href= "<?php the_permalink(); ?>">
<div class="shadow-border">
<?php the_post_thumbnail(); ?>
<header class="entry-header">
<?php the_title('<h1 class="entry-title property-entry-title-home">', '</h1>'); ?>
</header>
<div class="center">
<?php the_category() ?>
</div>
</div>
</a>
</div>
</div>
<!-- end item -->
<?php endwhile; endif; wp_reset_postdata(); ?>
</div>
</div>
<!-- end isotope-list -->
</div>
这是我的同位素初始化代码
var $container = $('#isotope-list'); //The ID for the list with all the blog posts
$container.isotope({ //Isotope options, 'item' matches the class in the PHP
itemSelector: '.item',
layoutMode: 'masonry',
});
//Add the class selected to the item that is clicked, and remove from the others
var $optionSets = $('#filters'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function () {
var $this = $(this);
// don't proceed if already selected
if ($this.hasClass('selected')) {
return false;
}
var $optionSet = $this.parents('#filters');
$optionSets.find('.selected').removeClass('selected');
$this.addClass('selected');
//When an item is clicked, sort the items.
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector
});
return false;
});
});```
Isotope.js 有自己的布局顺序。您不需要在容器元素 isotope-list
.
删除 col-4
包装器 - 让 isotope 处理它:
<?php $the_query = new WP_Query( 'post_type=property-items' ); ?>
<div class="container" style="padding-bottom:100px;margin-top:30px;">
<div class="grid">
<div id="isotope-list">
<?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post();
$termsArray = get_the_terms( $post->ID, "category" );
$termsString = "";
foreach ( $termsArray as $term ) {
$termsString .= $term->slug.' ';
}
?>
<div class="<?php echo $termsString; ?> item">
<a href= "<?php the_permalink(); ?>">
<div class="shadow-border">
<?php the_post_thumbnail(); ?>
<header class="entry-header">
<?php the_title('<h1 class="entry-title property-entry-title-home">', '</h1>'); ?>
</header>
<div class="center">
<?php the_category() ?>
</div>
</div>
</a>
</div>
<!-- end item -->
<?php endwhile; endif; wp_reset_postdata(); ?>
</div>
</div>
<!-- end isotope-list -->
</div>
如果您仍然想使用 bootsrap 来调整列大小,请查看 official docs,并更改相关的 JS:
$container.prepend('<div class="grid-size col-md-4"></div>" );
$container.isotope({ //Isotope options, 'item' matches the class in the PHP
itemSelector: '.item', // use a separate class for itemSelector, other than
percentPosition: true,
masonry: {
columnWidth: '.grid-sizer'
}
});
JS解释:
- 添加另一个 div 用于确定列开头处的宽度 网格.
- 更改同位素设置以支持 bootstrap 大小调整