本来已经将 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 评论框表情和简单文本编辑