问题描述：

I want to make a shortcode out of this php code that displays recent blog posts with css grid. I\'m displaying the image and other meta-data about each blog.

<div class=\"wrapper\">
<?php $q = new WP_Query( \'posts_per_page=3\' ); ?>
<div class=\"recent-blogs\">
<?php while ( $q->have_posts() ) : $q->the_post(); ?>
<div class=\"blog-item\">
<h3 class=\"title\"><a href=\"<?php the_permalink(); ?>\"><?php the_title(); ?></a></h3>
<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), \'thumbnail\' ); ?>    
<img class=\"image\" src=\"<?php echo $url ?>\" />
<div class=\"avatar\"><?php echo get_avatar( get_the_author_meta(\'ID\'), 40); ?></div>
<div class=\"author\"><?php the_author_posts_link(); ?></div>
<div class=\"time\"><?php the_time(\'m.d.y\'); ?></div>
<div class=\"category\"><?php the_category(); ?></div>
<div class=\"comments\"><?php comments_number(); ?></div>
<?php the_excerpt(); ?>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
</div>    
</div>

Basically the template is now being displayed in page.php after all the content and i want to have more control with my page builder so i can place it where i want.

My php skills are bad and i tried concatenating the html into a single string but i always screw up because of the loop and all these php variables. Also tried using ob_start(), ob_get_clean() and ob_get_contents() but for some reason i end up with an infinite loop.

