WordPress创建短代码实现内嵌卡片式调用其他文章方法

老蒋已经忘记从WordPress哪个版本开始，如果我们需要在编辑文章的时候需要嵌入当前站点其他文章的话，我们直接粘贴对应文章URL地址即可，自动会形成卡片式链接。不过，默认情况下，有些主题是没有率先做出来默认Post Embed卡片式文章调用样式的，所以比较难看。

这样是不是比较难看？当然也是可以用的。如果我们追求高一些的话，那我们就自制卡片式文章调用样式，这里参考网上一些办法，然后通过调整适合我们自己的。

第一、功能代码

添加到我们当前主题的Functions.php。

//卡片式内容嵌入//特色图片地址function jsk_the_thumbnail_src() {
      global $post;
        if ( get_post_meta($post->
ID, 'thumbnail', true) ) {
     //如果有缩略图，则显示缩略图      $image = get_post_meta($post->
    ID, 'thumbnail', true);
            return $image;
    }
 else {
      if ( has_post_thumbnail() ) {
     //如果有缩略图，则显示缩略图        $img_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->
    ID ), "Full");
            return $img_src[0];
              }
 else {
                return get_template_directory_uri().'/img/thumbnail.png';
 //文章中没有图片就设置默认图片        }
    }
}
/*卡片式文章内链功能*/function yx_embed_posts( $atts, $content = null ){
    extract( shortcode_atts( array('ids' =>
     ''),$atts ) );
    global $post;
    $content = '';
    $postids = explode(',', $ids);
    $inset_posts = get_posts(array('post__in'=>
    $postids));
    $category = get_the_category();
    foreach ($inset_posts as $key =>
 $post) {
    setup_postdata( $post );
    $content .= 'span class="embed-card">
    span class="embed-card-category">
    推荐阅读/span>
    span class="embed-card-img">
    a target="_blank" href="' . get_permalink() . '">
    img alt="'. get_the_title() . '" src="'. jsk_the_thumbnail_src() .'">
    /a>
    /span>
    span class="embed-card-info">
    a target="_blank" href="' . get_permalink() . '">
    span class="card-name">
    '. get_the_title() . '/span>
    /a>
    span class="card-abstract">
    '.wp_trim_words( get_the_excerpt(), 150, '...' ).'/span>
    span class="card-controls">
    span class="group-data">
     i>
    日期:/i>
    '. get_the_time('Y/n/j') .'/span>
    span class="group-data">
     i>
    分类:/i>
    a target="_blank" href="'.get_category_link($category[0]->
    term_id ).'">
    '. $category[0]->
    cat_name .'/a>
    /span>
    a target="_blank" href="' . get_permalink() . '">
    span class="card-btn-deep">
    阅读全文/span>
    /a>
    /span>
    /span>
    /span>
    link rel="stylesheet" href="'. get_template_directory_uri() .'/css/embed-card.css"/>
    ';
}
    wp_reset_postdata();
    return $content;
}
    add_shortcode('yx_embed_post', 'yx_embed_posts');

这里我们可能有些主题调用问题可能需要微调对应参数。比如还需要设置一个默认缩略图，如果没有缩略图的话会调用默认的。同时，我们需要准备一个样式文件（embed-card.css）。

第二、CSS样式部分

默认是我们需要在embed-card.css添加的，或者我们不用这个就直接合并到我们的主题样式中。

/* 卡片式内容样式 整理By itbulu.com */.embed-card,span.embed-card {
    display: block;
    position: relative;
    width: 680px;
    padding: 9px;
    margin: 30px auto;
    border: 1px dashed #d4d4d4;
    overflow: hidden;
    max-width: 90%;
}
.embed-card:hover,span.embed-card:hover {
    box-shadow: 1px 1px 8px #eee;
}
.embed-card a,span.embed-card a {
    padding-right: 0;
    text-decoration: none;
    color: #313131;
}
.embed-card span,span.embed-card span {
    display: block;
    padding-right: 0;
}
.embed-card-category {
    display: inline-block;
    height: 20px;
    line-height: 20px;
    padding: 0 5px;
    font-size: 12px;
}
.embed-card-category {
    background-color: #6a99d8;
    background-color: rgba(43,110,200,0.8);
    color: #fff;
}
.embed-card-category:hover {
    background-color: #d5e2f4;
    background-color: rgba(43,110,200,1);
}
.embed-card .embed-card-category {
    position: absolute;
    top: 9px;
    left: 0;
    padding-right: 5px;
}
.embed-card-img {
    float: left;
    margin-right: 14px;
}
.embed-card-img img {
    width: 180px;
    height: 150px;
}
.embed-card-info {
    padding-right: 4px;
    overflow: hidden;
}
.embed-card-info .card-name {
    font-size: 16px;
    height: 44px;
    line-height: 22px;
    margin-bottom: 10px;
    margin-top: 7px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    font-weight: bold;
}
.embed-card-info .card-tags {
    height: 20px;
    overflow: hidden;
}
    .embed-card-info .card-tags>
span {
    display: inline-block;
    padding: 0 7px;
    margin-right: 8px;
    height: 16px;
    border: 1px solid #eee;
    line-height: 16px;
    color: #999;
    font-size: 12px;
}
.embed-card-info .card-tags span.tag-noborder {
    border: 0;
}
.embed-card-info .card-abstract {
    height: 36px;
    line-height: 18px;
    margin: 5px 0;
    font-size: 12px;
    color: #666;
    overflow: hidden;
    margin-bottom: 20px;
}
.embed-card-info .card-controls {
    overflow: hidden;
    line-height: 28px;
}
.embed-card-info .card-controls .group-data {
    float: left;
    margin-right: 10px;
    color: #999;
    font-size: 12px;
}
.embed-card-info .card-controls .group-data i {
    margin-right: 5px;
    font-style: normal!important;
}
.embed-card-info .card-btn-deep {
    float: right;
    width: 68px;
    height: 28px;
    margin-left: 10px;
    line-height: 28px;
    text-align: center;
    font-size: 12px;
    background-color: #ff5e5c;
    color: #fff;
}
.embed-card-info .card-btn-deep:hover {
    opacity: .9;
}
@media only screen and (max-width:700px) {
span.embed-card {
    width: 95%;
    padding-left: 0;
    padding-right: 0;
}
.embed-card .embed-card-img {
    width: 24.27184%;
    margin-left: 9px;
}
.embed-card .embed-card-img img {
    width: 100%;
    height: auto;
}
.embed-card .embed-card-info {
    overflow: visible;
    padding: 0 9px;
}
.embed-card .embed-card-info .card-name {
    margin-top: 1%;
    margin-bottom: 1.5%;
}
}

第三、如何调用

我们直接这样调用。或者我们也可以做一个快速按钮在传统导航编辑器上。

//添加卡片内链按钮function appthemes_add_embed_posts() {
    ?>
        script type="text/javascript">
        if ( typeof QTags != 'undefined' ) {
                QTags.addButton( 'yx_embed_post', '卡片内链按钮', '','' );
        }
         /script>
?php }
    add_action('admin_print_footer_scripts', 'appthemes_add_embed_posts' );
    

这样，我们在编辑器【文本】切换后可以看到【卡片链接按钮】然后只要修改对应文章的ID即可。如果多篇就用英文逗号隔开。

这里有参考雅兮网部分代码和其他网站代码的合并组合，代码也有根据站点不同微调的。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！