admin管理员组

文章数量:1122846

I am trying to achieve the following layout :

I have created a shortcode for this but I am not getting the desired result. Can anyone guide me where I am getting it wrong. Here is full shortcode. Thanks

<?php

function three_column_sc($atts){
    ob_start();
    ?>
    <div class="blog-area">
    <?php
    $atts = shortcode_atts( array(
    'cats' => '',
    'show_cat' => 'yes',
    'show_author' => 'yes',
    'show_date' => 'yes',
    'show_img' => 'yes',
    'posts_num'     => 5,
    'show_excerpt' =>'no',
    'date_format' => 'Y-m-d',
    
    ), $atts, 'home_blog_posts' );
    $cats = explode(',' , $atts['cats']);
    $args = array(
        'hide_empty' => 1,
        'orderby' => 'date',
        'order' => 'DSC',
        'exclude' => 1,
        'include' => $cats,
    );
    ?>
    <section class="post-home-content">
    <?php
   
        $the_query = new WP_Query(array(
            'post_type' => 'post',
            'posts_per_page' => $atts['posts_num'],
            'post_status' => 'publish'
        ));
        
        if ($the_query->have_posts()):
            $i = 0;
           while ($the_query->have_posts()):
                $the_query->the_post();
                 if ($i%2 == 0 ) :  ?>
        
        <div class="blog-column-1">
        <a class="image" href="<?php esc_url(the_permalink() ?? ''); ?>">
        <?php if (has_post_thumbnail()){
               the_post_thumbnail('large'); }
         ?>
         </a>
         <div class="post-content">
            <h3><a href="<?php esc_url(the_permalink() ?? ''); ?>"><?php echo esc_html(the_title()); ?></a></h3>
            <?php if ($atts['show_excerpt']==='yes'){
            $the_content = apply_filters('the_content', get_the_content()); ?>
            <?php if (!empty($the_content)){?>          
            <p class="post-exrpt"><?php echo wp_trim_words( esc_html(wp_strip_all_tags($the_content)), 20, '...'); ?></p>
            <?php }}?>
            <div class="blog-post-meta">
            <?php
                if ($atts['show_author'] != "no"){
                esc_html_e('By ', 'tabbed-posts');
                esc_url(the_author_posts_link() ?? '');
                echo esc_html(' &#124; ');
                }
                if ($atts['show_cat'] != "no"){ 
                esc_html_e('in ', 'tabbed-posts');
                esc_url(the_category(' ') ?? ''); 
                echo esc_html(' &#124; ');
                }
                if ($atts['show_date'] != "no"){ echo wp_date( $atts['date_format'], get_post_timestamp() ); }
                
            ?>
        </div>
        </div>
        </div>
        
    <?php  elseif($i%2==1): ?>
      
        <div class="blog-column-2">
        <div class="blog-image">
        <a href="<?php esc_url(the_permalink() ?? ''); ?>"> <?php if (has_post_thumbnail()){
              the_post_thumbnail( 'medium' ); }
         ?>
          </a>
          </div>
            <div class="blog-post-meta">
            <?php 
                
                if ($atts['show_cat'] != "no"){ 
                esc_url(the_category(' ') ?? ''); 
                }
                ?>
           </div>
            <div class="blog-post-title">
            <h4><a href="<?php esc_url(the_permalink() ?? '');?>" title="<?php esc_attr(the_title());?>"><?php echo esc_html(the_title());?></a></h4>
            </div>
          </div>
           <?php  else: ?>
           <div class="blog-column-3">
        
            <div class="blog-image">
            <a href="<?php esc_url(the_permalink() ?? ''); ?>"> <?php if (has_post_thumbnail()){
              the_post_thumbnail( 'medium' );}
                ?>
            </a>
            </div>
            <div class="blog-post-meta">
            <?php 
                if ($atts['show_cat'] != "no"){ 
                esc_url(the_category(' ') ?? ''); 
                }
                ?>
            </div>
            <div class="blog-post-title">
            <h4><a href="<?php esc_url(the_permalink() ?? '');?>" title="<?php esc_attr(the_title());?>"><?php echo esc_html(the_title());?></a></h4>
            </div>
            </div>
        <?php
         endif;
                  $i++;
            endwhile;
            
        endif;
        wp_reset_postdata();
        ?>

       </section><!---sectio end-->
    </div> <!---blog area--->
   
    <?php
    $output = ob_get_clean();
    return $output;
}
add_shortcode('home_blog_posts', 'three_column_sc');

I am trying to achieve the following layout :

I have created a shortcode for this but I am not getting the desired result. Can anyone guide me where I am getting it wrong. Here is full shortcode. Thanks

<?php

