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

PetitQ WordPress教程 2020-3-07 1.92K 0 0

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

极简方法：

简单来说就是使用 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() . '" rel="noopener noreferrer">' . 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] 即可。如果不是在文章内容中，而是在其他地方比如 PHP 代码中调用，则可使用 do_shortcode('[fa_insert_post ids=123,245]') 来调用。

扩展样式：

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

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() . '" rel="noopener noreferrer">'. 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" rel="noopener noreferrer"> 评论 ' . get_comments_number(). '</a>

```
						</div>
```
```
					</div>
```
```
				</div>
```
```
			</div>';
```
```
    }
```
```
    wp_reset_postdata();
```
```
    return $content;
```
```
}
```

add_shortcode('xx_insert_post', 'xx_insert_posts');

CSS 参考

```
.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;
```
```
}
```

使用方法

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

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

已有 480 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

WordPress教程

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

极简方法：

扩展样式：

CSS 参考

使用方法

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

相关文章

后台设置页面使用WordPress媒体上传工具上传图片

利用百度快照变通下载安装 WordPress 插件

WordPress 实现分页Ajax无限加载功能

发表回复取消回复

热销模板

WordPress教程

极简方法：

扩展样式：

CSS 参考

使用方法

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

相关文章

发表回复 取消回复

热销模板

发表回复取消回复