wp教程:給你的wordpress博客添加說說功能

2017年10月12日18:01:42 2 3,023 views

最近幾天都在優化我的博客功能,讓我的博客有更好的用戶體驗,全方位的為客戶服務。同時,我也走訪了很多技術牛人的博客,不斷的發現他們好的功能,如何適合自己的話我也要添加進來。但看見別人的博客里面有說說的功能,自己當然也想添加進來了。

 

經過昨天和今天上午的研究,終于在我今天中午搞定,在12:28發了第一條說說再去樓下買菜做午飯的,剛剛又發了一條說說,決定把代碼免費分享給大家,并且鼓勵用戶給我打賞哦!先上效果圖吧:(體驗直達:http://www.kkkonw.live/shuoshuo

wordpress博客說說

wordpress博客說說

看起來還不錯吧!接下來我就一步一步的教大家怎么使用!

第一,把下面代碼復制到模板函數 (functions.php)里面最底部就行了:

  1. //說說
  2. add_action('init',?'my_custom_init');?function?my_custom_init()?{?$labels?=?array(?'name'?=>?'說說',?'singular_name'?=>?'singularname',?'add_new'?=>?'發表說說',?'add_new_item'?=>?'發表說說',?'edit_item'?=>?'編輯說說',?'new_item'?=>?'新說說',?'view_item'?=>?'查看說說',?'search_items'?=>?'搜索說說',?'not_found'?=>?'暫無說說',?'not_found_in_trash'?=>?'沒有已遺棄的說說',?'parent_item_colon'?=>?'',?'menu_name'?=>?'說說'?);?$args?=?array(?'labels'?=>?$labels,?'public'?=>?true,?'publicly_queryable'?=>?true,?'show_ui'?=>?true,?'show_in_menu'?=>?true,?'query_var'?=>?true,?'rewrite'?=>?true,?'capability_type'?=>?'post',?'has_archive'?=>?true,?'hierarchical'?=>?false,?'menu_position'?=>?null,?'supports'?=>?array('title','editor','author')?);?register_post_type('shuoshuo',$args);?}

添加了說說的模板函數效果如圖:(記得更新哦)

說說模板函數

說說模板函數

第二步、將我制作好的shuoshuo.php文件上傳到模版目錄的根目錄。(比如我的是:/wp-content/themes/begin)

第三步、將我制作好的content-shuoshuo.php文件上傳到/wp-content/themes/begin/template/目錄。

第四步、將以下的css代碼,添加到樣式表 (style.css)里面最底部位置。

  1. /**shuoshuo?start**/
  2. #shuoshuo_content?{
  3. background-color:?#fff;
  4. padding:?10px;
  5. min-height:?500px;
  6. overflow:hidden;
  7. }
  8. .cbp_tmtimeline?{
  9. margin:?30px?0?0?0;
  10. padding:?0;
  11. list-style:?none;
  12. position:?relative;
  13. }
  14. /*?The?date/time?*/
  15. .cbp_tmtimeline?>?li?.cbp_tmtime?{
  16. display:?block;
  17. /*?width:?29%;?*/
  18. /*?padding-right:?110px;?*/
  19. max-width:?70px;
  20. position:?absolute;
  21. }
  22. /*?Right?content?*/
  23. .cbp_tmtimeline?>?li?.cbp_tmlabel?{
  24. margin:?0?0?45px?0;
  25. background:?#9BCD9B;
  26. color:?#444;
  27. font:"Microsoft?YaHei",?Helvetica,?Arial,?Lucida?Grande,?Tahoma,?sans-serif;
  28. padding:?.8em?1.2em?.4em?1.2em;
  29. /*?font-size:?1.5em;?*/
  30. font-weight:?300;
  31. font-size:?16px;
  32. line-height:?1.4;
  33. position:?relative;
  34. border-radius:?5px;
  35. transition:?all?0.3s?ease?0s;
  36. box-shadow:?0?1px?2px?rgba(0,?0,?0,?0.15);
  37. cursor:?pointer;
  38. display:?block;
  39. }
  40. .cbp_tmlabel:hover?{
  41. /*?transform:scale(1.05);?*/
  42. transform:?translateY(-3px);
  43. z-index:?1;
  44. -webkit-box-shadow:?0?15px?32px?#dedede?!important;
  45. }
  46. .cbp_tmtimeline?>?li:nth-child(odd)?.cbp_tmlabel?{
  47. background:?RGBA(255,?125,?73,?0.75);
  48. }
  49. .cbp_tmtimeline?>?li:nth-child(odd)?.cbp_tmlabel:after?{
  50. border-right-color:?RGBA(255,?125,?73,?0.75);
  51. }
  52. p.liulan?{
  53. margin-top:?10px;
  54. border-top:?1px?solid?#dedede;
  55. padding-top:?5px;
  56. font-family?:?微軟雅黑,宋體;
  57. font-size?:?16px;
  58. color?:?#777;
  59. }
  60. .ss_views{
  61. float:right;
  62. }
  63. .ss_pinglun{
  64. float:center;
  65. }
  66. /**shuoshuo?end**/

如圖:

粘貼說說樣式表 (style.css)代碼

粘貼說說樣式表 (style.css)代碼

第五步,新建獨立的說說頁面。后臺--頁面--新建頁面,頁面名稱就是寫說說,固定鏈接使用英文的shuoshuo,右側的模板也選擇【說說】模板,點擊發布即可完成。

創建說說頁面

創建說說頁面

第六步,發布說說。在后臺里面有說說的發布頁面了,直接選擇?說說--發表說說,寫好標題和內容即可,點擊發布。這里的標題是不會在前臺顯示的,方便自己查找而已,固定鏈接也不用管,只管說說的內容即可,說說內容也是可以調整字體大小,顏色,插入鏈接,上傳圖片等。

發布說說

發布說說

第七步,把說說的入口放到導航欄(菜單欄)。比如和我一樣放到頂部導航的,有的人是放在主導航的,這個看自己的怎么安排了。方法:后臺--外觀--菜單--勾選說說--添加到菜單--勾選頂部菜單--保存菜單。

把說說添加到導航欄

把說說添加到導航欄

到這里,《給你的wordpress博客添加說說功能》就結束了,關注我的微信公眾號,回復【說說代碼】即可免費下載?。▓竺医ㄕ九嘤柕?,源碼直接在QQ群文件里面下載)。

如果本文對你有所幫助的話,請隨意打賞一點哦?。ㄎ铱墒钦伊艘惶觳排玫?,還寫這么詳細的教程,你們按教程操作可能10分鐘就搞定了,而我要研究了一天才完全弄好)

------------------晚上補充----------------

經過測試我把這個代碼放到其他博客主題也是可以的,只是時間和天氣預報顯示有點問題,干脆刪除了,也是非常好看的!如圖:(體驗網址? http://www.gaizichengjin.com/shuoshuo

說說代碼放到其他博客主題效果

說說代碼放到其他博客主題效果

 

------------------簡潔的分界線------------------

這幾天博客改動的地方有點多,也不知道哪里和這個功能有沖突,說說變成了文章了,10月25日起,關閉了這個說說功能,刪除了內容。由于技術問題,這個功能剛剛出生就gameover了!

  • 澤業營銷網官方QQ群
  • 群號:99293363
  • weinxin
  • 我的微信公眾號
  • ID:iyangzeye
  • weinxin

楊澤業

發表評論

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

目前評論:2   其中:訪客  1   博主  1

    • 改字成金 改字成金 1

      這個功能好