function three_column_sc($atts){
    ob_start();
    ?>
    <div class="blog-area">
    <?php
    $atts = shortcode_atts( array(
    'cats' => '',
    'show_cat' => 'yes',
    'show_author' => 'yes',
    'show_date' => 'yes',
    'show_img' => 'yes',
    'posts_num'     => 5,
    'show_excerpt' =>'no',
    'date_format' => 'Y-m-d',
    
    ), $atts, 'home_blog_posts' );
    $cats = explode(',' , $atts['cats']);
    $args = array(
        'hide_empty' => 1,
        'orderby' => 'date',
        'order' => 'DSC',
        'exclude' => 1,
        'include' => $cats,
    );
    ?>
    <section class="post-home-content">
    <?php
   
        $the_query = new WP_Query(array(
            'post_type' => 'post',
            'posts_per_page' => $atts['posts_num'],
            'post_status' => 'publish'
        ));
        
        if ($the_query->have_posts()):
            $i = 0;
           while ($the_query->have_posts()):
                $the_query->the_post();
                 if ($i%2 == 0 ) :  ?>
        
        <div class="blog-column-1">
        <a class="image" href="<?php esc_url(the_permalink() ?? ''); ?>">
        <?php if (has_post_thumbnail()){
               the_post_thumbnail('large'); }
         ?>
         </a>
         <div class="post-content">
            <h3><a href="<?php esc_url(the_permalink() ?? ''); ?>"><?php echo esc_html(the_title()); ?></a></h3>
            <?php if ($atts['show_excerpt']==='yes'){
            $the_content = apply_filters('the_content', get_the_content()); ?>
            <?php if (!empty($the_content)){?>          
            <p class="post-exrpt"><?php echo wp_trim_words( esc_html(wp_strip_all_tags($the_content)), 20, '...'); ?></p>
            <?php }}?>
            <div class="blog-post-meta">
            <?php
                if ($atts['show_author'] != "no"){
                esc_html_e('By ', 'tabbed-posts');
                esc_url(the_author_posts_link() ?? '');
                echo esc_html(' &#124; ');
                }
                if ($atts['show_cat'] != "no"){ 
                esc_html_e('in ', 'tabbed-posts');
                esc_url(the_category(' ') ?? ''); 
                echo esc_html(' &#124; ');
                }
                if ($atts['show_date'] != "no"){ echo wp_date( $atts['date_format'], get_post_timestamp() ); }
                
            ?>
        </div>
        </div>
        </div>
        
    <?php  elseif($i%2==1): ?>
      
        <div class="blog-column-2">
        <div class="blog-image">
        <a href="<?php esc_url(the_permalink() ?? ''); ?>"> <?php if (has_post_thumbnail()){
              the_post_thumbnail( 'medium' ); }
         ?>
          </a>
          </div>
            <div class="blog-post-meta">
            <?php 
                
                if ($atts['show_cat'] != "no"){ 
                esc_url(the_category(' ') ?? ''); 
                }
                ?>
           </div>
            <div class="blog-post-title">
            <h4><a href="<?php esc_url(the_permalink() ?? '');?>" title="<?php esc_attr(the_title());?>"><?php echo esc_html(the_title());?></a></h4>
            </div>
          </div>
           <?php  else: ?>
           <div class="blog-column-3">
        
            <div class="blog-image">
            <a href="<?php esc_url(the_permalink() ?? ''); ?>"> <?php if (has_post_thumbnail()){
              the_post_thumbnail( 'medium' );}
                ?>
            </a>
            </div>
            <div class="blog-post-meta">
            <?php 
                if ($atts['show_cat'] != "no"){ 
                esc_url(the_category(' ') ?? ''); 
                }
                ?>
            </div>
            <div class="blog-post-title">
            <h4><a href="<?php esc_url(the_permalink() ?? '');?>" title="<?php esc_attr(the_title());?>"><?php echo esc_html(the_title());?></a></h4>
            </div>
            </div>
        <?php
         endif;
                  $i++;
            endwhile;
            
        endif;
        wp_reset_postdata();
        ?>

       </section><!---sectio end-->
    </div> <!---blog area--->
   
    <?php
    $output = ob_get_clean();
    return $output;
}
add_shortcode('home_blog_posts', 'three_column_sc');
  • wp-query
  • shortcode
Share Improve this question asked Jul 9, 2024 at 15:31 kalyankalyan 1731 gold badge5 silver badges11 bronze badges 3
  • "not desired result" is really open ended - what is the result you are getting? Where specifically is it going wrong? If the display isn't what you want, is it just a CSS thing? Or are you not getting the right classes added to the returned results? Please explain what exactly is going wrong. – Tony Djukic Commented Jul 10, 2024 at 21:00
  • @TonyDjukic Thanks for your comment. I might be a little vague. Actually, I want the 1st column with the class "blog-column-1" with just one post and subsequently next two columns with the class "blog-column-2" & "blog-column-3" with three posts in each of them. I think I getting the iteration getting wrong. – kalyan Commented Jul 11, 2024 at 8:54
  • What are you getting now? I'm also not quite understanding your $i%2==1, what is the %2 doing here? I think that may be messing with your counts... – Tony Djukic Commented Jul 11, 2024 at 19:54
Add a comment  | 

1 Answer 1

Reset to default 0

Ok, I think your iterations were off...

You start the count at 0, so while you have the posts from 1 o 7 in the picture, you're actually working with 0 to 6.

So I re-wrote it with greater than and less than comparisons in the if and elseif conditions.

