Как использовать изотоп на WordPress с пользовательскими циклами и индивидуальным дизайном? - PullRequest
1 голос
/ 24 февраля 2020

Кто-нибудь знает, возможно ли заставить isotopte работать с пользовательским макетом сетки?

Например, у меня есть собственный дизайн страницы блога, подобный этому enter image description here

В моем l oop я говорю: если это первый пост, возьмите ширину 12 столбцов, если это второй и третий столбцы, ширину 6 столбцов, а все остальные посты - ширину 4 столбца.

И какую бы кнопку фильтра я ни щелкнул, я бы хотел сохранить этот дизайн, например, 4-й пост станет первым, если я нажму на фильтр соответствующей категории: enter image description here

Но что я получаю, это enter image description here

Изотоп не соблюдает условие l oop. Кто-нибудь знает, как этого добиться?

1 Ответ

1 голос
/ 12 марта 2020

Хорошо, наконец, мне удалось заставить его работать; Вот код На своей домашней странице я сначала строю фильтры с флажком. Затем в моем l oop я подсчитываю посты, чтобы дифференцировать размер поста с разными размерами столбцов.

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 -->

Затем в функциях. php, вот вызов admin ajax, загрузка дополнительная функция и функция фильтрации. Загрузка дополнительных функций и функция фильтрации работают хорошо, и, как мы видим, я просто дублирую счет l oop в фильтрующем сообщении, чтобы он отображал мое сообщение, как в обычном l oop, с сообщениями другого размера.

/*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;

  });
     });
...