接入百度熊掌号流程记录添加canonical标签、JSON_LD数据、关注代码等

第一次接触百度站长工具，注册了一个百度熊掌号，研究好久都不知道怎么用，先接入再说，以后在慢慢研究吧。以下是添加canonical标签、JSON_LD数据、关注代码的过程记录。

第一步：添加canonical标签
官方介绍：
要求href的内容为MIP页或H5页对应的PC页地址；如果没有PC页，则填写当前页面地址。

1	<link rel="canonical" href="http(s)://xxx"/>

操作记录：
找到对应的header.php文件，在后面添加以下代码：

1 2	<!--百度熊掌号添加canonical标签--> <link rel="canonical" href="<?php the_permalink() ?>"/>

第二步：添加JSON_LD数据
官方介绍：
下方代码为JSON-LD示例：

<script type="application/ld+json">
    {
        "@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld",
        "@id": "https://ziyuan.baidu.com/college/articleinfo?id=1464",
        "appid": "1582926961485115",
        "title": "百度移动搜索落地页体验白皮书——广告篇2.0",
        "images": [
            "https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png",
            "https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png",
            "https://m.baidu.com/static/index/plus/plus_logo.png"
            ],
        "description": "优质合理的广告作为信息的补充，广受用户喜欢。2017年初百度用户体验部针对用户进行了满意度调研，发现很多恶意低质的广告严重破坏着用户的搜索体验。",
        "pubDate": "2017-06-15T08:00:01"
    }
</script>

操作记录：
同样在header.php文件中后面添加以下代码我是加在canonical标签后面：

<!--百度熊掌号添加JSON_LD数据-->
<script type="application/ld+json">
    {
        "@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld",
        "@id": "<?php the_permalink() ?>",
        "appid": "1582926961485115",
        "title": "<?php the_title(); ?>",
        "images": [
            "http://www.tenanji.cn/wp-content/themes/begin/img/favicon.png"
            ],
        "description": "<?php if (has_excerpt()){ ?>
         <?php the_excerpt() ?>
        <?php } else { echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 120,"..."); } ?>",
        "pubDate": "<?php echo get_the_date() . 'T'. get_the_time('H:i:s'); ?>"
    }
</script>

第三步：添加熊掌号ID声明
官方介绍：

1	<script src="//msite.baidu.com/sdk/c.js?appid=1582926961485115"></script>

在页面标签前添加代码

操作记录：
还是接着上面两部的后面继续添加代码，不需要修改，直接添加百度提供的代码就行。

第四部：添加关注功能代码
官方介绍：
添加需要展现的bar(只允许添加2个，后期会审核)

吸顶bar

1	<script>cambrian.render('head')</script>

在页面标签后添加代码

文章段落间bar

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

在页面段落之间添加代码

底部bar

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

在页面文章结束位置添加代码

注意：上述三种bar在样式上没有预留左右边距，若页面自身没有设置边距，建议按照如下方法使用。其中padding-left、padding-right为边距属性，可按需修改。

1
2
3

<div style="padding-left: 17px; padding-right: 17px;">
对应bar代码
</div>

操作记录：
三种都试了一下，进过对比还是觉得底部bar比较好看，就放在文章底部了，找到主题文件的content.php，在第91行代码下面添加了关注代码：

<div class="single-content">
    <?php if ( has_excerpt() ) { ?><span class="abstract"><fieldset><legend><?php _e( '摘要', 'leiben' ); ?></legend><?php the_excerpt() ?><div class="clear"></div></fieldset></span><?php }?>
 
    <?php get_template_part('ad/ads', 'single'); ?>
 
    <?php the_content(); ?>
    <script>cambrian.render('tail')</script><!--添加熊掌号关注功能代码-底部bar-->
   </div>