最新消息:蔓草札记的微信公众号开通了,赶紧在微信通讯录公众号中搜索“蔓草札记”关注下吧 :)

WordPress 评论框表情和简单文本编辑

博客经验 xhhjin 15915浏览 9评论

本来已经将 WordPress 的升级提示隐藏,也不想再调整博客的主题了,但前天看到 WordPress 3.8 发布的全新后台管理界面,挺炫的,忍不住又折腾了下,同时把原来一直想要给评论框添加的文本编辑功能也加上了,虽然这个功能挺鸡肋的。

无评不博

一、Wordpress 评论框表情添加

最早是根据西门的后花园写的“完美实现 WordPress 评论表情”来做的,但里面有一点不方便的地方就是表情定义的位置是在 /wp-includes/images/ 里面,这样每次 WordPress 升级的时候都会被覆盖掉。因此对该代码做了下修改,使其不受升级的影响。

1、首先下载 smilies.zip(点我下载),里面有一个 smiley.php 文件和 smilies 的表情文件夹,将 smiley.php 放到你的主题文件夹里面,smilies 文件夹放到 wordpress 根目录的 images 文件夹里面,没有就新建一个;

2、然后打开主题文件夹下面的 comments.php,找到 textarea,在上面加上一句:

<?php include(TEMPLATEPATH . '/smiley.php'); ?>

3、接着修改主题文件夹下面的 functions.php,在第一个<?php 下面一行加上:

/* 自定义评论表情路径 */
add_filter('smilies_src','mancao_custom_smilies_src',1,10);
function mancao_custom_smilies_src ($img_src, $img, $siteurl){
 return $siteurl.'/images/smilies/'.$img;
}

4、最后修改主题文件夹下面的 style.css,里面加上一句:

#smilelink{cursor:pointer; width:465px;}

一般这样就可以了,但如果发现点击表情评论框无反应,请检查 comments.php 里面的 textarea 的 id 是多少,然后复制那个 id,替换到 smiley.php 里面的 comment 即可。一共有三个 comment 需要替换,自己查找。 所有图片表情显示的文字和路径都可以根据需要调整,找到 smiley.php 里面的相应代码修改即可。表情图片也可以替换成自己喜欢的。

二、Wordpress 评论框简单文本编辑

这个就是给评论框添加工具按钮,把评论支持的标签做成按钮一键输入,包括字体样式、链接、插图片、插代码、引用等等。

1、首先下载 comments.zip(点我下载),里面有一个 comments.js 和 comments.png,将 comments.js 文件放到你主题目录的 js 文件夹里面,comments.png 放到主题目录的 images 文件夹里面;

2、接着打开主题文件夹 footer.php,找到 wp_footer,在其后面加上如下 js 加载代码;

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/comments.js"></script>

3、然后打开主题文件夹下面的 comments.php,将下面的 html 代码放到合适的位置,一般也是找到 textarea,放到其前一句或后一句;

	<div class="comment-form-comment ption_r">
		<div class="editor_tools clearfix">
			<span><a href="javascript:SIMPALED.Editor.strong()" title="粗体" class="et_strong"> 粗体</a></span>
			<span><a href="javascript:SIMPALED.Editor.em()" title="斜体" class="et_em"> 斜体</a></span>
			<span><a href="javascript:SIMPALED.Editor.del()" title="删除线" class="et_del"> 删除线</a></span>
			<span><a href="javascript:SIMPALED.Editor.underline()" title="下划线" class="et_underline"> 下划线</a></span>
			<span><a href="javascript:SIMPALED.Editor.ahref()" title="链接" class="et_ahref"> 链接</a></span>
			<span><a href="javascript:SIMPALED.Editor.img()" title="图片" class="et_img"> 图片</a></span>
			<span><a href="javascript:SIMPALED.Editor.code()" title="代码" class="et_code"> 代码</a></span>
			<span><a href="javascript:SIMPALED.Editor.quote()" title="引用" class="et_quote"> 引用</a></span>
		</div>
	</div>

4、最后就是在主题目录的 style.css 中根据需要定制下 CSS 样式了,我用的是下面的,可以参考修改。

