WordPress的Post Embed功能

WordPress 的 Post Embed 功能，是 4.4 版本新增的，可以在任意 WordPress 站点用嵌入的方式插入 WordPress 博客内的文章。你在写一篇文章的时候，输入自己博客的一篇文章链接后，会自动转化成一个卡片的形式文章，虽然说是给读者可以更好的体验，但是...这Css，功能什么的都不是很给力，最重要的是还会拖累WordPress的加载速度。

那么本文就教大家创建一个类似Post Embed的功能。

首先在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() . '">'. 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-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：

.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: rightright;  
    vertical-align: middle;  
    whitewhite-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;  
}

那我们在使用的试试如何使用呢？

直接输入：

[xx_insert_post ids=XXX]   

注意：XXX是你要引用文章的ID。

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知