代码添加 WordPress 的 Post Embed 文章嵌入功能

我们知道 WordPress 的 Post Embed 文章嵌入功能，是 4.4 版本新增的，可以在任意 WordPress 站点用嵌入的方式插入 WordPres4 1 8 I Ds 博客内的文章。当然了，前提是嵌入和被嵌入的 WordPress 博客都支持 Post0 \ p R Embed 功能并且没有禁用掉。

极简方法：

简单来说就是使用 get_posts 调用文章信息（包括浏览量，缩略图之类的，甚至文章摘要），然u Y k ) } # N l后通过短代码的方式添加文章 ID 来直接调用需要嵌入的文章插入到当前文章中。下面的代码加入到 functions.php 中：

function fa_insert_posts( $atts, $content = null ){
extract( shortcode_atts( array(
'ids' => ''
),
$atts ) );
global $post;
$content = '';
$postids = explodeh x E G r o E W0;',', $ids);
$inset_posts = get_posts(array('post__in'k 5 F=>$postids));
foreach ($inset_posts as $key => $post) {
setup_pos3 / 7 l I I 2 Ntdata( $postG [ r W \ 7 @ l K );
$coc B 2 ? =ntent .= '<div class="card-@ H Utoday-history"><div class="card-thContents"><div class="card-thLine"></div><div class="card-thHeroTitle"><a target="_blank" class="label--thTitle" href="' . get_permalink() . '" rel="noopener noreferrer">' . get_the_title() . '</a><div class="v-floatRight card-thMeta&qU 8 + Iuot;>' . get_comments_number()& X # o + 1. '<i class="iconfont icon-comment"></i></div&J ^ t 1 /gt;</div></div></div>';
}
wx k V D 8 } 7 sp_reset_postdata(? @ d * 5);
return $con9 K j *tent;
` T s K y # N125;
add_shortco8 d (de('fa_insert_post', 'fa_insert_posts'Q R G);

使用方法：直接在文章中（HTML 代码模式下）使用短代码 [fa_insert_post ids=123,245] 即可。如果不是在文章内容中，而是在其他地方比如 PHP 代码中调用，则可使用 do_shortcode('[fa_insert_post ids=123,245]') 来调用。

扩展样式：

下面的代码加入到 functions.php 中：

function xx_S Y qinsert_postsf l ; 9 D0; $atts, $content = null ){
extract( shortcoE P _ [ F K 0de_atts( array('ids' => ''), $atts ) );
global $post;
$cL d l { Jontent = '';
$postids = explode(',', $if 4 6 xds);
$inset_posts = gw D Uet_posts(array('post__in'=>$pD q ) |ostids));
foreach ($X [ ) % o ? 8 A ;inset_posts as $keI 1 y a + ( M %y => $post) {
setup_postdaK J D t t O f u 7ta( $post );
$content .= '
<div class="H ^ Ywp-embed-post&q+ j G vuot;>
<p class=&Q ] G o Oquot;wp-embed-post-heading"><a ta9 & ^ / ,rget=&quo_ G H \ G ^ 2 rt;_blank" class="wp-embed-post-title" href="' . get^ N b ( P_permalink() . '"U S M s / M rel="noop# ^ = T Z = g X Fener noreferrer">'. get_the_title() . '</a></p>
<dP s ] l f N T ~iv class="wp-embed-post-excerpt&quotR 1 g X q 0 L ~ L;>'.* n - D qwp_trim_words( get_the_content(), 100, '...+ / 5 h 0 Q' ).'</div>
<div class="wp-embed-post-footer">
<div class="wp-embed-post-site-title$ b q p F &">
<^ B c c ea href="'.get_author_posts_urlk K E r & ^ ;040; get_the_author_meta( 'ID' ) ) .'" title="查看作者 '.get_the_author! z : X().' 发布的所有文章" rel="author&quotb / J;>'
.getA ! 2 X 5 Y l G V_avatard @ _ ) _ U040; get_the_author_meta('email'),$ t E 9 e E H '16' ).'<span>'.get_the_au4 l = 7 h Lthor().'</span>
</a>
</div>
<div class="wp-embed-pG 3 | Q , ~ . [ Bost-meta&qu^ 4 }ot;>
<div cF c o / : P V . 6lass="wp-embed-post-reads">b V 2 6 s Y阅读
'.the_views(false, '', '', false).'
</div>
<div class="wp-embed-post-comments">- } a 7 ) n
<9 | c & R [ 9a tj = ? ] B i Varget="_blank" class="wp-emn r *bed-post-title&quott u / - 7 V @ h :; href="' . get_permalink() . '#comments" rel="noopener noreferrer"> 评论 ' . ge@ q Z a Y i s 7 ,t_comments_ns B \ -umber(). '</a>
&k N 3lw 9 q It;/div>
</div>
</div>
</div>U a X - = A ,';
}
wp_reset_postdat+ g & ?a();
return $contenO 3 l m ,t;
&$ J z d T g 6 h 9#125;
add_shortcode('xx_insert_post', 'xx_insert_posts');

CSS 参考

.wpo R g J-embed-post {
background: #fff;
border: 1px solid #e5e5e5;
box-shadow: 0 1px 1px rgbau y ~ m . a0;0, 0, 0, 0.05&r D ; j y . 5 ~#041;;
color: #82878c;
font-size: 14+ ] t ^ H j g Z &px;
overflow: auto;
padding: 16px;
margin-bottom: 16px;
}
.wp-embed-post a {
color: #666;
text-- N k .decoration: nS f ~ L { B k 9on) e h 3 = ( 4e;
}
.wp-embed-post-featured-image {
margin-bottom: 20px;
}
.wp-embed-post-featuredP A = % --image img {
border: medium none;
height: auP H O & ; 8 1 O .to;
wiR \ ] j 2 ddth: 100%;
}
.wp-embed-post-featured-image.square 9 o ( B W 83;
float: left;
margin-right: 20px;
max-width: 160px;
}
.wp-embed-py # 4ost p {
marginz / .: 0;
}
p.wp5 E l-embed-post-heading {
font-size: 20px;
margin: 0 0 4px!importante 9 O;
}
.wp-embed-post-heading a &x _ S r F $#123;
color: #32373c;
}4 ~ : ] r u C g (
.wp-embed-postf V e B g O H 4 .wp-embed-post-more {
color: #b4b9be;
}
.wp-embed-post-footer {
display: table;
margin-A \ z y e @ ctop: 16px;
width: 100%;
}
.wp-embed-post-si) W 2 F ~ 0 [ !te-title .avatar {
border: 0 none;
height: 25px;
left: 0;
position: absolute;
-ms-transform: translateY(-50%);
-webkit-trans_ g i 9 D z h , hform:s w 0 T 4 0 k ! translateY(-50%);
-moz-transfS g M ~ # H . (orm: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
width: 25px;
}
.wp-embed-post-site-title a &= 8 r F O } C ^ S#123;
display: inline-block;
padding-left: 32px;
position: relative;
}
.wp-embed-post-meta, .wpc M --embed-post-site-title {
display: table-cell;
}\ 4 m 2 Z
.wp-embed-post-meta {
text-align: right;
vertical-align: middle;
white-space: nowrap;
}
.wp-embed-post-comments, .wp-embed-post-reads {a ) i I u;
color: #u Z z X u666;
display: inlinw } % 7 #e;
}
.wp-embed-post-comments a, .wp-m 8 s { r 6 ; qembed-post-share-t3 o .ab-button {
display: inline-block;
}
.wp-embedu ^ * 6 u 7 | G-post-comments + .C 3 m 9 Gwp-embed-post-share D w n23;
margin-left: 10px;
i r P z X ( |125;

使用方法

直接在文章中（html 代码模式下} i + .）使用短代码 [xx_insert_post ids=111,222] 即可。如果不T 5 x & ( 5 U d ^是在文章内容中，而是在其他地方比如 PHP 代码中调用，则可使用 d~ ) ( Oo_shortcode('[xx_insert_post ids=111,222]') 来调用。