[教程]wordpress主题接入百度熊掌号H5页面改造教程

  • 2
  • 350 views
  • A+
所属分类:网站建设

接上篇 wordpress程序怎么接入百度熊掌号。在之前的一篇文章中博主简的提到begin主题是如何接入百度熊掌号的,今天就把介入的具体操作的过程详细的写出来,有兴趣的朋友还是可以玩玩的。

之前提到过wordpress本身就是自适应的站点程序,一套主题模板同时的支持pc端网站的展示和移动端的网站的展示,这样子我们在改造的时候也就可以直接的选择使用H5页面的改造形式接入。

  wordpress主题接入百度熊掌号H5页面改造准备:

1.有效的百度熊掌号(H5页面的改造前提,没有的话下面这些对你来说都是虾扯淡~)

2.代码编辑器,在wordpress的后台中是有代码文本编辑器的,博主不建议直接在后台中的编辑器中更改。(存在编码的问题,推荐使用本地上的代码编辑 ,notpeadd++、Brackets这些轻量级的代码编辑器就足够使用了)

3.wordpress程序主题中的 header.php文件 、 content.php文件、 functions.php主题函数文件(此次在页面改造的过程中所用涉及到的3个文件都是在主题文件。例如:博主的begin主题,)

  begin主题接入百度熊掌号H5页面改造教程

1. header.PHP 文件改造:为页面添加JSON-LD

<!--百度熊掌号添加JSON-LD -->

  • <?php
  • global $wp;
  • $current_url = home_url(add_query_arg(array(),$wp->request)); 、
  • if($current_url)echo '<link rel="canonical" href="'.$current_url.'" />'."\n";  // 添加对应的pc端页面url地址 <link rel="canonical" href="http(s)://xxx"/>
  • ?>
  • <?php if( is_single() || is_page() ): ?>
  • <script type="application/ld+json">
  •     {
  •         "@context""https://ziyuan.baidu.com/contexts/cambrian.jsonld",
  •         "@id""<?php echo curPageURL();?>"//页面url地址
  •         "appid""1580147882157197",         // 百度熊掌号唯一识别号
  •         "title""<?php echo wp_title('', false); ?>",
  •         "images": [
  •             "http://www.mbestman.com/<?php echo post_thumbnail_src();?>"
  •             ],
  •         "description""<?php if ($post->post_excerpt)
  •         {$printDescription = $post->post_excerpt;}
  •     else{
  •         $printDescription = preg_replace('/\s+/','',mb_strimwidth(strip_tags($post->post_content),0,145,''));
  •     }
  •     echo $printDescription;?>",
  •         "pubDate""<?php echo get_the_time('Y-m-d\TG:i:s'); ?>"
  •     }
  • </script>
  • <?php endif; ?>

//添加熊掌号ID声明,appid为熊掌号唯一ID,请勿做任何修改,否则无法正常展现。
<script src="//msite.baidu.com/sdk/c.js?appid=1580147882157197"></script>

2.content.PHP 文件

conter.php文件是位于begin主题文件中的template模板文件中选择把关注的按钮放置这个模板文件中,根据熊掌好提供的三种关注按钮的放置位置中的在文章的底部放置,之所以没有选择放置在文中段落位置或者是body上结束处,放置在文章段落的结束处更加的美观考录,大家还可以根据自己的需求选择放置的位置,当然了你可以放置两处在文章的地步方式一处也是可以的,放置两处的同学需注意熊掌号后期是需要审核检查的。

<script>cambrian.render('tail')</script>代码大概放置在103行处的位置就可以,前端展示位置如下图中:

3. functions.php文件

  1. function post_thumbnail_src(){
  2. global $post;
  3. if( $values = get_post_custom_values("thumb") ) { //输出自定义图片地址
  4.     $values = get_post_custom_values("thumb");
  5.     $post_thumbnail_src = $values [0];
  6. } elseif( has_post_thumbnail() ){
  7.     $thumbnail_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'full');
  8.     $post_thumbnail_src = $thumbnail_src [0];
  9. else {
  10.     $post_thumbnail_src = '';
  11. ob_start();
  12. ob_end_clean();
  13.     $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
  14. if(!empty($matches[1][0])){
  15.     $post_thumbnail_src = $matches[1][0]; //获取图片 src
  16. }elseif( suxingme('suxingme_post_thumbnail') ){
  17.     $post_thumbnail_src = suxingme('suxingme_post_thumbnail');
  18. }else{
  19. //有日志图片,显示随机图
  20. //$random = mt_rand(1, 5);
  21. //$post_thumbnail_src = get_template_directory_uri().'/img/random/'.$random.'.jpg';
  22. //没有图片,显示默认图片
  23.     $post_thumbnail_src = get_template_directory_uri().'/img/default_thumb.png';
  24. }
  25. }
  26. return $post_thumbnail_src;
  27. }

好!以上就是博主的begin5.2主题的在完成百度熊掌号H5页面的改造接入过程中的整个操作流程,看上去是不是很见到那的样子的,赶快动起手来,改造自己的网站练练手吧!让你的原创文章得到保障吧!怠代码可复制使用!

 

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:2   其中:访客  1   博主  1

    • avatar 36986691

      按照这个教程更改就能提交到熊掌号吗?

        • avatar 郑州seo阿伟 Admin

          @36986691 当然 当然 博主就是安装这个教程来改版的