WP短代碼實現「chat」文章聊天形式 文章也能活躍起來

以前發過一篇文章，是本身原創制做的文章聊天形式，連接>氣泡對話短代碼   當時只完成了一半，時間太忙了，抽不出時間。原文轉載：http://www.newsky365.com/wpchatliao/

此次能夠試試下面這篇文章的，是轉載過來的文章， 看了下，仍是很不錯的

如圖所示：

基本思路是利用wordpress內置的短代碼來減小添加對話內容的工做量，說直觀點就比如論壇的UBBcode

其實也沒什麼特別的好處，只不過很死板的文章一大堆文字下來，這樣會 讓人感受生動活躍一些

一、在主題的function.php中加入下列代碼：

1 2 3 4 5 6 7 8 9 10 11

function chatCode ( $ atts , $ content = null ) {      extract ( shortcode_atts ( array (          'chatter' = > 'Hermit' ,          'avatar' = > 'hermit' ,          'position' = > 'left' ,          'chatbg' = > 'blue' ,      ) , $ atts ) ) ;        return '<div class="chatbox cf"><div class="' . $ avatar . ' ' . $ position . ' ' . $ chatbg . ' chat_avatar"></div><section class="chat_content ' . $ position . ' ' . $ chatbg . '"><span><strong>' . $ chatter . ': </strong>' . $ content . '</span></section></div>' ; } add_shortcode ( 'chat' , 'chatCode' ) ;

共包含四個參數：

• $chatter – 定義聊天者名字，此處默認值爲Hermit
• $avatar – 定義聊天者頭像，此處默認值爲hermit（這是一個css類名，後面會提到）
• $position – 定義聊天框方向，此處默認值爲left
• $chatbg – 定義聊天框色調，此處默認值爲blue（同爲css類名，後詳）

二、定義CSS

下面是css樣式，僅做參考，一切樣式請以各自主題爲準。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

/* chat */ .chatbox { width : 690px ; display : block ; padding : 10px 0 10px 0 ; } .chatbox strong { color : #333 ; font-family : Verdana, Arial, Helvetica, sans-serif ; } .hermit { background : url ( images/hermit.jpg ) center no-repeat ; } .shine { background : url ( images/shine.jpg ) center no-repeat ; } .terry { background : url ( images/terry.jpg ) center no-repeat ; } .chat_avatar { width : 60px ; height : 60px ; padding : 3px ; margin : 0 10px ; } .chat_content span { display : inline-block ; width : 450px ; padding : 10px 20px ; } .chatbox section.left::before { content : "" ; width : 0 ; height : 0 ; display : block ; float : left ; margin-top : 5px ; border-left : 20px solid transparent ; } .chatbox section.right::before { content : "" ; width : 0 ; height : 0 ; display : block ; float : right ; margin-top : 5px ; border-right : 20px solid transparent ; } /* chat_blue */ .chatbox .blue span { border : 2px solid #66BCC5 ; color : #41848b ; } .chatbox div.blue { border : 1px solid #66BCC5 ; } .chatbox section.blue::before { border-bottom : 20px solid #66bcc5 ; } /* chat_green */ .chatbox .green span { border : 2px solid #BDC866 ; color : #6e7538 ; } .chatbox div.green { border : 1px solid #BDC866 ; } .chatbox section.green::before { border-bottom : 20px solid #BDC866 ; } /* chat_red */ .chatbox .red span { border : 2px solid #d57976 ; color : #c66763 ; } .chatbox div.red { border : 1px solid #d57976 ; } .chatbox section.red::before { border-bottom : 20px solid #d57976 ; }

目前只有兩位做者，因此頭像類只定義了兩個，評論框色調也只有blue和green。

具體使用方法和論壇UBB規則相似：

1 2	[ chat ] Hermit想說的話 [ / chat ] [ chat chatter = "阿良良木月火" avatar = "tsuki" position = "right" chatbg = "green" ]月火想說的話 [ / chat ]

 

顯示效果就是文章開頭的那樣子。

固然，僅僅這樣仍是很麻煩的，由於默認值只有一個，編號大於2的角色須要在短代碼中定義不少參數，這顯然違反了「短」的初衷。因此筆者建議添加2個函數，一個對應方向爲左的聊天框，另外一個對應右側的。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

//聊天形式短代碼-Hermit function chatHermit ( $ atts , $ content = null ) {      extract ( shortcode_atts ( array (          'chatter' = > 'Hermit' ,          'avatar' = > 'hermit' ,          'position' = > 'left' ,          'chatbg' = > 'blue' ,      ) , $ atts ) ) ;        return '<div class="chatbox cf"><div class="' . $ avatar . ' ' . $ position . ' ' . $ chatbg . ' chat_avatar"></div><section class="chat_content ' . $ position . ' ' . $ chatbg . '"><span><strong>' . $ chatter . ': </strong>' . $ content . '</span></section></div>' ; } add_shortcode ( 'hermit' , 'chatHermit' ) ; //聊天形式短代碼-Shine function chatShine ( $ atts , $ content = null ) {      extract ( shortcode_atts ( array (          'chatter' = > 'Shrineshine' ,          'avatar' = > 'shine' ,          'position' = > 'right' ,          'chatbg' = > 'green' ,      ) , $ atts ) ) ;        return '<div class="chatbox cf"><div class="' . $ avatar . ' ' . $ position . ' ' . $ chatbg . ' chat_avatar"></div><section class="chat_content ' . $ position . ' ' . $ chatbg . '"><span><strong>' . $ chatter . ': </strong>' . $ content . '</span></section></div>' ; } add_shortcode ( 'imouto' , 'chatShine' ) ;

如今支持隨意改變聊天框左右位置了。在短代碼加入position=」left/right」來控制便可。

好了，大功告成……

原文轉載：http://www.newsky365.com/wpchatliao/