<?php
function three_column_sc($atts){
    ob_start();
    ?>
    <div class="blog-area">
        <?php
            $atts = shortcode_atts( array(
                'cats' => '',
                'show_cat' => 'yes',
                'show_author' => 'yes',
                'show_date' => 'yes',
                'show_img' => 'yes',
                'posts_num'     => 7,
                'show_excerpt' =>'no',
                'date_format' => 'Y-m-d',
                ), $atts, 'home_blog_posts' );
                $cats = explode(',' , $atts['cats']);
                $args = array(
                'hide_empty' => 1,
                'orderby' => 'date',
                'order' => 'DSC',
                'exclude' => 1,
                'include' => $cats,
            );
        ?>
        <section class="post-home-content">
        <?php
            $the_query = new WP_Query( array(
                'post_type' => 'post',
                'posts_per_page' => $atts['posts_num'],
                'post_status' => 'publish'
            ) );
            if( $the_query->have_posts() ) :
                // we set the iteration count at zero
                $i = 0;
                while ($the_query->have_posts()):
                    $the_query->the_post();
                    //first iteration check: is this the first post (aka zero)?
                    if( $i == 0 ) :  ?>
                        <div class="blog-column-1">
                            <a class="image" href="<?php esc_url(the_permalink() ?? ''); ?>">
                                <?php if( has_post_thumbnail() ) :
                                    the_post_thumbnail('large');
                                endif; ?>
                            </a>
                            <div class="post-content">
                                <h3><a href="<?php esc_url( the_permalink() ?? '' ); ?>"><?php echo esc_html( the_title() ); ?></a></h3>
                                <?php if( $atts['show_excerpt'] === 'yes' ) {
                                    $the_content = apply_filters( 'the_content', get_the_content() ); ?>
                                    <?php if( !empty( $the_content ) ) { ?>          
                                        <p class="post-exrpt"><?php echo wp_trim_words( esc_html(wp_strip_all_tags($the_content)), 20, '...'); ?></p>
                                    <?php } } ?>
                                    <div class="blog-post-meta">
                                        <?php
                                            if( $atts['show_author'] != "no" ) {
                                                esc_html_e('By ', 'tabbed-posts');
                                                esc_url(the_author_posts_link() ?? '');
                                                echo esc_html(' &#124; ');
                                            }
                                            if( $atts['show_cat'] != "no" ) { 
                                                esc_html_e('in ', 'tabbed-posts');
                                                esc_url(the_category(' ') ?? ''); 
                                                echo esc_html(' &#124; ');
                                            }
                                            if( $atts['show_date'] != "no" ){
                                                echo wp_date( $atts['date_format'], get_post_timestamp() );
                                            }
                                        ?>
                                    </div>
                            </div>
                        </div>
                    <?php
                    //Second iteration check, are the posts greater than 0 and less than 4, or are these posts 1, 2 & 3 as iterations, or 2, 3, 4 as an actual count?
                    elseif( $i > 0 && $i < 4 ): ?>
                        <div class="blog-column-2">
                            <div class="blog-image">
                                <a href="<?php esc_url(the_permalink() ?? ''); ?>">
                                    <?php if (has_post_thumbnail()){ the_post_thumbnail( 'medium' ); } ?>
                                </a>
                            </div>
                            <div class="blog-post-meta">
                            <?php
                                if ($atts['show_cat'] != "no"){ 
                                    esc_url(the_category(' ') ?? ''); 
                                }
                            ?>
                            </div>
                            <div class="blog-post-title">
                                <h4><a href="<?php esc_url(the_permalink() ?? '');?>" title="<?php esc_attr(the_title());?>"><?php echo esc_html(the_title());?></a></h4>
                            </div>
                        </div>
                    <?php
                    //Lastly we check if the post is iteration 4 or higher, or posts 5, 6 and 7
                    elseif( $i >= 4 ) : ?>
                        <div class="blog-column-3">
                            <div class="blog-image">
                                <a href="<?php esc_url(the_permalink() ?? ''); ?>">
                                    <?php if (has_post_thumbnail()){ the_post_thumbnail( 'medium' );} ?>
                                </a>
                            </div>
                            <div class="blog-post-meta">
                            <?php
                                if ($atts['show_cat'] != "no"){ 
                                    esc_url(the_category(' ') ?? ''); 
                                }
                            ?>
                            </div>
                            <div class="blog-post-title">
                                <h4><a href="<?php esc_url(the_permalink() ?? '');?>" title="<?php esc_attr(the_title());?>"><?php echo esc_html(the_title());?></a></h4>
                            </div>
                        </div>
                    <?php
                    endif;
                    $i++;
                endwhile;
            endif;
            wp_reset_postdata();
            ?>
        </section><!---sectio end-->
    </div> <!---blog area--->
    <?php
    $output = ob_get_clean();
    return $output;
}
add_shortcode('home_blog_posts', 'three_column_sc');

I haven't tested this though, so there could be other things wrong with it that I didn't catch because I've only focused on the iterations and conditions.

Hope this solves it.

本文标签： shortcodeHow to create a three column blog layout with a single query and with three different classes

版权声明：本文标题：shortcode - How to create a three column blog layout with a single query and with three different classes? 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1736301139a1931075.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。