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/