首页 网站建设优化正文

新手个人站长网站如何接入百度熊掌号

每次遇到关于代码的问题都十分的头痛,当初选择wordpress也是因为其强大的插件功能。因为百度熊掌号是去年新出的项目,wordpress的相关插件还不完善,自己只好硬着头皮去利用代码接入百度熊掌号了。自己以前就把赵连奎博客接入了熊掌号,但总感觉有些地方可能做错了。今天从网络上找了好久,终于找到了一篇不错的文章,是无梦博客提供的文章。

熊掌号接入教程

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

  • header.php

  • functions.php

  • single.php

改造作用:

  1. 添加以下代码后,您提交的内容能在搜索结果中以结构化样式展现。

  2. 同时每天还会从您提交的新增内容中随机抽取5条在您的手机百度熊掌号主页中展现。

准备好了就开始:


header.php修改

打开网站后台文件夹,进入根目录-wp_content-theme文件夹,找到header.php文件,加入如下代码:

<!-- 百度熊掌号页面改造 --><link rel="canonical" href="<?php the_permalink() ?>"/><script src="//msite.baidu.com/sdk/c.js?appid=你的熊掌号ID"></script><?phpif(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/23function 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文件,并添加如下代码,

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

在线检验

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

  1. 打开熊掌号-页面改造-在线检验工具。

  2. 随便打开博客内的一篇文章,复制该页URL地址并输入到检验工具中。

  3. 将刚才那篇文章的源代码(F12)也复制过去。

  4. 如果成功,显示检验成功!

评论