有人知道是否可以使同位素与自定义网格布局一起工作？
在我的循环中，我说：如果是第一个帖子，则采用 12 col 宽度，如果是第二个和第三个帖子，则采用 6 col 宽度，而所有其他帖子，采用 4 col 宽度..
无论我点击什么过滤器按钮，我都希望保留该设计，例如，如果我点击相应的类别过滤器，第 4 个帖子将成为第一个：
同位素不遵守循环条件.. 有人知道如何实现吗？
【问题讨论】：
标签： php wordpress loops jquery-isotope
好吧，我终于成功了；这是代码。在我的主页中，我首先使用复选框构建过滤器。然后在我的循环中，我计算帖子以区分不同列大小的帖子大小。
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main">
<div class="flex-container">
<div class="flex-row">
<header class="page-header">
<?php
single_post_title('<h1 class="page-title">', '</h1>' );
?>
</header><!-- .page-header -->
</div>
<div class="flex-row">
<form action="#" method="POST" id="post_filters">
<p><a href="" id="clear">Clear</a></p>
<?php
if( $terms = get_terms( array( 'taxonomy' => 'category' ) ) ) :
foreach( $terms as $term ) :
echo '<p><input type="radio" id="' . $term->term_id . '" value="' . $term->term_id . '" name="category_filters" class="category_filter"/><label for="' . $term->term_id. '">' . $term->name . '</label></p>';
endforeach;
endif;
?>
<!-- required hidden field for admin-ajax.php -->
<input type="hidden" name="action" value="ccfilter" />
</form>
</div>
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 5,
'paged' => $paged
);
$query = new WP_Query( $args ); ?>
<?php
if ( $query->have_posts() ) :
$count = (int)0;?>
<div id="cc_posts_wrap" class="flex-row">
<?php
while ( $query->have_posts() ) : $count++;
$query->the_post();
if($count == 1){
$span = 'flex-col-xs-12';
$limit = 20;
}
if($count == 2 || $count == 3){
$span = 'flex-col-sm-6';
$limit = 13;
}
if($count > 3){
$span = 'flex-col-sm-4';
$limit = 13;
}
//If its not 3 or higher, increase the count
$termsArray = get_the_terms($post->ID, "category"); //Get the terms for this particular item
$termsString =""; //initialize the string that will contain the terms
foreach ( $termsArray as $term ) { // for each term
$termsString .= $term->slug;
}
?>
<div class="<?php echo $termsString .' ' . $span ;?> item">
<article id="post-<?php the_ID(); ?>" <?php post_class();?>>
<div class="post-featured-thumbnail">
<?php
if ( has_post_thumbnail() ) {
if($count == 1){
the_post_thumbnail('blog_featured');
}else{
the_post_thumbnail();
}
}
if ( 'post' === get_post_type() ) :
?>
<div class="entry-meta">
<?php
numgrade_category_sticker();
?>
</div><!-- .entry-meta -->
<?php endif; ?>
</div>
<div class="post-content">
<header class="entry-header">
<?php
if ( is_singular() ) :
the_title( '<h1 class="entry-title">', '</h1>' );
else :
the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
endif;
?>
</header><!-- .entry-header -->
<div class="entry-content">
<?php echo excerpt($limit); ?>
</div><!-- .entry-content -->
</div>
</article><!-- #post-<?php the_ID(); ?> -->
</div>
<?php endwhile;?>
</div> <!-- end isotope-list -->
<?php global $wp_query; // you can remove this line if everything works for you
if ( $wp_query->max_num_pages > 1 ) :
echo '<div id="cc_loadmore">More posts</div>'; // you can use <a> as well
endif;
else :
get_template_part( 'template-parts/content', 'none' );
endif; ?>
</div>
</main><!-- #main -->
</div><!-- #primary -->
然后在functions.php中，这里是admin ajax调用，加载更多函数和过滤函数。加载更多功能和过滤功能效果很好，正如我们所看到的，我只是在过滤帖子中复制计数循环，以便它像在正常循环中一样显示我的帖子，不同大小的帖子。
/*FUNCTION FILTER AND AJAX LOAD MORE*/
add_action( 'wp_enqueue_scripts', 'cc_script_and_styles');
function cc_script_and_styles() {
if ( is_home() ) {
global $wp_query;
wp_register_script( 'cc_scripts', get_stylesheet_directory_uri() . '/js/script.js', array('jquery') );
wp_localize_script( 'cc_scripts', 'cc_loadmore_params', array(
'ajaxurl' => site_url() . '/wp-admin/admin-ajax.php', // WordPress AJAX
'posts' => json_encode( $wp_query->query_vars ), // everything about your loop is here
'current_page' => $wp_query->query_vars['paged'] ? $wp_query->query_vars['paged'] : 1,
'max_page' => $wp_query->max_num_pages
) );
wp_enqueue_script( 'cc_scripts' );
}
}
add_action('wp_ajax_loadmorebutton', 'cc_loadmore_ajax_handler');
add_action('wp_ajax_nopriv_loadmorebutton', 'cc_loadmore_ajax_handler');
function cc_loadmore_ajax_handler(){
$params = json_decode( stripslashes( $_POST['query'] ), true );
$params['paged'] = $_POST['page'] + 1;
$params['post_status'] = 'publish';
query_posts( $params );
if( have_posts() ) :
while( have_posts() ): the_post();
$termsArray = get_the_terms($post->ID, "category");
$termsString ="";
foreach ( $termsArray as $term ) {
$termsString .= $term->slug;
}
?>
<div class="<?php echo $termsString ;?> flex-col-sm-4 item">
<article id="post-<?php the_ID(); ?>" <?php post_class();?>>
<div class="post-featured-thumbnail">
<?php
if ( has_post_thumbnail() ) {
if($count == 1){
the_post_thumbnail('blog_featured');
}else{
the_post_thumbnail();
}
}
;
if ( 'post' === get_post_type() ) :
?>
<div class="entry-meta">
<?php
numgrade_category_sticker();
?>
</div><!-- .entry-meta -->
<?php endif; ?>
</div>
<div class="post-content">
<header class="entry-header">
<?php
if ( is_singular() ) :
the_title( '<h1 class="entry-title">', '</h1>' );
else :
the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
endif;
?>
</header><!-- .entry-header -->
<div class="entry-content">
<?php echo excerpt($limit); ?>
</div><!-- .entry-content -->
</div>
</article><!-- #post-<?php the_ID(); ?> -->
</div>
<?php
endwhile;
wp_reset_postdata();
endif;
die;
}
add_action('wp_ajax_ccfilter', 'cc_filter_function');
add_action('wp_ajax_nopriv_ccfilter', 'cc_filter_function');
function cc_filter_function(){
if( isset( $_POST['category_filters'] ) )
$args['tax_query'] = array(
array(
'taxonomy' => 'category',
'field' => 'id',
'terms' => $_POST['category_filters'],
"posts_per_page" => 5
)
);
query_posts( $args );
global $wp_query;
if( have_posts() ) : $count = (int)0;
ob_start();
while( have_posts() ): $count++;
the_post();
if($count == 1){
$span = 'flex-col-xs-12';
$limit = 20;
}
if($count == 2 || $count == 3){
$span = 'flex-col-sm-6';
$limit = 13;
}
if($count > 3){
$span = 'flex-col-sm-4';
$limit = 13;
}
$termsArray = get_the_terms($post->ID, "category");
$termsString ="";
foreach ( $termsArray as $term ) {
$termsString .= $term->slug;
}
?>
<div class="<?php echo $termsString .' ' . $span ;?> item">
<article id="post-<?php the_ID(); ?>" <?php post_class();?>>
<div class="post-featured-thumbnail">
<?php
if ( has_post_thumbnail() ) {
if($count == 1){
the_post_thumbnail('blog_featured');
}else{
the_post_thumbnail();
}
}
;
if ( 'post' === get_post_type() ) :
?>
<div class="entry-meta">
<?php
numgrade_category_sticker();
?>
</div><!-- .entry-meta -->
<?php endif; ?>
</div>
<div class="post-content">
<header class="entry-header">
<?php
if ( is_singular() ) :
the_title( '<h1 class="entry-title">', '</h1>' );
else :
the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
endif;
?>
</header><!-- .entry-header -->
<div class="entry-content">
<?php echo excerpt($limit); ?>
</div><!-- .entry-content -->
</div>
</article><!-- #post-<?php the_ID(); ?> -->
</div>
<?php
endwhile;
wp_reset_postdata();
$posts_html = ob_get_contents();
ob_end_clean();
else:
$posts_html = '<p>Nothing found for your criteria.</p>';
endif;
echo json_encode( array(
'posts' => json_encode( $wp_query->query_vars ),
'max_page' => $wp_query->max_num_pages,
'found_posts' => $wp_query->found_posts,
'content' => $posts_html
) );
die();
}
最后，这是一个单独的 js 文件中的 js 代码
jQuery(function($){
/* LOAD MORE FUNCTION ON FORMATION ARCHIVE PAGE */
$('#cc_loadmore').click(function(){
$.ajax({
url : cc_loadmore_params.ajaxurl, // AJAX handler
data : {
'action': 'loadmorebutton', // the parameter for admin-ajax.php
'query': cc_loadmore_params.posts, // loop parameters passed by wp_localize_script()
'page' : cc_loadmore_params.current_page // current page
},
type : 'POST',
beforeSend : function ( xhr ) {
$('#cc_loadmore').text('Loading...'); // some type of preloader
},
success : function( posts ){
if( posts ) {
$('#cc_loadmore').text( 'More posts' );
$('#cc_posts_wrap').append( posts ); // insert new posts
cc_loadmore_params.current_page++;
if ( cc_loadmore_params.current_page == cc_loadmore_params.max_page )
$('#cc_loadmore').hide(); // if last page, HIDE the button
} else {
$('#cc_loadmore').hide(); // if no data, HIDE the button as well
}
}
});
return false;
});
/* FILTERING FUNCTION ON FORMATION ARCHIVE PAGE */
$('#post_filters').change(function(){
$.ajax({
url : cc_loadmore_params.ajaxurl,
data : $('#post_filters').serialize(), // form data
dataType : 'json', // this data type allows us to receive objects from the server
type : 'POST',
success : function( data ){
// when filter applied:
// set the current page to 1
cc_loadmore_params.current_page = 1;
// set the new query parameters
cc_loadmore_params.posts = data.posts;
// set the new max page parameter
cc_loadmore_params.max_page = data.max_page;
// change the button label back
// insert the posts to the container
$('#cc_posts_wrap').html(data.content);
// hide load more button, if there are not enough posts for the second page
if ( data.max_page < 2 ) {
$('#cc_loadmore').hide();
} else {
$('#cc_loadmore').show();
}
}
});
// do not submit the form
return false;
});
});
【讨论】：