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

接上篇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行处的位置就可以,前端展示位置如下图中:

[教程]wordpress主题接入百度熊掌号H5页面改造教程_第1张图片

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页面改造教程)