剛剛網上找教程，根據蟈蟈要安靜博客的代碼，成功接入熊掌號，想著趕快記錄下來，給廣大站長一個參考。
博主個人使用的是WordPress，其他網站程序應該通用，建議備份文件!
網站CMS：WordPress
網站主題：大前端DUX
涉及文件：
header.php
functions.php
single.php
改造作用：
1.添加以下代碼后，您提交的內容能在搜索結果中以結構化樣式展現。
2.同時每天還會從您提交的新增內容中隨機抽取5條在您的手機百度熊掌號主頁中展現。
準備好了就開始：
打開網站后臺文件夾，進入根目錄-wp_content-theme文件夾，找到header.php文件，加入如下代碼：
<!-- 百度熊掌號頁面改造 -->
<link rel="canonical" href="<?php the_permalink() ?>"/>
<ｓｃｒｉｐｔ src="//msite.baidu.com/sdk/c.js?appid=你的熊掌號ID"></ｓｃｒｉｐｔ>
<?php
if(is_single()){
echo '<ｓｃｒｉｐｔ 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().'"],
"deｓｃｒｉｐｔion": "'.fanly_excerpt().'",
"pubDate": "'.get_the_time('Y-m-d/TH:i:s').'"
}
</ｓｃｒｉｐｔ>';
代碼詳解：
第一行添加canonlcal標簽
第二行添加熊掌號ID聲明
剩下的代碼添加JSON_LD數據!
具體詳情可在熊掌號查看，這里只需要修改熊掌號id即可，在頁面提交中即可找到，最后保存即可!
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()
我最近關注了不少博客，發現大部分博客將熊掌號添加到了文章頁，代碼參考處蟈蟈要安靜也是如此，那我也就隨大流了!
打開singlephp文件，并添加如下代碼，添加地方大概在第二十行，</article>后面。
<ｓｃｒｉｐｔ>cambrian.render('tail')</ｓｃｒｉｐｔ>效果可以參考無夢博客!
其實熊掌號有三種展現形式，我的博客只添加了一種，剩余兩種如下：
頂部bar-在頁面<body>標簽后添加代碼
<ｓｃｒｉｐｔ>cambrian.render('head')</ｓｃｒｉｐｔ>
段落間bar-在頁面段落之間添加代碼
<ｓｃｒｉｐｔ>cambrian.render('body')</ｓｃｒｉｐｔ>
最后一種底部bar就是我們現在使用的，注意，最多只能添加兩個bar，百度后期會審核!
頁面改造完畢后，使用在線檢驗工具檢查頁面的正確性!
打開熊掌號-頁面改造-在線檢驗工具。
隨便打開博客內的一篇文章，復制該頁URL地址并輸入到檢驗工具中。
將剛才那篇文章的源代碼(F12)也復制過去。
如果成功，顯示檢驗成功!
完畢!
作者：無夢博客
來源：盧松松博客，歡迎分享，（QQ/微信：13340454）
新聞熱點
疑難解答
