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

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

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

第一步:添加 canonical 标签

官方介绍:

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

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

 

操作记录:

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

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

 

第二步:添加 JSON_LD 数据

官方介绍:

下方代码为 JSON-LD 示例:

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

操作记录:

同样在 header.php 文件中<head>后面添加以下代码我是加在 canonical 标签后面:

  1. <!--百度熊掌号添加 JSON_LD 数据-->
  2. <script type="application/ld+json">
  3.     {
  4.         "@context""https://ziyuan.baidu.com/contexts/cambrian.jsonld",
  5.         "@id""<?php the_permalink() ?>",
  6.         "appid""1577487331441713",
  7.         "title""<?php the_title(); ?>",
  8.         "images": [
  9.             "http://wosn.net/wp-content/themes/begin/img/favicon.png"
  10.             ],
  11.         "description""<?php if (has_excerpt()){ ?>
  12.  <?php the_excerpt() ?>
  13.  <?php } else { echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 120,"..."); } ?>",
  14.         "pubDate""<?php echo get_the_date() . 'T'. get_the_time('H:i:s'); ?>"
  15.     }
  16. </script>

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

官方介绍:

  1. <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 为边距属性,可按需修改。

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

操作记录:

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

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

最后,效果图如下:

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

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

沃森博客
  • 本文由 发表于 2018年7月15日00:15:16
  • 本文来自互利网收集整理,问题反馈联系邮箱:wosnnet@foxmail.com,转载请务必保留本文链接:https://wosn.net/1306.html

发表评论