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

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

作者: 郑州seo培训 | 来源:发表于2017-12-01 14:00 被阅读0次

    接上篇wordpress程序怎么接入百度熊掌号。在之前的一篇文章中博主简的提到begin主题是如何接入百度熊掌号的,今天就把介入的具体操作的过程详细的写出来,有兴趣的朋友还是可以玩玩的。也可以直接在郑州seo 阿伟博客里面阿扁自己的看=看法!

    之前提到过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

    global $wp;

    $current_url = home_url(add_query_arg(array(),$wp->request)); 、

    if($current_url)echo ''."\n";// 添加对应的pc端页面url地址 

    ?>

    {

    "@context":"https://ziyuan.baidu.com/contexts/cambrian.jsonld",

    "@id":"",//页面url地址

    "appid":"1580147882157197",// 百度熊掌号唯一识别号

    "title":"",

    "images": [

    "http://www.mbestman.com/"

    ],

    "description":"post_excerpt)

    {$printDescription = $post->post_excerpt;}

    else{

    $printDescription = preg_replace('/\s+/','',mb_strimwidth(strip_tags($post->post_content),0,145,''));

    }

    echo $printDescription;?>",

    "pubDate":""

    }

    //添加熊掌号ID声明,appid为熊掌号唯一ID,请勿做任何修改,否则无法正常展现。

    2.content.PHP 文件

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

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

    3. functions.php文件

    function post_thumbnail_src(){

    global $post;

    if( $values = get_post_custom_values("thumb") ) {//输出自定义图片地址

    $values = get_post_custom_values("thumb");

    $post_thumbnail_src = $values [0];

    } elseif( has_post_thumbnail() ){

    $thumbnail_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'full');

    $post_thumbnail_src = $thumbnail_src [0];

    }else{

    $post_thumbnail_src ='';

    ob_start();

    ob_end_clean();

    $output = preg_match_all('//i', $post->post_content, $matches);

    if(!empty($matches[1][0])){

    $post_thumbnail_src = $matches[1][0];//获取图片 src

    }elseif( suxingme('suxingme_post_thumbnail') ){

    $post_thumbnail_src = suxingme('suxingme_post_thumbnail');

    }else{

    //有日志图片,显示随机图

    //$random = mt_rand(1, 5);

    //$post_thumbnail_src = get_template_directory_uri().'/img/random/'.$random.'.jpg';

    //没有图片,显示默认图片

    $post_thumbnail_src = get_template_directory_uri().'/img/default_thumb.png';

    }

    }

    return$post_thumbnail_src;

    }

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

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/hoxwbxtx.html