刚刚网上找教程,根据蝈蝈要安静博客的代码,成功接入熊掌号,想着赶紧记录下来,给广大站长一个参考。
熊掌号接入教程
博主个人利用的是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)也复制过去。
如果成功,显示考验成功!
完毕!
作者:无梦博客
来源:卢松松博客,欢迎分享