调用站内文章/文章内链短代码

2017/05/25

昨天在大发的博客里看到他调用的站内文章样式很好看，高大上。随即给他留言向他请教，今天回复了一条教程链接，原来发哥早就写过教程，有需要的也可以看看，链接地址：https://fatesinger.com/76585，不过教程上面并没有写出调用缩略图的代码和方法，自己瞎折腾了一天，每次调用缩略图的时候，图片会显示到别的地方，最后通过以背景图的方式才成功。以下是我修改的代码：

/**
   *调用站内文章\文章内链短代码
 */
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 );
        $imgthumb = wp_get_attachment_image_src( get_post_thumbnail_id( $inset_posts->ID ), 'post-thumbnail' );//定义缩略图ID
        $content .=  '<div class="product-box" data-id="' . get_the_ID() . '" >
                        <div class="item" data-id="' . get_the_ID() . '">
                            <a href="' . get_permalink() . '" target="_blank" data-id="' . get_the_ID() . '" alt="' . get_the_title() . '">
                                <span style="background-repeat: no-repeat;background-position: center center;background-size: cover;background-image: url(https://wwwguzhangvcom-1253552504.file.myqcloud.com/wp-content/uploads/2017/05/zhanbiao.png);"  class="img" ><img src="' . esc_url( $imgthumb[0] ) . '"></span>
                                <h3>' . get_the_title() . '</h3>
                                <div>' . wp_trim_words( get_the_excerpt(),60) . '</div>
                                <i class="p-arr"><i></i></i>
                            </a>
                        </div>
                    </div>';
    }
    wp_reset_postdata();
    return $content;
}
add_shortcode('fa_insert_post', 'fa_insert_posts');

调用方法
直接使用短代码[/*fa_insert_post ids=123,245*/]即可，123和245就是调用的文章ID

如果不是在文章内容中，而是在其他地方调用，则可使用do_shortcode('[/*fa_insert_post ids=123,245*/]')来调用。

自定义CSS样式，请根据自己的需要修改

/**调用站内文章\文章内链短代码**/
.product-box {
    margin: 35px 0;
    border: 1px solid #e5e5e5;
    padding: 9px;
}
.product-box div {
    display: block;
    font-size: 13px;
    word-wrap: break-word;
}
.product-box .item:last-child {
    margin: 0;
}
.product-box .item a {
    display: block;
    padding: 10px 72px 10px 10px;
    height: 90px;
    position: relative;
    color: #999;
}
.product-box .item a:hover{text-decoration:none;background-color:#f4f4f4}
.product-box .img {
    float: left;
    margin-right: 20px;
    width: 140px;
    height: 90px;
    overflow: hidden;
}
.product-box .img img {
    width: 100%;
    height:auto;
    vertical-align: middle;
}
.product-box h3 {
    margin: 2px 0;
    font-size: 16px;
    font-weight: normal;
    color: #666;
    height: 40px;
    overflow: hidden;
}
.product-box .p-arr {
    position: absolute;
    right: 18px;
    top: 40px;
    width: 12px;
    height: 22px;
    background: url(/images/local/list_sprites7.png) no-repeat -140px -40px;
}

再来看看我的效果：