• 国庆快乐,放假三天

  • 准备增加一个免登录支付功能

  • 微信扫码登录功能已经 ok 了

  • 主题更新一下,修复了头像挂掉的问题

  • 后羿更新网站文章可能不会那么闲了

  • 不得不说,美国贴吧的界面真是难看到死

  • 看到网上新闻美国的贴吧将成为中国公司

  • 推送试试

  • 睡觉之前测试一下

  • 发现了一个非常不错的插件

一个或许比较有趣又或者无聊的WordPress小功能

WordPress 云落 2年前 (2017-10-10) 748次浏览 9个评论
文章目录[隐藏]

现在网上流行微信对话聊天截图,通过对话截图,也可以写一段比较有意思的文章,今天云落也来做一下这个功能。

一个或许比较有趣又或者无聊的WordPress小功能

前言


我不知道其他朋友有没有这样的经历,比如有时候你介绍一个东西或者文章的时候,总想吐槽几句或者夸一句。一般这个时候我们可能有一个文本框,或者引用来表示这段文字。但是如果将这段文字用做,表情加文字泡的现实可能会更好一点。

实现方法

云落是比较喜欢用短代码的形式,所以这个功能同样是用短代码来实现。在这个功能里面,我设置了说两个人物,然后有九个表情。根据需要不同的文字来使用不同的表情。比如说一段很正常文字,我们就会使用冷漠脸。如果是高兴的话,我们可以用一个,非常开心的表情。当然我们也可以用吐槽的表情。

  • 当然啦,如果有时候自己犯傻的话也可以自嘲几句。毕竟像云落这样可是经常犯错的。比如这个就是,这个是头像在左侧的,表情属于是冷漠脸的,这个人物是谁还真不知道

  • 当然了,由于这个功能更偏向娱乐,所以这个功能不打算加入主题里面,几句短代码实现的小功能,感觉没必要加入主题里面,下面云落把主要代码贴一下,有需要的自己添加

代码

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');

由于这个功能是写在插件里面的,所以有些代码自己可以改下.

  • 恩,感觉棒棒的


-- 完 --
一个或许比较有趣又或者无聊的WordPress小功能
扫码订阅,第一时间获得更新
微信扫码二维码,订阅我们网站的动态,另外不定时发送 WordPress 小技巧,你可以随时退订,欢迎订阅哦~

极客公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:一个或许比较有趣又或者无聊的WordPress小功能

极客公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:一个或许比较有趣又或者无聊的WordPress小功能
喜欢 (9)
云落
关于作者:
无折腾,不生活,我是一个WordPress菜鸟,一个玩淘宝的卖家,欢迎你认识我,我是云落!
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(9)个小伙伴在吐槽
  1. 黑呼呼的,啥也看不见~
    moi2019-10-23 16:34 回复 Windows 7 | Chrome 63.0.3239.132
  2. :sad: 搞不了,这也太难了~~~
    moi2019-10-11 13:20 回复 Windows 7 | Chrome 63.0.3239.132
  3. shengkui
    可以考虑把这个对话引用功能集成到主题里嘛!
    shengkui2018-02-05 23:36 回复 Android 5.1.1 | Firefox浏览器 57.0
    • 云落
      不考虑,很简单的小功能,自己用小插件
      云落2018-02-06 10:41 回复 Windows 10 | Firefox浏览器 yunluo
  4. 贴上能把代码贴全?贴一半还不如不贴。
    叶良辰2017-12-20 15:36 回复 Windows XP | Chrome 55.0.2883.87
    • 云落
      不实用的小玩意
      云落2017-12-20 17:06 回复 Windows 10 | Firefox浏览器 58.0
  5. 这个挺有意思的~ :wink:
    龙笑天2017-10-14 15:01 回复 Windows 7 | Firefox浏览器 28.0
  6. 待会儿试试看 :mrgreen:
    祭夜2017-10-13 16:42 回复 Android 7.1.2 | Firefox浏览器 56.0
  7. 云落-怎么用
    农村小伙2017-10-10 22:01 回复 Windows XP | Chrome 11.0.672.0