【WordPress教程】给知更鸟Begin主题接入百度熊掌号流程记录

沃森博客

1421
文章

9
评论

2018年7月15日00:15:16WordPress评论334阅读模式

【WordPress 教程】给知更鸟 Begin 主题接入百度熊掌号流程记录，添加 canonical 标签、JSON_LD 数据、关注代码等。

第一步：添加 canonical 标签

官方介绍：

要求 href 的内容为 MIP 页或 H5 页对应的 PC 页地址；如果没有 PC 页，则填写当前页面地址。

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

操作记录：

找到对应的 header.php 文件，在<head>后面添加以下代码：

<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 文件中<head>后面添加以下代码我是加在 canonical 标签后面：

<script type="application/ld+json">
{
"@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld",
"@id": "<?php the_permalink() ?>",
"appid": "1577487331441713",
"title": "<?php the_title(); ?>",
"images": [
"http://wosn.net/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 声明

官方介绍：

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

操作记录

在页面</head>标签前添加代码，还是接着上面两步的后面继续添加代码，不需要修改，直接添加百度提供的代码就行。

第四部：添加关注功能代码

官方介绍：

添加需要展现的 bar(只允许添加 2 个，后期会审核)

吸顶 bar

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

在页面<body>标签后添加代码

文章段落间 bar

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

在页面段落之间添加代码

底部 bar

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

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

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

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

操作记录：

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

<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>
</div>

最后，效果图如下：

原文链接：http://www.tenanji.cn/archives/104.html

第一步：添加 canonical 标签

官方介绍：

操作记录：

第二步：添加 JSON_LD 数据

官方介绍：

操作记录：

第三步：添加熊掌号 ID 声明

官方介绍：

操作记录

第四部：添加关注功能代码

官方介绍：

操作记录：

发表评论