WordPress给文章添加卡片式内链教程美化版

2019.05.22更新:修复卡片分类不准确的问题,感谢文字咖发现这个问题。

WordPress更新到4.4 版本后增加了 Post Embed 功能,可以把要引用的文章以嵌入式卡片展现出来,样式比较单一,并且只能直接输入网址调用,效果如下图:

本篇文章讲介绍利用短代码添加卡片式内链并且美化原始效果,使之看起来更舒适,先看下美化后的效果图:

教程开始:

  1. 需要将如下代码放入你主题的函数模板里(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 {
              $content = $post->post_content;
              preg_match_all('/<img.*?(?: |\\t|\\r|\\n)?src=[\'"]?(.+?)[\'"]?(?:(?: |\\t|\\r|\\n)+.*?)?>/sim', $content, $strResult, PREG_PATTERN_ORDER);
              $n = count($strResult[1]);
              if($n > 0){
                return $strResult[1][0]; //没有缩略图就取文章中第一张图片作为缩略图
              }else {
                return get_template_directory_uri().'/img/thumbnail.png'; //文章中没有图片就设置默认图片
                }
            }
        }
    }
    // 文章内链短代码
    if(!function_exists('embed_posts')){
      function 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));
            foreach ($inset_posts as $key => $post) {
              setup_postdata( $post );
              $category = get_the_category($post);
              $content .= '<div class="neilian">';
              $content .= '<div class="fl">';
              $content .= '<a target="_blank" href="'. get_permalink() .'" class="fl"><i class="fa fa-link fa-fw"></i>' . get_the_title() . '</a>';
              $content .= '<p class="note"><span class="card-abstract">'. wp_trim_words( get_the_excerpt(), 100, '...' ) .'</span></p>';
              $content .= '<p class="card-controls"><span class="group-data"> <i>修改时间:</i>'. get_the_modified_date('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><span class="group-data"> <i>人气:</i>'. _get_post_views(false, '', '', false) .'</span><span class="group-data"> <i>评论:</i>'. get_comments_number() .'</span></p>';
              $content .= '</div>';
              $content .= '<div class="fr">';
              $content .= '<a target="_blank" href="'. get_permalink() .'"><img src='. jsk_the_thumbnail_src() .' class="neilian-thumb"></a>';
              $content .= '</div>';
              $content .= '</div>';
            }
            wp_reset_postdata();
            return $content;
        }
    }
    add_shortcode('jsk_embed_post', 'embed_posts');

    注意:上述代码中有调用自定义的函数(如阅读量等),如果使用DUX主题不需要修改,其它主题的话需要根据实际情况进行修改,由于大家的主题不统一。

  2. 添加以下 CSS 代码到 main.css 文件中即可。
    .fl{float:left}
    .fr{float:right}
    .neilian {
    margin-bottom:25px;
    padding:10px;
    width:100%;
    overflow: hidden;
    border:1px dashed #d4d4d4;
    background:#fff;
    box-shadow:0 1px 0 rgba(0,0,0,.1);
    cursor:pointer;
    -webkit-transition:box-shadow 218ms;
    -moz-transition:box-shadow 218ms;
    -o-transition:box-shadow 218ms;
    transition:box-shadow 218ms;
    }
    .neilian:hover {
    box-shadow:0 1px 8px 1px rgba(0,0,0,.1);
    }
    .neilian .fl {
    width:72%;
    }
    .neilian .fr {
    padding:10px 5px;
    width:24%;
    }
    .neilian .fl a {
    display:block;
    margin-right:15px;
    padding:8px 5px;
    width:100%;
    color:#35a56b!important;
    text-decoration:none;
    font-size:16px;
    border:none;
    }
    .neilian .fl .note {
    margin:0 0 5px;
    padding-left:10px;
    font-size:14px;
    }
    .neilian .fl .card-controls {
    padding-left:10px;
    font-size:12px;
    }
    .neilian .fl .card-controls .group-data {
    float: left;
    margin-right: 10px;
    color: #999;
    }
    .neilian .card-controls .group-data i {
    margin-right: 5px;
    font-style: normal!important;
    }
    .neilian .card-controls .group-data a {
    font-size:12px;
    display:inline;
    margin-right:auto;
    padding:inherit;
    }
    .neilian .neilian-thumb{
    width:170px;
    height:120px;
    }
    @media only screen and (max-width:700px) {
    .neilian .fl {width:100%;}
    .neilian .fr {display: none;}
     
    }
  3. 使用的时候只需要在文章里添加短代码
    【jsk_embed_post ids=123,245】

    WordPress 文章 id 查看方法不赘述,多篇文章用,隔开,把上面和下面的【】换成[]。

如果你不是在文章内容中,而是在其他地方想调用,则可使用下面代码来调用。

do_shortcode('【jsk_embed_post ids=123,245】')

适当增加文章内链对 SEO 有积极的作用,也让文章更加的丰满,何乐而不为呢?

© 版权声明
THE END
喜欢就支持一下吧
点赞14赞赏
分享
评论 抢沙发

请登录后发表评论