好主机测评机长最近研究修改这个好主机官网的模板，了解到WordPress在更新到4.4版本添加了很多的功能，比如Post Embed功能，此功能可以把要引用的文章以嵌入式卡片展现出来，但是不是很美观，今天就来教大家如何实现WordPress给文章添加卡片式内链及美化教程。

首先我们看下默认效果：

美化后的效果图：

教程开始：

需要将如下代码放入你主题的函数模板里(functions.php)

/**
* getPostViews()函数
* 功能：获取阅读数量
* 在需要显示浏览次数的位置，调用此函数
* @Param object|int $postID   文章的id
* @Return string $count          文章阅读数量
*/
function getPostViews( $postID ) {
    //var_dump($postID);
     $count_key = 'post_views_count';
     $count = get_post_meta( $postID, $count_key, true );
     if( $count=='' ) {
         delete_post_meta( $postID, $count_key );
         add_post_meta( $postID, $count_key, '0' );
         return "0";
     }
     //var_dump($count);
    return $count;
 }


/**
* setPostViews()函数  
* 功能：设置或更新阅读数量
* 在内容页(single.php，或page.php )调用此函数
* @Param object|int $postID   文章的id
* @Return string $count          文章阅读数量
*/
 function setPostViews( $postID ) {
     $count_key = 'post_views_count';
     $count = get_post_meta( $postID, $count_key, true );
     if( $count=='' ) {
         $count = 0;
         delete_post_meta( $postID, $count_key );
         add_post_meta( $postID, $count_key, '0' );
     } else {
         $count++;
         update_post_meta( $postID, $count_key, $count );
     }
 }

/**
* 卡片式文章内链功能
* 功能：实现WordPress如何给文章添加卡片式内链及美化
* 在内容页(single.php)调用此函数
* 作者：至尊宝（好主机测评机长）
* QQ：154215395
* 网站：www.hzjcp.com
*/

/**
 * 获取特色图片地址
 * 作者：至尊宝（好主机测评机长）
 * QQ：154215395
 * 网站：www.hzjcp.com
 */
function hzjcp_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'; //文章中没有图片就设置默认图片
            }
        }
    }
}
/**
 * 文章内链短代码
 * 作者：至尊宝（好主机测评机长）
 * QQ：154215395
 * 网站：www.hzjcp.com
 */
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);
          //var_dump(get_the_ID());//获取当前文章ID
          $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>'. getPostViews(get_the_ID()) .'</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='. hzjcp_the_thumbnail_src() .' class="neilian-thumb"></a>';
          $content .= '</div>';
          $content .= '</div>';
        }
        wp_reset_postdata();
        return $content;
    }
}
add_shortcode('hzjcp_embed_post', 'embed_posts');

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

添加以下 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;
}
}

使用的时候只需要在文章里添加短代码

【hzjcp_embed_post ids=123,245】//【】换成[]

WordPress 文章 id 查看方法不赘述，多篇文章用英文逗号（,）隔开

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

do_shortcode('【hzjcp_embed_post ids=123,245】') //【】换成[]

以上就是给大家带来的实现WordPress如何给文章添加卡片式内链及美化教程方法，适当增加文章内链对 SEO 有积极的作用，也让文章更加的丰满，何乐而不为呢~