网站优化

网站优化

Products

当前位置:首页 > 网站优化 >

带有Bootstrap网格的Wordpress循环。 如何优化此代码?

GG网络技术分享 2025-03-18 16:12 16


问题描述:

enter image description hereenter image description here

In first img code is working with posts == 5

In second image code getting broken if posts == 3

.row doenst close

How to use wordpress Lopp with Bootstrap grid I wanna to know the best way to optimize my code. This code work correctly but I wanna just to optimize this code I think this isn\'t the best solution. Please show me how I can optimize this code. Thank you.

<div class=\"container\">

<?php

$args = [

\'post_status\' => \'publish\',

\'posts_per_page\' => 6,

\'no_found_rows\' => true,

];

$query = new WP_Query( $args );

while ( $query->have_posts() ) : $query->the_post();

if ( $query->current_post === 0 )

{

echo \'<div class=\"row\">\';

echo \'<div class=\"col-12 col-lg-6\">\'; ?>

<article id=\"post-<?php the_ID(); ?>\" <?php post_class( \'post 1\' ); ?>>

<figure>

<?php the_post_thumbnail(\'full\', array(\'class\' => \'img-fluid\') ); ?>

<figure>

<div class=\"entry\">

<div class=\"entry-title\">

<?php the_title(); ?>

</div>

</div>

</article>

<?php

echo \'</div>\';

}

if ( $query->current_post === 1 )

{

echo \'<div class=\"col-12 col-lg-6\">\'; ?>

<article id=\"post-<?php the_ID(); ?>\" <?php post_class( \'post 2\' ); ?>>

<figure>

<?php the_post_thumbnail(\'full\', array(\'class\' => \'img-fluid\') ); ?>

<figure>

<div class=\"entry\">

<div class=\"entry-title\">

<?php the_title(); ?>

</div>

</div>

</article>

<?php

}

if ( $query->current_post === 2 )

{ ?>

<article id=\"post-<?php the_ID(); ?>\" <?php post_class( \'post 3\' ); ?>>

<figure>

<?php the_post_thumbnail(\'full\', array(\'class\' => \'img-fluid\') ); ?>

<figure>

<div class=\"entry\">

<div class=\"entry-title\">

<?php the_title(); ?>

</div>

</div>

</article>

<?php

}

if ( $query->current_post === 3 )

{ ?>

<article id=\"post-<?php the_ID(); ?>\" <?php post_class( \'post 4\' ); ?>>

<figure>

<?php the_post_thumbnail(\'full\', array(\'class\' => \'img-fluid\') ); ?>

<figure>

<div class=\"entry\">

<div class=\"entry-title\">

<?php the_title(); ?>

</div>

</div>

</article>

<?php

echo \'</div>\';

echo \'</div>\';

}

endwhile; wp_reset_postdata(); ?>

</div>

<div class=\"container\">

<div class=\"row\">

<div class=\"col-6\">

<img src=\"\" alt=\"\">

<h1>TITLE</h1>

<div class=\"exerpt\">

exerpt

</div>

</div>

<div class=\"col-6\">

<article class=\"row\">

<div class=\"col-4\">

<img src=\"\" alt=\"\">

</div>

<div class=\"col-8\">

title

</div>

</article>

<article class=\"row\">

<div class=\"col-4\">

<img src=\"\" alt=\"\">

</div>

<div class=\"col-8\">

title

</div>

</article>

<article class=\"row\">

<div class=\"col-4\">

<img src=\"\" alt=\"\">

</div>

<div class=\"col-8\">

title

</div>

</article>

</div>

</div>

<div class=\"row\">

<div class=\"col-6\">

post-4

</div>

<div class=\"col-6\">

post-5

</div>

</div>

</div>

网友观点:

You don\'t need to write the same part of code each time you check a condition.

<div class=\\\"container\\\">

<?php

$args = [

\'post_status\' => \'publish\',

\'posts_per_page\' => 6,

\'no_found_rows\' => true,

];

$query = new WP_Query( $args );

while ( $query->have_posts() ) : $query->the_post();

$post_num = strval($query->current_post + 1);

$post_count = wp_count_posts()->publish;

if ( $query->current_post === 0 || $query->current_post === 4 ) : ?>

<div class=\\\"row\\\">;

<?php ;endif; ?>

<?php if ( $query->current_post === 0 || $query->current_post === 1 || $query->current_post === 4 || $query->current_post === 5 ) : ?>

<div class=\\\"col-lg-6\\\">\'

<?php ;endif; ?>

<article id=\\\"post-<?php the_ID(); ?>\\\" <?php post_class( $post_num ); ?>>

<figure>

<?php the_post_thumbnail(\'full\', array(\'class\' => \'img-fluid\') ); ?>

</figure>

<?php if ( $query->current_post === 0) : ?>

<div class=\\\"post_excerpt\\\">

<?php the_excerpt(); ?>

</div>

<?php ;endif; ?>

<div class=\\\"entry\\\">

<div class=\\\"entry-title\\\">

<?php the_title(); ?>

</div>

</div>

</article>

<?php if ( $query->current_post === 0 || $query->current_post === 3 || $query->current_post === 4 || $query->current_post === 5 || $query->current_post === $post_count-1 ) : ?>

</div>

<?php ;endif; ?>

<?php if ( $query->current_post === 3 || $query->current_post === 5 || $query->current_post === $post_count-1 ) : ?>

</div>

<?php ;endif; ?>

<?php endwhile; wp_reset_postdata(); ?>

</div>

标签:

提交需求或反馈

Demand feedback