function recent_blogs_grid() {}
add_shortcode(\'recent_blogs_grid\', \'recent_blogs_grid\');

图片转代码服务由CSDN问答提供

感谢您的意见，我们尽快改进~

功能建议

我想用这个PHP代码制作一个短代码，用css网格显示最近的博客文章。 我正在显示关于每个博客的图像和其他元数据。</ p>

 ＆lt; div class =“wrapper”＆gt; 
＆lt;？php $ q = new WP_Query  （\'posts_per_page = 3\'）;  ？＆gt; 
＆lt; div class =“recent-blogs”＆gt; 
＆lt;？php while（$ q-＆gt; have_posts（））：$ q-＆gt; the_post（）;  ？＆gt; 
＆lt; div class =“blog-item”＆gt; 
＆lt; h3 class =“title”＆gt;＆lt; a href =“＆lt;？php the_permalink（）;？＆gt;”＆gt  ;＆lt;？php the_title（）;  ？＆gt;＆lt; / a＆gt;＆lt; / h3＆gt; 
＆lt;？php $ url = wp_get_attachment_url（get_post_thumbnail_id（$ post-＆gt; ID），\'thumbnail\'）;  ？＆GT;  
＆lt; img class =“image”src =“＆lt;？php echo $ url？＆gt;”  /＆gt; 
＆lt; div class =“avatar”＆gt;＆lt;？php echo get_avatar（get_the_author_meta（\'ID\'），40）;  ？＆gt;＆lt; / div＆gt; 
＆lt; div class =“author”＆gt;＆lt;？php the_author_posts_link（）;  ？＆gt;＆lt; / div＆gt; 
＆lt; div class =“time”＆gt;＆lt;？php the_time（\'m.d.y\'）;  ？＆gt;＆lt; / div＆gt; 
＆lt; div class =“category”＆gt;＆lt;？php the_category（）;  ？＆gt;＆lt; / div＆gt; 
＆lt; div class =“comments”＆gt;＆lt;？php comments_number（）;  ？＆gt;＆lt; / div＆gt; 
＆lt;？php the_excerpt（）;  ？＆gt; 
＆lt; / div＆gt; 
＆lt;？php endwhile;  ？＆gt; 
＆lt;？php wp_reset_postdata（）;  ？＆gt; 
＆lt; / div＆gt;  
＆lt; / div＆gt; 
</ code> </ pre> 
基本上，在所有内容之后，模板现在显示在page.php中，我希望能够更好地控制我的页面构建器 我可以把它放在我想要的地方。
我的PHP技能很差，我尝试将html连接成一个单独的字符串，但我总是搞砸了因为循环和所有这些PHP变量。 还尝试使用ob_start（），ob_get_clean（）和ob_get_contents（），但出于某种原因，我最终得到了一个无限循环。</ p> 
  function recent_blogs_grid（）{} 
add_shortcode（\'  recent_blogs_grid\'，\'recent_blogs_grid\'）; 
</ code> </ pre> 
</ div> 
网友观点：
I solved it in the end and i didn\'t have to do this the hard and stupid way like its done with the first code here bellow.
function recent_blogs_grid() {        
$q = new WP_Query( \'posts_per_page=3\' );
echo \'<div class=\\\"recent-blogs-wrapper\\\">\';
echo \'<div class=\\\"recent-blogs-gallery\\\">\';
while ( $q->have_posts() ) : $q->the_post();            
echo \'<div class=\\\"recent-blogs-item\\\">\';
echo \'<h3 class=\\\"blog-title-meta\\\"><a href=\\\"\';
echo the_permalink();
echo \'\\\">\';
echo the_title();
echo \'</a></h3>\';
$url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), \'thumbnail\' );
echo \'<a href=\\\"\';
echo the_permalink();
echo \'\\\"><img class=\\\"blog-image-meta\\\" src=\\\"\';
echo $url;
echo \'\\\" /></a>\'; 
echo \'<div class=\\\"blog-metadata-wrapper\\\">\';
echo \'<div class=\\\"blog-avatar-meta\\\">\';
echo get_avatar( get_the_author_meta(\'ID\'), 40);
echo \'</div>\';
echo \'<span class=\\\"blog-author-meta\\\">\';
echo the_author_posts_link();
echo \'</span>\';
echo \'<span class=\\\"blog-datetime-meta\\\"><i class=\\\"fa fa-clock-o\\\"></i>\';
echo the_time(\'m.d.y\');
echo \'</span>\';
echo \'<span class=\\\"blog-category-meta\\\"><i class=\\\"fa fa-tags\\\"></i>\';
echo the_category();
echo \'</span>\';
echo \'<span class=\\\"blog-comments-meta\\\"><i class=\\\"fa fa-commenting\\\"></i>\';
echo comments_number();
echo \'</span>\';
echo \'</div>\';
echo the_excerpt(); 
echo \'<a class=\\\"blog-read-more\\\" href=\\\"\';
echo the_permalink();
echo \'\\\">Read More</a>\';
echo \'</div>\';
endwhile;
echo \'</div>\';
echo \'</div>\';
wp_reset_query();
}
I just pasted the original code in another file and imported it inside my function where i am creating the shortcode. Since i can\'t edit the original question i asked, this is the original html stuff in its own file \\\"recent-blogs-grid-shortcode.php\\\".
<div class=\\\"recent-blogs-wrapper\\\">
<?php $q = new WP_Query( \'posts_per_page=3\' ); ?>
<div class=\\\"recent-blogs-gallery\\\">
<?php while ( $q->have_posts() ) : $q->the_post(); ?>
<div class=\\\"recent-blogs-item\\\">
<h3 class=\\\"blog-title-meta\\\">
<a href=\\\"<?php the_permalink(); ?>\\\"><?php the_title(); ?></a>
</h3>
<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), \'thumbnail\' ); ?>
<a href=\\\"<?php the_permalink(); ?>\\\">
<img class=\\\"blog-image-meta\\\" src=\\\"<?php echo $url ?>\\\" />
</a>
<div class=\\\"blog-metadata-wrapper\\\">
<div class=\\\"blog-avatar-meta\\\"><?php echo get_avatar( get_the_author_meta(\'ID\'), 40); ?></div>
<span class=\\\"blog-author-meta\\\"><?php the_author_posts_link(); ?></span>
<span class=\\\"blog-datetime-meta\\\"><i class=\\\"fa fa-clock-o\\\"></i><?php the_time(\'m.d.y\'); ?></span>
<span class=\\\"blog-category-meta\\\"><i class=\\\"fa fa-tags\\\"></i><?php the_category(); ?></span>
<span class=\\\"blog-comments-meta\\\"><i class=\\\"fa fa-commenting\\\"></i><a href=\\\"<?php the_permalink(); ?>\\\"><?php comments_number(); ?></a></span>
</div>
<?php the_excerpt(); ?>
<a class=\\\"blog-read-more\\\" href=\\\"<?php the_permalink(); ?>\\\">Read More</a>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
</div>          
</div>
And i just used require pretty much to import it inside my function
function recent_blogs_grid() {
require_once(\'recent-blogs-grid-shortcode.php\');
}
add_shortcode(\'recent_blogs_grid\', \'recent_blogs_grid\');