[英]How to separate posts from WP_Query into 2 columns
I need to separate posts from WP_Query into 2 columns: first post will go to right column, 3 other posts will go to left column so the structure will look like this - https://prnt.sc/vc044d Please help me to improve my code.我需要将 WP_Query 中的帖子分成 2 列:第一个帖子将转到右列,其他 3 个帖子将转到左列,因此结构将如下所示 - https://prnt.sc/vc044d请帮助我改进我的代码。 Thanks a lot.非常感谢。
function mk_latestposts() {
// the query
$the_query = new WP_Query( array( 'posts_per_page' => 4 ) );
// The Loop
if ( $the_query->have_posts() ) {
$postcount = 0;
$string .= '<ul class="mk-recent-posts-list">';
while ( $the_query->have_posts() ) {
$the_query->the_post();
$postcount++;
// if this is the first post
if ( $postcount == 1 ) {
$string .= '<li class="first-post">';
$string .= '<a href="' . get_the_permalink() .'" rel="bookmark">' . get_the_post_thumbnail($post_id, array( 50, 50) ) . get_the_title() . get_the_date() .'</a></li>';
} else {
// if this is the next post
$string .= '<li class="next-post">';
$string .= '<a href="' . get_the_permalink() .'" rel="bookmark">' . get_the_post_thumbnail($post_id, array( 50, 50) ) . get_the_title() . get_the_date() .'</a></li>';
}
}
} else {
// no posts found
}
$string .= '</ul>';
return $string;
/* Restore original Post Data */
wp_reset_postdata();
}
// Add a shortcode
add_shortcode('mklatestposts', 'mk_latestposts');
Your code is fine You can do this with CSS.你的代码很好你可以用 CSS 来做到这一点。 Just add a common class to every <li>
Like <li class='single-post'>
and then apply this CSS.只需为每个<li>
添加一个公共类,例如<li class='single-post'>
然后应用此 CSS。 You can change it from List structure to Div structure whatever you want.您可以根据需要将其从 List 结构更改为 Div 结构。
li.single-post{ width: 47%; float: left;} ul.mk-recent-posts-list { width: 100%; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.