首頁 > seo學習 > 熊掌號 > 0基礎新手百度熊掌號H5頁面改造圖文教程
2018
09-06

0基礎新手百度熊掌號H5頁面改造圖文教程

熊掌號是最近一直熱議的話題,在站長群體中掀起了一陣熱浪,而且也因為熊掌號的出現,一批新型關于熊掌號的站點,也如雨后春筍一樣脫引而出,但是就琪琪SEO的這一段時間,實際的操作熊掌號注冊、實戰,增加關注,粉絲,以及H5,MIP頁面改造這一系列工作來看,網上很多站長都分享了自己的熊掌號頁面改造一系列圖文教程,雖然很多都是在自己改造成功了之后,隨意的分享一下,誰也不肯把每一個詳細的步驟,給分享出來,既然是分享出來了,一般對于不懂代碼的小白來說,99%的幾率改造不成功,這是琪琪SEO的親身經歷,所以鑒于此,琪琪SEO就把自己熊掌號改造的詳細過程為各位站長朋友分享一下,不到之處敬請批評指正。

針對自適應響應式主題,百度熊掌號支持移動端 H5 主題頁面改造、針對自適應主題頁面站點在無需修改任何代碼的情況下可以實現熊掌號頁面接入、結構化改造以及粉絲關注改造。而針對本身就是移動主題的站點,百度熊掌號提供了?MIP 主題頁面改造,所以針對大部分站點,其實都是只需要H5頁面改造就行了,琪琪SEO博客同樣也是如此。

? ? ? 下面進入第一步:添加熊掌號ID聲明:

在進入正式熊掌號實戰操作之前,琪琪SEO需要告誡各位新手站長的是,在做網站代碼修改,以及安裝插件等操作的時候,記得千萬一定要先做好網站數據備份,包括數據庫備份,都要在做好之后,再進入代碼插件相關操作,否則一旦出現錯誤,網站打不開,或者網站變成了白板,網站出現亂碼等等的情況,就會導致重大損失甚至網站徹底打不開都有可能,所以大家一定要慎重,做好這些工作,再進入熊掌號頁面H5改造不遲。

琪琪SEO嚴格按照百度熊掌號,后臺的要求嚴格操作執行,不過吐槽一下的是,百度推出熊掌號,又搞了這些關于熊掌號的頁面改造,對于不懂代碼的小白站長來說,度娘的確不夠厚道,如果你能夠徹底推出代碼,而不僅僅是一些參考,而且是一些模棱兩可的建議,估計就不會出現,很多的新手站長,因為熊掌號頁面H5改造,而出現各類網站異常了。

不過反過來站在百度搜索平臺的角度思考,其實百度也是非常為難的,原因其實很簡單,因為站長使用的Wordpress包括其他建站程序主題不同,所以相應的熊掌號H5頁面改造代碼,必然不同,所以無法統一提供熊掌號頁面改造代碼,只能給出一個通用的代碼示例,讓各位站長作為參考,自行根據網站主題,進行熊掌號頁面改造一系列操作。

第一步其實很簡單,琪琪SEO作為一個不懂代碼的小白,也可以輕輕松松完成,何況那些極客,程序猿大神們,更是不在話下,琪琪SEO之所以分享出來,就是為了哪些0基礎的新手站長,他們必須是手把手,傳幫帶才能真正完成每一步熊掌號頁面改造工作。

? ? ? 下面進入第二步:熊掌號添加關注功能代碼

這個是百度熊掌號強烈推薦的功能,琪琪SEO也做了各種測試,出現了很多錯誤,不過好在琪琪SEO最終都順利解決了問題,下面將琪琪SEO添加熊掌號關注功能代碼實戰操作,為0基礎新手站長小白分享一下:

首頁頂部熊掌號關注功能,效果請查看SEO學堂博客首頁頂部效果圖:

<script>cambrian.render(‘head’)</script>

很簡單,仍然是在Wordpress后臺-外觀-編輯-head.php,然后搜索找到body標簽,然后在其上方添加以上百度熊掌號提供的,熊掌號吸頂關注功能代碼。

百度熊掌號里面特別提到,關于熊掌號關注功能頁面,只能顯示2個,后期后審核,其實對于琪琪SEO來說,也就兩個最合適,一個是首頁(head.php)吸頂熊掌號關注頁面顯示效果,一個是文章頁(single.php)底部顯示效果,其實只用這兩個就足夠了,琪琪SEO在遍觀網上大部分熊掌號的關注功能顯示效果圖來看,大部分站長都是選擇了文件頁底部,其實這個就很能說明問題了。

文章段落間顯示效果代碼如下:

