511遇见网站完成百度熊掌号改造方法介绍

511遇见 网站很早就申请通过了百度熊掌号的审查，今天在WordPress网站彻底完成改造，因为511遇见网站采用Bootstrap框架，所以在PC端也能显示511遇见熊掌号的链接，移动端就更无须多言，看了很多改造的样例，还是要结合自己的网站实际情况，比如现在百度熊掌号已经支持和网站内容同步了，这就省去了手动提交的麻烦。也无须再百度熊掌号提交插件之类的浪费资源。本站采用了H5页面改造，它也支持mip页面改造。

1、添加熊掌号ID声明：
在-我的功能-粉丝关注-粉丝关注改造

<script src="//msite.baidu.com/sdk/c.js?appid=xxxx"></script>

在页面</head>标签前添加代码

注意：appid为熊掌号唯一ID，请勿做任何修改，否则无法正常展现。
2、添加关注功能代码（强烈推荐）
添加需要展现的bar(只允许添加2个，后期会审核)
吸顶bar

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

种bar在样式上没有预留左右边距，若页面自身没有设置边距，建议按照如下方法使用。其中padding-left、padding-right为边距属性，可按需修改。

在页面<body>标签后添加代码
<div style="padding-left: 17px; padding-right: 17px;">
    <script>cambrian.render('head')</script>
</div>

文章段落间bar

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

种bar在样式上没有预留左右边距，若页面自身没有设置边距，建议按照如下方法使用。其中padding-left、padding-right为边距属性，可按需修改。

<div style="padding-left: 17px; padding-right: 17px;">
    <script>cambrian.render('body')</script>
</div>

在页面段落之间添加代码
底部bar

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

种bar在样式上没有预留左右边距，若页面自身没有设置边距，建议按照如下方法使用。其中padding-left、padding-right为边距属性，可按需修改。

<div style="padding-left: 17px; padding-right: 17px;">
    <script>cambrian.render('tail')</script>
</div>

在页面文章结束位置添加代码

本站采用了吸顶，由于是自适应，也就不需要添加样式

3、结构化改造：

头部<head>标签内插入：

<link rel="canonical" href="<?php if(is_single()) {echo the_permalink();} ?>"/>

4、添加JSON_LD数据：

头部<head>标签内插入：

<?php
if(is_single()){
	echo '<script type="application/ld+json">{
	"@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld",
	"@id": "'.get_the_permalink().'",
 	"appid": "1583843480658447",
	"title": "'.get_the_title().'",
	"images": ["'.dahai_post_imgs().'"],
	"description": "'.dahai_excerpt().'",
	"pubDate": "'.get_the_time('Y-m-d\TH:i:s').'"
}</script>
';}
?>

上面有两个自定义函数dahai_post_imgs()和dahai_excerpt()，一个获取内容图片的，熊掌号要求图片数0个1个或者3个，用过百家号或者其他自媒体的都知道就这么几种展现形式。

5、在function.php中添加上面的两个自定义函数

/**
* 百度熊掌号改造
* 2018-08-13
*/
//获取文章/页面摘要
function dahai_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);
	}
}
 
//获取文章中的图 
function dahai_post_imgs(){
	global $post;
	$src = '';
	$content = $post->post_content;  
	preg_match_all('/<img .*?src=[\"|\'](.+?)[\"|\'].*?>/', $content, $strResult, PREG_PATTERN_ORDER);  
	$n = count($strResult[1]);  
	if($n >= 3){
		$src = get_bloginfo('url').$strResult[1][0].'","'.get_bloginfo('url').$strResult[1][1].'","'.get_bloginfo('url').$strResult[1][2];
	}elseif($n >= 1){
		$src = get_bloginfo('url').$strResult[1][0];
	}
	return $src;
}

将上述代码添加到我们的function.php中
6、页面提交问题
现在百度熊掌号已经升级绑定站点后，在-管理设置--内容源设置--绑定站点，这个需要几天的审核，通过后就可以自定提交内容了。

• 设置为自动同步的站点/路径，其内容可自动进入熊掌号，无需手动提交
• 自动同步成功后，搜索端将自动展示熊掌号头像及名称，查看《内容同步设置指南》
• 自动同步目前仅支持移动站点或自适应站点
• 站点/路径添加成功后会先进行校验，预计3-5天完成

页面改造后也可以通过插件推送数据，这里推荐大家使用插件，在文章里面会有直观的体现，使用也是比较简单，只需填写自己的appid和token即可

在插件安装里面搜索：BaiduXZH Submit

安装完毕启动后在左侧会出现百度熊掌号菜单，我们点击进去如图：

7、彻底完成校验

在-我的功能-粉丝关注-在线校验工具提交网址和页面源码，现在H5完成校验，如下：

511遇见

不一样的遇见

511遇见网站完成百度熊掌号改造方法介绍

您可能感兴趣的文章:

相关文章: