记录本站熊掌号页面改造进程

熊掌号曾经出来良久了，不断没有时刻折腾，这段时刻闲下来了便将熊掌号页面改造给做了。代码大多来自 泪雪博客 ，当然网上也有很多其他的博主共享的代码，咱们也能够搜搜看看。在中止页面改造前建议咱们先看看 官方文档 ，这儿我就不多加赘述了，直接初步我的改造进程（由于博客是自适应的，下面熊掌号的页面改造也是选择的html5方式）。

header.php文件批改

在主标题录下的 header.php 文件的适合方位增加下面这段代码：

<link rel=\"canonical\" href=\"\"/>

<?php
if(is_single()){
	echo \'
	{
	\"@context\": \"https://ziyuan.baidu.com/contexts/cambrian.jsonld\",
	\"@id\": \"\'.get_the_permalink().\'\",
 	\"appid\": \"你的熊掌号ID\",
	\"title\": \"\'.get_the_title().\'\",
	\"images\": [\"\'.fanly_post_imgs().\'\"],
	\"description\": \"\'.fanly_excerpt().\'\",
	\"pubDate\": \"\'.get_the_time(\'Y-m-d\\TH:i:s\').\'\"
	}
	\';
	}
?>

这段代码主要是为网页增加“canonical标签”、“熊掌号ID声明”以及“JSON_LD数据”，其中JSON_LD数据调用的两个变量 ‘.fanly_post_imgs().’ 与 ‘.fanly_excerpt().’ 咱们需求在后面通过函数获取。

function.php文件批改

增加如下代码至你主题的 function.php 文件中：

//百度熊掌号页面改造
//获取文章/页面摘要
function fanly_excerpt($len=220){
	if ( is_single() || is_page() ){
		global $post;
		if ($post->post_excerpt) {
			$excerpt  = $post->post_excerpt;
		} else {
			if(preg_match(\'/
(.*)/iU\',trim(strip_tags($post->post_content,\"
\")),$result)){
				$post_content = $result[\'1\'];
			} else {
				$post_content_r = explode(\"\\n\",trim(strip_tags($post->post_content)));
				$post_content = $post_content_r[\'0\'];
			}
			$excerpt = preg_replace(\'#^(?:[\\x00-\\x7F]|[\\xC0-\\xFF][\\x80-\\xBF]+){0,0}\'.\'((?:[\\x00-\\x7F]|[\\xC0-\\xFF][\\x80-\\xBF]+){0,\'.$len.\'}).*#s\',\'$1\',$post_content);
		}
		return str_replace(array(\"\\r\\n\", \"\\r\", \"\\n\"), \"\", $excerpt);
	}
}
//优先获取文章中的三张图，否则顺次获取自定义图片/特征缩略图/文章首图 last update 2017/11/23
function fanly_post_imgs(){
	global $post;
	$content = $post->post_content;  
	preg_match_all(\'//\', $content, $strResult, PREG_PATTERN_ORDER);  
	$n = count($strResult[1]);  
	if($n >= 3){
		$src = $strResult[1][0].\'\",\"\'.$strResult[1][1].\'\",\"\'.$strResult[1][2];
	}else{
		if( $values = get_post_custom_values(\"thumb\") ) {	//输出自定义域图片地址
			$values = get_post_custom_values(\"thumb\");
			$src = $values [0];
		} elseif( has_post_thumbnail() ){	//假如有特征缩略图，则输出缩略图地址
			$thumbnail_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),\'full\');
			$src = $thumbnail_src [0];
		} else {	//文章中获取
			if($n > 0){ // 提取首图
				$src = $strResult[1][0];
			} 
		}
	}
	return $src;
}

这段代码是通过两个自定义函数获取共享文章或页面的描绘及图像的，也就是上面JSON_LD中的两个变量 ‘.fanly_post_imgs().’ 与 ‘.fanly_excerpt().’ 。

single.php文件批改

由于普通咱们期望熊掌号展现的内内容都是文章，所以我只在文章页面增加了重视功用，在 single.php 文件中增加如下代码即可完成：

cambrian.render(\'head\')

cambrian.render(\'body\')

cambrian.render(\'tail\')

顶部bar、阶段间bar及底部bar的前端显现效果如下，咱们可依据自己喜好选用。三种bar最多只能选用两个，后期百度会查。

在线校验

批改完上述内容后，咱们能够选择详细一篇文章获取 HTML 源码，通过百度的在线校验东西中止校验，校验成功后会出现如下界面。