个人网站接入百度熊掌号方法,手把手教你如何配置!
刚刚网上找教程,根据蝈蝈要安静博客的代码,成功接入熊掌号,想着赶快记录下来,给广大站长一个参考。
熊掌号接入教程博主个人使用的是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>
<?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>/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('/<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,百度后期会审核!
在线检验页面改造完毕后,使用在线检验工具检查页面的正确性!
打开熊掌号-页面改造-在线检验工具。
随便打开博客内的一篇文章,复制该页URL地址并输入到检验工具中。
将刚才那篇文章的源代码(F12)也复制过去。
如果成功,显示检验成功!
完毕!
作者:无梦博客