制作聊天(chat)短代码

上面的效果被作者称为chat，用于在文章中加入类似于两人聊天的效果。话不多说，上代码：

效果

使用方法

1、在function.php中加入以下代码：

function chatCode( $atts, $content = null ) {
extract( shortcode_atts( array(
'chatter' => '敖天羽',
'avatar' => 'sky',
'chatbg' => 'blue',
), $atts ) );

return '<div class="chatbox cf"><div class="'.$avatar.' '.$chatbg.' chat_avatar"></div><section class="chat_content '.$position.' '.$chatbg.'"><span><strong>'.$chatter.': </strong>'.$content.'</span></section></div>';
}
add_shortcode( 'chat', 'chatCode' );

其中chatter名字自行修改，chatbg和avatar之类的与以下的css相对应

2、在style.css中加入以下代码

/* Chat Format */
.chatbox{margin:15px 100px;padding:8px 10px 15px 10px;background:#f2f2f2;border:3px solid #DDD;border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px;}
.chatbox br{display:none;}
.sky{background:url(http://zhpech.b0.upaiyun.com/css/sky.jpg)  center no-repeat;}
.JLT{background:url(http://zhpech.b0.upaiyun.com/css/JLT.jpg)  center no-repeat;}
.chat_avatar{box-shadow:0px 1px 1px rgba(255, 255, 255, 0.75);position: relative;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius:3px;background-color:#fff;width: 50px;height: 50px;}
.chat_avatar img{margin:0px !important;padding:0px !important;display:block;box-shadow:0 1px 5px rgba(0, 0, 0, 0.22);-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;width:50px;height:50px;}
.chat_content{margin:-60px 0 0 85px;background:#ffffff}
.chatbox .blue{position:relative;color:#555;max-width:400px;padding:6px 10px;word-wrap:break-word;border:1px solid;border-color:#DDD #DDD #EEE #DDD;border-radius: 6px;-moz-box-shadow:0px 1px 1px #bbb;-webkit-box-shadow:0px 1px 1px #bbb;box-shadow:0px 1px 1px #bbb;}
.chatbox .blue p{font-size:13px;line-height:150%;}

将以上代码中的两个url更换为自己喜欢的图片地址：


http://zhpech.b0.upaiyun.com/css/sky.jpg
http://zhpech.b0.upaiyun.com/css/JLT.jpg

添加完成后在文章中使用：

格式一：[chat]输入内容[/chat]
格式二：[chat chatter="sky" avatar="sky" chatbg="blue"] 输入内容 [/chat]