免费资源
享你所想

个人网站接入百度熊掌号方法,手把手教你如何配置!

前两天开通熊掌号,昨天通过了。就想着赶快接入网站,听说对网站有加成,可以提高收录和排名,新站不容易啊,写了文章都没人看,哭!

刚刚网上找教程,根据蝈蝈要安静博客的代码,成功接入熊掌号,想着赶快记录下来,给广大站长一个参考。

熊掌号接入教程

博主个人使用的是WordPress,其他网站程序应该通用,建议备份文件!
网站CMS:WordPress

网站主题:大前端DUX

涉及文件

  • header.php
  • functions.php
  • single.php

改造作用:

  1. 添加以下代码后,您提交的内容能在搜索结果中以结构化样式展现。
  2. 同时每天还会从您提交的新增内容中随机抽取5条在您的手机百度熊掌号主页中展现。

准备好了就开始:


header.php修改

1. 打开网站后台文件夹,进入根目录-wp_content-theme文件夹,找到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>';
	}
?>

代码详解:

  • 第一行添加canonlcal标签
  • 第二行添加熊掌号ID声明
  • 剩下的代码添加JSON_LD数据!

具体详情可在熊掌号查看,这里只需要修改熊掌号id即可,在页面提交中即可找到,最后保存即可!


functions.php修改

1. 打开当前目录下functions.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;
}

这段代码的作用是通过上一段代码定义的两个函数获取文章和页面的描述以及图像。

两个变量为:

  • .fanly_post_imgs()
  • .fanly_excerpt()

single.php修改

我最近关注了不少博客,发现大部分博客将熊掌号添加到了文章页,代码参考处蝈蝈要安静也是如此,那我也就随大流了!

打开singlephp文件,并添加如下代码,添加地方大概在第二十行,</article>后面。

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

效果可以参考无梦博客!

其实熊掌号有三种展现形式,我的博客只添加了一种,剩余两种如下:

  • 顶部bar-在页面<body>标签后添加代码
<script>cambrian.render('head')</script>
  • 段落间bar-在页面段落之间添加代码
<script>cambrian.render('body')</script>

最后一种底部bar就是我们现在使用的,注意,最多只能添加两个bar,百度后期会审核!

在线检验

页面改造完毕后,使用在线检验工具检查页面的正确性!

  1. 打开熊掌号-页面改造-在线检验工具。
  2. 随便打开博客内的一篇文章,复制该页URL地址并输入到检验工具中。
  3. 将刚才那篇文章的源代码(F12)也复制过去。
  4. 如果成功,显示检验成功!

完毕!

熊掌号产品手册:熊掌号产品手册

赞(0) 打赏
未经允许不得转载:无梦博客 » 个人网站接入百度熊掌号方法,手把手教你如何配置!
分享到: 更多 (0)

评论 6

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

    试了下,页面上有代码出现,怎么回事呢?

    名表回收8个月前 (03-23)回复
  2. #2

    我网站也是这个主题,为什么看不到wp_content-theme文件夹,找不到header.php文件?

    腾讯分分彩8个月前 (04-01)回复
    • 网站根目录/wp-content/theme/DUX

      无梦博客8个月前 (04-01)回复
    • 主题一样,不会有问题的。
      你再看看,找不到的话可以添加微信,发图片看看后台。

      无梦博客8个月前 (04-01)回复

无梦博客

币池塘关于本站

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