WordPress

仿 WordPress 的 Post Embed 文章卡片内链功能

本文转自常阳时光,不再赘述原文的文字部分,文后会附上链接,顺便羡慕一下原作者的才华

1、下面的代码加入到主题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 .=  '

2、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 **/

3、使用方法

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

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

4、原文网址(常阳时光):https://cyhour.com/435/

[Lonesome_insert_post ids=197]

龙Ge

龙Ge

前端•不会,后端•是啥

喜欢在深夜写一点没用的代码。

评论

0

发表评论

邮箱不会被公开。
验证码