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

昨天在大发的博客里看到他调用的站内文章样式很好看,高大上。随即给他留言向他请教,今天回复了一条教程链接,原来发哥早就写过教程,有需要的也可以看看,链接地址: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(http://cdn.guzhangv.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;
}

 

再来看看我的效果:

历史的今天:

赞 赏

    推 荐 阅 读

  • 给网站开启CDN加速和云存储!

    什么是CDN加速 相信很多站长朋友都在用wp-super-cache这款插件给自己的网站开启静态加速,它的原理是通过把网站生成静态页面缓存到本地,让访客直接浏览的是这个文件,而不需要...

    给网站开启CDN加速和云存储!
  • 设计了一个网站…

    近一段时间累的一塌糊涂也过的一塌糊涂,基本每天凌晨三五点睡,恨不得不用吃饭不用睡觉的敲代码,睡梦中还在php if 、else if 、div class…。虽然知道熬夜不好,但生怕一...

    设计了一个网站…
  • 增加文章目录toc功能并和.back-to-top同时出现

    为了增加用户体验度,使得页面更加美观,我把文章目录嵌入.back-to-top层里,好处是不用再写script,直接引用.back-to-top的js功能,与“返回顶部”按钮在滚动条离顶部一定间距时...

    增加文章目录toc功能并和.back-to-top同时出现
  • 给云存储绑定自定义域名

    上一篇文章给网站开启CDN加速和云存储!简单介绍了CDN加速和云存储,本文着重介绍一下给云存储绑定自定义域名之后的加速和浏览器在线打开图片的设置。 当使用腾讯云存储对象V4创...

    给云存储绑定自定义域名
  • WordPress自定义评论列表

    一、打开主题目录下的callback.php文件,加入以下代码 /** *自定义评论列表 */ function mytheme_comment($comment, $args, $depth) { $GLOBALS['comment'] = $comment;...

    WordPress自定义评论列表