/* comment editor begin */
.editor_tools {position: relative; margin: 5px -3px -10px; border:0px solid #ccc; background-color:#e9e9e9; background-image:-ms-linear-gradient(bottom,#ddd,#e9e9e9); background-image:-moz-linear-gradient(bottom,#ddd,#e9e9e9); background-image:-o-linear-gradient(bottom,#ddd,#e9e9e9); background-image:-webkit-linear-gradient(bottom,#ddd,#e9e9e9); background-image:linear-gradient(bottom,#ddd,#e9e9e9);}
.editor_tools a {margin: 2px; line-height:20px; width:20px; height:20px; float:left; overflow:hidden; display:block; text-indent:-2000em;}
.editor_tools span,
.editor_tools span:hover {margin: 4px 0 4px 8px; color:#464646; border:0px solid #c3c3c3; -webkit-border-radius:3px; border-radius:3px; background-color:#eee; background-image:-ms-linear-gradient(bottom,#e3e3e3,#fff); background-image:-moz-linear-gradient(bottom,#e3e3e3,#fff); background-image:-o-linear-gradient(bottom,#e3e3e3,#fff); background-image:-webkit-linear-gradient(bottom,#e3e3e3,#fff); background-image:linear-gradient(bottom,#e3e3e3,#fff); float:left; overflow:hidden; cursor: pointer;}
.editor_tools span.splitter {padding-right: 5px; margin-right: 15px; border-right: 1px solid #c3d8eb;}
.editor_tools span:hover {border-color:#aaa; background:#ddd; }
.editor_tools a.et_strong{background:url(images/comments.png) no-repeat scroll 0 -20px transparent;}
.editor_tools a.et_em{background:url(images/comments.png) no-repeat scroll -20px -20px transparent;}
.editor_tools a.et_underline{background:url(images/comments.png) no-repeat scroll -40px -20px transparent;}
.editor_tools a.et_del{background:url(images/comments.png) no-repeat scroll -60px -20px transparent;}
.editor_tools a.et_ahref{background:url(images/comments.png) no-repeat scroll -80px -20px transparent;}
.editor_tools a.et_img{background:url(images/comments.png) no-repeat scroll -100px -20px transparent;}
.editor_tools a.et_code{background:url(images/comments.png) no-repeat scroll -120px -20px transparent;}
.editor_tools a.et_quote{background:url(images/comments.png) no-repeat scroll -140px -20px transparent;}
.editor_tools a.et_private{background:url(images/comments.png) no-repeat scroll -160px -20px transparent;}
.editor_tools a.et_smilies{background:url(images/comments.png) no-repeat scroll -180px -20px transparent;}
.editor_tools a.et_strong:hover{background-position:0 0;}
.editor_tools a.et_em:hover{background-position:-20px 0;}
.editor_tools a.et_underline:hover{background-position:-40px 0;}
.editor_tools a.et_del:hover{background-position:-60px 0;}
.editor_tools a.et_ahref:hover{background-position:-80px 0;}
.editor_tools a.et_img:hover{background-position:-100px 0;}
.editor_tools a.et_code:hover{background-position:-120px 0;}
.editor_tools a.et_quote:hover{background-position:-140px 0;}
.editor_tools a.et_private:hover{background-position:-160px 0;}
.editor_tools a.et_smilies:hover{background-position:-180px 0;}
/* comment editor end */

注: 该方法仅适用 WordPress 3.0 及以后版本,即支持 comment_form() 函数后的版本。

当然,你可以只用上面单独一个效果,也可以两个同时用,同时用的话可能还需要稍微调整下表情和文本编辑按钮之间的布局关系,附上我的效果图。

WordPress 评论框添加表情和简单文本编辑

Save

Save

Save


欢迎转载,转载请注明出处:蔓草札记 » WordPress 评论框表情和简单文本编辑

♥ 喜欢 1 赞赏
发表我的评论
取消评论

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (9)

  1. 很想问一下,WORDPRESS怎么上去了?现在根本上不去啊。麻烦给个办法吧?难道也是改HOSTS文件加入WORDPRESS网站的IP地址?谢谢。
    wave072310年前 (2014-01-08)回复
  2. 博主可以发一份文中的 coments.zip 文件到我邮箱吗?或者给个连接,文中分享的资源连接挂了,万分感谢
    繁夜8年前 (2016-07-22)回复
    • @繁夜 更新了下:http://pan.baidu.com/s/1c2DOD9I
      xhhjin博主8年前 (2016-07-22)回复
      • @xhhjin 其实主要是包含,修改评论框的 js 文件的那个 comments.zip 这个链接挂了
        繁夜8年前 (2016-07-28)回复
        • @繁夜 试下这个地址:http://pan.baidu.com/s/1pL6HeHH
          xhhjin博主8年前 (2016-07-29)回复
          • @xhhjin thank you! 可以了,一直想找这个,终于找到了 :mrgreen:
            繁夜8年前 (2016-07-29)
          • @xhhjin 额,博主你好像放错文件了,是 js 文件,不是评论的 php 文件
            繁夜8年前 (2016-07-29)
          • @繁夜 还真是,更新了下:http://pan.baidu.com/s/1skUdyAp
            xhhjin博主8年前 (2016-07-29)