记录成长
分享快乐

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

熊掌号已经出来好久了,一直没有时间折腾,这段时间闲下来了便将熊掌号页面改造给做了。代码大多来自 泪雪博客 ,当然网上也有很多其他的博主分享的代码,大家也可以搜搜看看。在进行页面改造前建议大家先看看 官方文档 ,这里我就不多加赘述了,直接开始我的改造历程(由于博客是自适应的,下面熊掌号的页面改造也是选择的html5方式)。

header.php文件修改

在主题目录下的 header.php 文件的合适位置添加下面这段代码:

<!-- 百度熊掌号页面改造 -->
<link rel="canonical" href="<?php the_permalink() ?>"/>
<script src="//msite.baidu.com/sdk/c.js?appid=你的熊掌号ID"></script>
<?php
if(is_single()){
	echo '<script type="application/ld+json">
	{
	"@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').'"
	}
	</script>';
	}
?>

这段代码主要是为网页添加“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('/<p>(.*)<\/p>/iU',trim(strip_tags($post->post_content,"<p>")),$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('/<img .*?src=[\"|\'](.+?)[\"|\'].*?>/', $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 文件中添加如下代码即可实现:

<script>cambrian.render('head')</script>
<script>cambrian.render('body')</script>
<script>cambrian.render('tail')</script>

顶部bar、段落间bar及底部bar的前端显示效果如下,大家可根据自己喜好选用。三种bar最多只能选用两个,后期百度会查。

在线校验

修改完上述内容后,大家可以选择具体一篇文章获取 HTML 源码,通过百度的在线校验工具进行校验,校验成功后会出现如下界面。

 

赞(0) 我要打赏
蝈蝈提醒:转载请注明出处哦>>>蝈蝈要安静 » 记录本站熊掌号页面改造历程
分享到: 更多 (0)

评论 10

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #5

    搞不懂,为什么一加上你的判断是否是文章页代码我的页面就会显示为空白,如果去掉就没问题,请博主帮一下忙,我现在用的是不判断是否为文章页。目前首页和栏目页的title不能正确显示。

    ABC   | Windows 7 | Chrome 64.0.3282.167 | 4个月前 (08-29)回复
  2. #4

    说多了都是泪,申请5次都没有通过的路过 ~ :sad:

    清风徐来   | Windows 7 | Chrome 66.0.3359.181 | 7个月前 (05-28)回复
    • @ 清风徐来 第一次申请的时候我也没通过,说是落地页体验差,后来又申请了下通过了。可以看看规范再修改下申请试试。

      蝈蝈要安静     | Windows NT | Chrome 66.0.3359.181 | 7个月前 (05-29)回复
  3. #3

    我也刚刚申请通过了,准备添加熊掌号到网站。你的文章帮助很大啊!

    无梦博客   | Linux | Chrome 53.0.2785.146 | 9个月前 (03-16)回复
  4. #2

    其实我也在考虑弄一个熊掌号

    明月清风   | Linux | Chrome 57.0.2987.132 | 11个月前 (01-26)回复
  5. #1

    感谢博主分享,我最近也在弄这个号

    粘土砖   | Windows 7 | Firefox 57.0 | 11个月前 (01-19)回复
    • @ 粘土砖 抓紧弄下吧,感觉未来这个东西还是蛮重要的。

      蝈蝈要安静   | Linux | Chrome 37.0.0.0 | 11个月前 (01-20)回复

博客文章有用,赏博主一包辣条~~~

支付宝扫一扫打赏

微信扫一扫打赏