常阳时光

仿 WordPress 的 Post Embed 功能

WordPress 的 Post Embed 功能,是 4.4 版本新增的,可以在任意 WordPress 站点用嵌入的方式插入 WordPress 博客内的文章。当然了,前提是嵌入和被嵌入的 WordPress 博客都支持 Post Embed 功能并且没有禁用掉。这功能我是禁用掉了,因为我用得上的也只是站内引用。于是,用 大发 的方法仿了一个四不像。

前情回顾

仿 WordPress 的 Post Embed 功能

WordPress 的 Post Embed 功能,是 4.4 版本新增的,可以在任意 WordPress 站点用嵌入的方式插入 WordPress 博客内的文章。当然了,前提是嵌入和被嵌入的 Wor...

大发的方法

地址:WordPress 文章内链短代码 - fatesinger.com/76585

简单来说就是使用 get_posts 调用文章信息(包括浏览量,缩略图之类的,甚至文章摘要),然后通过短代码的方式添加文章 ID 来直接调用需要嵌入的文章插入到当前文章中。原文摘录:▼展开

下面的代码加入到functions.php
function fa_insert_posts( $atts, $content = null ){
extract( shortcode_atts( array(

'ids' => ''

),
$atts ) );
global $post;
$content = '';
$postids = explode(',', $ids);
$inset_posts = get_posts(array('post__in'=>$postids));
foreach ($inset_posts as $key => $post) {
setup_postdata( $post );
$content .= '<div class="card-today-history"><div class="card-thContents"><div class="card-thLine"></div><div class="card-thHeroTitle"><a target="_blank" class="label--thTitle" href="' . get_permalink() . '">' . get_the_title() . '</a><div class="v-floatRight card-thMeta">' . get_comments_number(). '<i class="iconfont icon-comment"></i></div></div></div></div>';
}
wp_reset_postdata();
return $content;
}
add_shortcode('fa_insert_post', 'fa_insert_posts');

使用方法:直接在文章中(html 代码模式下)使用短代码 [fa_insert_post ids=123,245] 即可。

如果不是在文章内容中,而是在其他地方想调用,则可使用 do_shortcode('[fa_insert_post ids=123,245]') 来调用。


目前在用的代码

改自大发,仅供参考,需要启用 WP-PostViews 插件,或者替换掉相关函数。

下面的代码加入到functions.php

// WordPress 文章内链短代码 - https://fatesinger.com/76585
function xx_insert_posts( $atts, $content = null ){
extract( shortcode_atts( array('ids' => ''), $atts ) );
global $post;
$content = '';
$postids = explode(',', $ids);
$inset_posts = get_posts(array('post__in'=>$postids));
foreach ($inset_posts as $key => $post) {
setup_postdata( $post );
$content .= '
<div class="wp-embed-post">
<p class="wp-embed-post-heading"><a target="_blank" class="wp-embed-post-title" href="' . get_permalink() . '">'. get_the_title() . '</a></p>
<div class="wp-embed-post-excerpt">'.wp_trim_words( get_the_content(), 100, '...' ).'</div>
<div class="wp-embed-post-footer">
<div class="wp-embed-post-site-title">
<a href="'.get_author_posts_url( get_the_author_meta( 'ID' ) ) .'" title="查看作者 '.get_the_author().' 发布的所有文章" rel="author">'
.get_avatar( get_the_author_meta('email'), '16' ).'<span>'.get_the_author().'</span>
</a>
</div>
<div class="wp-embed-post-meta">
<div class="wp-embed-post-reads">阅读
'.the_views(false, '', '', false).'
</div>
<div class="wp-embed-post-comments">
<a target="_blank" class="wp-embed-post-title" href="' . get_permalink() . '#comments"> 评论 ' . get_comments_number(). '</a>
</div>
</div>
</div>
</div>';
}
wp_reset_postdata();
return $content;
}
add_shortcode('xx_insert_post', 'xx_insert_posts');

CSS 参考

/** WordPress 文章内链短代码 New Embed**/
.wp-embed-post {
background: #fff;
border: 1px solid #e5e5e5;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
color: #82878c;
font-size: 14px;
overflow: auto;
padding: 16px;
margin-bottom: 16px;
}
.wp-embed-post a {
color: #666;
text-decoration: none;
}

.wp-embed-post-featured-image {
margin-bottom: 20px;
}
.wp-embed-post-featured-image img {
border: medium none;
height: auto;
width: 100%;
}
.wp-embed-post-featured-image.square {
float: left;
margin-right: 20px;
max-width: 160px;
}
.wp-embed-post p {
margin: 0;
}
p.wp-embed-post-heading {
font-size: 20px;
margin: 0 0 4px!important;
}
.wp-embed-post-heading a {
color: #32373c;
}
.wp-embed-post .wp-embed-post-more {
color: #b4b9be;
}
.wp-embed-post-footer {
display: table;
margin-top: 16px;
width: 100%;
}
.wp-embed-post-site-title .avatar {
border: 0 none;
height: 25px;
left: 0;
position: absolute;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
width: 25px;
}
.wp-embed-post-site-title a {
display: inline-block;
padding-left: 32px;
position: relative;
}
.wp-embed-post-meta, .wp-embed-post-site-title {
display: table-cell;
}
.wp-embed-post-meta {
text-align: right;
vertical-align: middle;
white-space: nowrap;
}
.wp-embed-post-comments, .wp-embed-post-reads {
color: #666;
display: inline;
}
.wp-embed-post-comments a, .wp-embed-post-share-tab-button {
display: inline-block;
}
.wp-embed-post-comments + .wp-embed-post-share {
margin-left: 10px;
}
/** WordPress 文章内链短代码 New Embed - END **/

使用方法

直接在文章中(html 代码模式下)使用短代码 [xx_insert_post ids=111,222] 即可。

如果不是在文章内容中,而是在其他地方想调用,则可使用 do_shortcode('[xx_insert_post ids=111,222]') 来调用。


参考文档

WordPress 官方:Shortcode API