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/post/7469.html

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