空の領域

又一个坑爹的神站 大人說:要清爽 要低調

0%

聊天(chat)短代码制作教程

[chat]嘛少年们,你们最想要的环节到了,今天小天大人不做作业就来陪你们玩这个吧!![/chat]

嘛看到这个面板是不是很兴奋很激动,好吧他也是短代码之一,虽然只是山寨品不过好歹他也是代码啊亲!!

sososo然后……我想说的是,功能还是挺多的吧= =、、再次:这只是山寨品 原效果来自:姗宝

好了准备工作就跳过跳过了反正上面那篇介绍了很多种了,具体想说的话……嘛看这里啦:http://blog.otakism.org/733(啊喂都说了是山寨只是各种的结合产物而已)

和上一篇一样,在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相对应

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(https://img.codesky.me/css/sky.jpg) center no-repeat;}
.JLT{background:url(https://img.codesky.me/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%;}

你可以添加其他用户和样式,php只是一个默认值而已<(=→_→=)>修改一下url里的图片就行了(QAQ不是很会把头像放在右边而把对话框放在左边QAQ)

这样的话使用:

[☆chat☆] [/chat☆]

[☆chat chatter=”sky” avatar=”sky” chatbg=”blue”☆] 汪 [/chat☆]

均可定义,<(=→_→=)>好人就帮我这个不懂代码的完善一下加上靠右吧。

把☆去掉吧┈━═☆


2013年02月03日补充=。=:

如果需要更改方向的话直接使用Seven的比较统一,我是加了两个短代码实现的,具体哪里也有写,传送门:http://kn007.net/topics/small-day-chat-chat-short-code-micro-change/

欢迎关注我的其它发布渠道