现在网上流行微信对话聊天截图,通过对话截图,也可以写一段比较有意思的文章,今天云落也来做一下这个功能。
前言
我不知道其他朋友有没有这样的经历,比如有时候你介绍一个东西或者文章的时候,总想吐槽几句或者夸一句。一般这个时候我们可能有一个文本框,或者引用来表示这段文字。但是如果将这段文字用做,表情加文字泡的现实可能会更好一点。
实现方法
云落是比较喜欢用短代码的形式,所以这个功能同样是用短代码来实现。在这个功能里面,我设置了说两个人物,然后有九个表情。根据需要不同的文字来使用不同的表情。比如说一段很正常文字,我们就会使用冷漠脸。如果是高兴的话,我们可以用一个,非常开心的表情。当然我们也可以用吐槽的表情。
-
当然啦,如果有时候自己犯傻的话也可以自嘲几句。毕竟像云落这样可是经常犯错的。比如这个就是,这个是头像在左侧的,表情属于是冷漠脸的,这个人物是谁还真不知道
-
当然了,由于这个功能更偏向娱乐,所以这个功能不打算加入主题里面,几句短代码实现的小功能,感觉没必要加入主题里面,下面云落把主要代码贴一下,有需要的自己添加
代码
define( 'SP_URI', plugin_dir_url(__FILE__) );//返回本插件链接,以/结尾 // 对话 function bq_comment($atts, $content=null){ extract(shortcode_atts(array("p"=>'',"x"=>''), $atts)); if($p == '0'){ $pclass = 'even'; $bqclass1 = 'n'; }elseif($p=='1') { $pclass = 'odd'; $bqclass1 = 'y'; } if($x=='0'){ $bqclass2 ='none'; }elseif($x=='1'){ $bqclass2 ='happy'; }elseif($x=='2'){ $bqclass2 ='angry'; }elseif($x=='3'){ $bqclass2 ='sad'; }elseif($x=='4'){ $bqclass2 ='cry'; }elseif($x=='5'){ $bqclass2 ='baga'; }elseif($x=='6'){ $bqclass2 ='anxious'; }elseif($x=='7'){ $bqclass2 ='surprise'; }elseif($x=='8'){ $bqclass2 ='excited'; } return '<ul class="dlg"> <li class="dlg_clear '.$pclass.'"> <div class="bqavatar bq_'.$bqclass1.'_'.$bqclass2.'"></div> <div class="comment-content">'.$content.'</div> </li> </ul>'; } add_shortcode('bqshuo','bq_comment'); //加载密码可见的样式 function bqshuo_css() { global $post,$posts; foreach ($posts as $post) { if ( has_shortcode( $post->post_content, 'bqshuo') && is_singular() ){ echo '<style type="text/css"> .dlg { width: 100%; } .dlg_clear { clear:both; } .dlg li { margin-bottom: 15px; overflow: hidden; } .dlg li div { *width:72%; max-width:72%; line-height:160%; letter-spacing:1px;color:#333; } .article-content .dlg{ margin-left: 0px; } .bqavatar { float: left; height:98px; margin:5px 15px 0 15px; padding: 1px; width: 88px; border-radius:5px; border:1px solid #fff; } .comment-content { background: #eee; float: left; padding: 10px 15px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; margin-top:8px; } .even .comment-content { padding-left: 7px; } .odd .comment-content { padding-right: 7px; } .odd .bqavatar, .odd .comment-content { float:right; position:relative; } .article-content .dlg li:before { content: ""; } .even .comment-content:before, .odd .comment-content:after { content: ""; width: 0; height: 0; font-size: 0; position: relative; border: 8px solid transparent; overflow: hidden; top:-2px; } .even .comment-content:before { border-right-color: #eee; border-left: 0; left: -15px; top:20px; } .odd .comment-content:after { position:absolute; top:20px; border-left-color: #eee; border-right: 0; right: -8px; } .bq_n_none { background-image:url('.SP_URI.'static/img/n_0_none.jpg); } .bq_n_happy { background-image:url('.SP_URI.'static/img/n_1_happy.jpg); } .bq_n_angry { background-image:url('.SP_URI.'static/img/n_2_angry.jpg); } .bq_n_sad { background-image:url('.SP_URI.'static/img/n_3_sad.jpg); } .bq_n_cry { background-image:url('.SP_URI.'static/img/n_4_cry.jpg); } .bq_n_baga { background-image:url('.SP_URI.'static/img/n_5_baga.jpg); } .bq_n_anxious { background-image:url('.SP_URI.'static/img/n_6_anxious.jpg); } .bq_n_surprise { background-image:url('.SP_URI.'static/img/n_7_surprise.jpg); } .bq_n_excited { background-image:url('.SP_URI.'static/img/n_8_excited.jpg); } .bq_n_leiben { background-image:url('.SP_URI.'static/img/n_9_leiben.jpg); } .bq_y_none { background-image:url('.SP_URI.'static/img/y_0_none.jpg); } .bq_y_happy { background-image:url('.SP_URI.'static/img/y_1_happy.jpg); } .bq_y_angry { background-image:url('.SP_URI.'static/img/y_2_angry.jpg); } .bq_y_sad { background-image:url('.SP_URI.'static/img/y_3_sad.jpg); } .bq_y_cry { background-image:url('.SP_URI.'static/img/y_4_cry.jpg); } .bq_y_baga { background-image:url('.SP_URI.'static/img/y_5_baga.jpg); } .bq_y_anxious { background-image:url('.SP_URI.'static/img/y_6_anxious.jpg); } .bq_y_surprise { background-image:url('.SP_URI.'static/img/y_7_surprise.jpg); } .bq_y_excited { background-image:url('.SP_URI.'static/img/y_8_excited.jpg); } .bq_y_fuhei { background-image:url('.SP_URI.'static/img/y_9_fuhei.jpg); }</style>';} } } add_action('wp_head', 'bqshuo_css');
由于这个功能是写在插件里面的,所以有些代码自己可以改下.
-
恩,感觉棒棒的
-- 完 --
天吖,研究了半小时,总算开窍了,把这个功能给添加上了! 😛
黑呼呼的,啥也看不见~
🙁 搞不了,这也太难了~~~
可以考虑把这个对话引用功能集成到主题里嘛!
@shengkui 不考虑,很简单的小功能,自己用小插件
贴上能把代码贴全?贴一半还不如不贴。
@叶良辰 不实用的小玩意
这个挺有意思的~ 😉
待会儿试试看
云落-怎么用