1. 首页
  2. Wordpress教程

WordPress纯代码实现百度熊掌号页面改造

1.添加熊掌号ID声明

ID声明

1
1 <script src="//msite.baidu.com/sdk/c.js?appid=你的熊掌ID"></script>

这个没什么好说的,把这段代码放到你的header.php页面的相应合适位置就好。

2.添加关注功能代码(强烈推荐)

这个也不赘述了,有吸顶bar,文章段落间bar,底部bar三种,加在页面标签后就可以了,wordpress中一般是footer.php中。如果你想要自定义一些样式熟悉也可以选择添加下面类型的代码:

1
2
3
1 <div style="padding-left: 17px; padding-right: 17px;">
2     <script>cambrian.render('head')</script>
3 </div>

二、结构化改造(划重点)

1.添加canonical标签

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

1 看到这别慌,是不是不知道地址页怎么填了,因为wordpress都是发表文章自动生成地址,我们总不能发表一个改一个,其实只要把以下代码放入你的header.php页面就好了,可以自动获取文章地址。

1
2
3
4
5
1 <?php
2 global $wp;
3 $current_url = home_url(add_query_arg(array(),$wp->request));
4 if($current_url)echo '<link rel="canonical" href="' .$current_url. '" />' . "\n" ;
5 ?>

2.添加JSON_LD数据(难点到了)

下方代码为JSON-LD示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
1 <script type="application/ld+json">
 2         {
 3             "@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld",
 4             "@id": "当前网页URL",
 5             "appid": "熊掌号ID",
 6             "title": "你的网站标题",
 7             "images": [
 8                 "https://路径"
 9                 ],
10             "description": "描述内容",
11             "pubDate": "2017-06-15T08:00:01"
12         }
13     </script>

懵逼了有点,其实不必惊慌,难点无非即使如何获得如何获得网页当前的url,标题,抓取图片的路径和文章的描述内容和发表日期。当然你可以用上文提到的,直接用wordpress提供的方法直接获取,但是我找到了更加完美的方法,适用于任何主题,这里要感谢落雪博客的子凡兄,真心帮助很大。

代码如下:放入你的function.php中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
1 //获取文章/页面摘要
 2 function fanly_excerpt($len=220){
 3     if ( is_single() || is_page() ){
 4         global $post;
 5         if ($post->post_excerpt) {
 6             $excerpt  = $post->post_excerpt;
 7         } else {
 8             if(preg_match('/<p>(.*)<\/p>/iU',trim(strip_tags($post->post_content,"<p>")),$result)){
 9                 $post_content = $result['1'];
10             } else {
11                 $post_content_r = explode("\n",trim(strip_tags($post->post_content)));
12                 $post_content = $post_content_r['0'];
13             }
14             $excerpt = preg_replace('#^(?:[\x00-\x7F]|[\xC0-\xFF][\x80-\xBF]+){0,0}'.'((?:[\x00-\x7F]|[\xC0-\xFF][\x80-\xBF]+){0,'.$len.'}).*#s','$1',$post_content);
15         }
16         return str_replace(array("\r\n", "\r", "\n"), "", $excerpt);
17     }
18 }
19  
20 //优先获取文章中的三张图,否则依次获取自定义图片/特色缩略图/文章首图 last update 2017/11/23
21 function fanly_post_imgs(){
22     global $post;
23     $content = $post->post_content;  
24     preg_match_all('/<img .*?src=["|\'](.+?)["|\'].*?>/', $content, $strResult, PREG_PATTERN_ORDER);  
25     $n = count($strResult[1]);  
26     if($n >= 3){
27         $src = $strResult[1][0].'","'.$strResult[1][1].'","'.$strResult[1][2];
28     }else{
29         if( $values = get_post_custom_values("thumb") ) {    //输出自定义域图片地址
30             $values = get_post_custom_values("thumb");
31             $src = $values [0];
32         } elseif( has_post_thumbnail() ){    //如果有特色缩略图,则输出缩略图地址
33             $thumbnail_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'full');
34             $src = $thumbnail_src [0];
35         } else {    //文章中获取
36             if($n > 0){ // 提取首图
37                 $src = $strResult[1][0];
38             }
39         }
40     }
41     return $src;
42 }

下面的代码加入到header.php中,代码还加了一个判断,是不是单页,所以只会在文章中输出信息。

1
2
3
4
5
6
7
8
9
10
11
12
13
1 <?php
 2 if(is_single()){
 3     echo '<script type="application/ld+json">{
 4     "@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld",
 5     "@id": "'.get_the_permalink().'",
 6      "appid": "这里请填写熊掌号ID",
 7     "title": "'.get_the_title().'",
 8     "images": ["'.fanly_post_imgs().'"],
 9     "description": "'.fanly_excerpt().'",
10     "pubDate": "'.get_the_time('Y-m-d\TH:i:s').'"
11 }</script>
12 ';}
13 ?>

原创文章,作者:懒咪WP,如若转载,请注明出处:https://www.lanmit.com/2508.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据