利用WP短代码实现文章聊天形式

更新信息:2012-05-06 之前的代码有缺陷,小改了一下,可以随意控制聊天框的左右位置。

[hermit]你要我兴致勃勃地工作吗。[/hermit]
[shrine]没错。总之,一定要避免造成我强迫你劳动的印象。[/shrine]
[terry]二位这是闹哪样儿呐?[/terry]

以上台词出自《刀语 其二 斩刀·钝》

昨天宅谈的另一位作者Shrine提到用对话形式写一篇四月新番简评,我马上想到了postformat里的chat形式。当时宅谈还没有加入这种形式(眼下仍旧不支持,后面会提到原因),因为说实话这形式基本可以归为变态需要…不过既然已经写出来了,不妨介绍一下方法。

正如标题所说,基本思路是利用wordpress内置的短代码来减少添加对话内容的工作量,说直观点就好比论坛的UBBcode。具体方法如下:

1. 在主题的function.php中加入下列代码:

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类名,后详)

2. 定义CSS

下面是宅谈目前使用的css样式,仅作参考,一切样式请以各自主题为准。

/* 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.rightright::before{content:“”;width:0;height:0; display:block; float:rightright; 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。

3. 上传文件到服务器

这样就完成了。具体使用方法和论坛UBB规则类似:

[chat]Hermit想说的话[/chat]
[chat chatter=”阿良良木月火” avatar=”tsuki” position=”right” chatbg=”green”]月火想说的话[/chat]

显示效果就是文章开头的那样子。

当然,仅仅这样还是很麻烦的,因为默认值只有一个,编号大于2的角色需要在短代码中定义很多参数,这显然违反了“短”的初衷。所以笔者建议添加2个函数,一个对应方向为左的聊天框,另一个对应右侧的。

代码如下:

//聊天形式短代码-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’ );

Update.20120506
现在支持随意改变聊天框左右位置了。在短代码加入position=”left/right”来控制即可。