本文针对Wordpress程序使用百度熊掌号页面改造优化教程,实现移动页面的熊掌号改造过程。
支持H5移动页和MIP两种,非移动页面不要添加了,你体验过手机打开纯PC站的感觉吗?支持移动手机页包含自适应页面,请往下看。
第一步:头部添加JS、JSON_LD代码
需要到的3个文件分别为functions.php,head.php,single.php,添加熊掌号ID声明,代码如下:
<script src=”//msite.baidu.com/sdk/c.js?appid=此处填写熊掌号ID”></script>
然后还需要在头部区域添加JSON_LD数据
<!–熊掌号开始–><script src=”//msite.baidu.com/sdk/c.js?appid=1595281659287879″></script><script type=”application/ld+json”>{“@context”: “https://ziyuan.baidu.com/contexts/cambrian.jsonld”,“@id”: “<?php the_permalink(); ?>”,“appid”: “你的熊掌号ID”,“title”: “<?php the_title(); ?>”,“images”: [“<?php echo fanly_post_imgs();?>”],“description”: “<?php echo fanly_excerpt()?>”,“pubDate”: “<?php echo get_the_time(‘Y-m-dTH:i:s’)?>”}</script><!–end结束–>
第二部分 添加函数调用代码
找到模板中的functions.php文件,在代码后面添加:
//Start//获取文章/页面摘要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>(.*)</p>/iU’,trim(strip_tags($post->post_content,”<p>”)),$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(“rn”, “r”, “n”), “”, $excerpt);}}//获取缩略图function fanly_post_imgs(){global $post;$src = ”;$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];}elseif($n >= 1){$src = $strResult[1][0];}return $src;}//END
第三部分粉丝关注按钮
在移动页面中添加粉丝关注按钮,位置可以自己定义,头部、段落、尾部。
吸顶吧<script> cambrian.render(’head’)</ script>尾部bar <script> cambrian.render(’tail’)</ script>文章段落间bar <script> cambrian.render(’body’)</ script>
最终效果
完毕。
长按,识别二维码,加微信(女神小新为您在线指导解答,还有神秘大礼包赠送哦)