上面的效果被作者称为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%;}
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]
你们家幻灯呢
@敖天羽 。。啊哈幻灯不见了?
@WP酷 可能是加载慢吧……
@敖天羽 。。。我这边秒开,不带缓存。。
@WP酷 =0=我这里不知道为什么加载还是有点压力的 不过好冷清<(=→_→=)>
@敖天羽 ~~~啦啦我想等到文章满100篇再互访的,不然就这么点东西拿不出手啊
@WP酷 =0=