Wordpress将php和html模板转换为短代码
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');
我想用这个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');