Wordpress将php和html模板转换为短码
Wordpress将php和html模板转换为短码
提问于 2018-08-11 00:43:57
我想做一个简短的代码从这个php代码，显示最近的博客帖子与css网格。我正在显示每个博客的图像和其他元数据。
<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>基本上，模板现在在所有内容之后显示在page.php中，我希望使用页面构建器有更多的控制，这样我就可以把它放在我想放的地方。我的php技巧很差，我试着把html连接成一个单独的字符串，但我总是搞砸了，因为循环和所有这些php变量。我也尝试过使用ob_start()、ob_get_clean()和ob_get_contents()，但由于某种原因，我最终遇到了无限循环。
function recent_blogs_grid() {}
add_shortcode('recent_blogs_grid', 'recent_blogs_grid');回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-11 05:10:33
我最终解决了这个问题，我不需要像这里的第一个代码那样用困难和愚蠢的方式来做这件事。
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();
}我只是将原始代码粘贴到另一个文件中，并将其导入到创建短代码的函数中。因为我不能编辑我提出的原始问题，所以这是它自己的文件"recent-blogs-grid-shortcode.php“中的原始html内容。
<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>我只需要在我的函数中导入它就可以了
function recent_blogs_grid() {
require_once('recent-blogs-grid-shortcode.php');
}
add_shortcode('recent_blogs_grid', 'recent_blogs_grid');页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51790812
复制相关文章
相似问题
腾讯云开发者