<script>cambrian.render(‘body’)</script>

文章底部顯示效果代碼如下:

<script>cambrian.render(‘tail’)</script>

針對以上文章段落間、文章底部熊掌號關注功能顯示效果頁面改造,其實都是在single.php適當位置添加上代碼即可,琪琪SEO博客底部的熊掌號顯示效果圖如下所示:

以上兩步都相對簡單一些,但是進入第三步也就是自適應網站熊掌號H5頁面改造,這就是難點,原因是熊掌號H5頁面改造,涉及的是網站主題模板函數functions.php文件進行修改,要實現的熊掌號H5頁面改造效果有:

1、實現現有網站的新增原創內容,能夠自動提交熊掌號收錄,并且由現在的PC端HTML頁面,改造成為移動手機端可以查看的H5頁面;

2、同時還要能夠實現網站的文章,首頁,分類目錄,標簽都完全實現熊掌號H5頁面改造,并且熊掌號支持自動調用網站圖片,并且支持最多三張圖片在一篇文章中顯示;

這就需要代碼高手才能搞定了,反正琪琪SEO是測試了很多站長提供的所謂,自己已經熊掌號改造成功的代碼,其實都不能用,一般來說在百度熊掌號H5頁面改造完畢之后,就可以通過百度熊掌號頁面校驗測試,熊掌號H5頁面是否改造成功。具體什么頁面才能進入熊掌號主頁,請參看百度移動搜索落地頁體驗白皮書

當你看到這個錯誤的時候,就說明該文章頁面,不包括以上H5代碼,所以你只需要將以上代碼,添加到single.php文件里面保存即可,一般來說這個提示錯誤就會解決了。關于熊掌號H5頁面改造,在線校驗結果出錯的解決方法,請參考《熊掌號頁面改造幫助文檔》

對于大部分零基礎新手站長來說,如果按照網上很多站長所謂改造成功分享出來的代碼,進行自己網站的百度熊掌號頁面H5改造,就會出現類似的錯誤,而且你會發現這個錯誤,不是代碼高手來說,一般難以解決。

以下是需要在function.php合適位置中,添加的針對百度熊掌號自動獲取圖片,顯示圖片的熊掌號H5頁面改造代碼,具體測試效果,需要經過有關代碼正確性檢查工具,確認檢查完畢后再進行測試。

  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. ?}

其實百度熊掌號之所以受到大家,尤其是廣大站長的極大關注,原因就是百度在熊掌號上線之初,就說明其按照預期2020年,將會把百度移動端80%的流量分流到百度熊掌號,目前已經完成了30%的熊掌號分流,而且很多網站確實通過百度熊掌號,獲得快速收錄,快速展現,快速排名的效果,不僅僅如此,熊掌號也為站長們帶來流量的同時,也帶來大量粉絲的關注,所以說百度熊掌號才能如此萬眾矚目,不過即便熊掌號這么受到站長們的追棒,其實真正通過熊掌號受益的還是來自站長平時的積累,而不僅僅是上線了熊掌號,就可以快速成功了,這其實根本不現實,成功來自于實力,來自內功,而不是所謂的上線一個新東西就可以改變的,只是作為一個合格的站長,必須隨時關注新的趨勢,并且順勢而為,才能永遠立于不敗之地,否則就一直落伍就不好了。

61.5K

本文鏈接:0基礎新手百度熊掌號H5頁面改造圖文教程

轉載聲明:本站文章若無特別說明,皆為原創,轉載請注明來源:seo學堂-seo新手學習交流的最佳平臺。,謝謝!^^


Smilie Vote is loading.
打賞 贊(0)
微信
支付寶
微信二維碼圖片

微信掃描二維碼打賞

支付寶二維碼圖片

支付寶掃描二維碼打賞

歷史的今天琪琪SEO發布的文章:

  1. 2015:  wordpress問答插件 DW Question & Answer停用刪除后內容不會丟失(0)
  2. 2015:  利用wordpress在線問答DW Question & Answer插件實現在線SEO問答功能(0)
  3. 2016:  琪琪SEO承接各類網站SEO優化服務(最具性價比)(0)
  4. 2019:  全面支持微信+支付寶掃碼打賞作者【網站打賞功能升級】(0)
最后編輯:
作者:琪琪SEO
Avatar
專注于SEO營銷、SEO優化、SEO實戰培訓、SEO實戰經驗的分享、交流、互利共贏。
捐 贈如果您覺得這篇文章有用處,請支持作者!鼓勵作者寫出更好更多的文章!

留下一個回復

你的email不會被公開。

瀏覽器必須開啟Javascipt