wordpress自定义表情及管理不同表情包
发布:smiling 来源: PHP粉丝网 添加日期:2014-06-05 13:25:09 浏览: 评论:0
最近在搞一个用wordpress模板的小博客,用的威言威语的weisay simple主题,然后在文章页面觉得评论的图标不是很有特点,想自己写个小模块加一些不同风格的表情进来,在网上找了很多文章,大多全都只是替换个表情的图片包,没有根本上解决真正的添加自定义表情的问题,后来自己摸索出来一些方法,跟大家分享一下~
一、表情的显示:首先是显示问题,在weisay simple主题的留言板上显示了一行wordpress原有的一套表情,想要增加的话首先要下载一套表情的图片,wordpress表情是放在localhost\wp-includes\images\smilies文件夹下,weisay simple主题的留言表情显示文件是localhost\wp-content\themes\weisaysimple\includes\smiley.php文件,打开smiley.php文件,找到中间一大坨的“<a>”标签,就是表情的显示配置,以第一句为例:
- <a href="javascript:grin(':?:')"><img src="<?php bloginfo('url'); ?>/wp-includes/images/smilies/icon_question.gif" alt="" /></a>
表示的就是显示icon_question.gif的表情图片,点击时会自动向留言框里输入替代字符:?:(点击发布留言时会自动解析:?:字符为表情图片,这一点在第三部分说明),为了预览显示,先不更改替代字符(修改替换字符后输入没有问题,点击发布后不会被解析成表情图片,详见第三部分),只修改表情的图片名就行,修改后可以预览下效果.
二、表情分包:有没有觉得一大堆表情堆在一起会显得很多?我在参考了http://wenku.baidu.com/view/ff3aea25af45b307e8719752.html 这篇文档的代码后,调整了下样式,将表情分包放在了不同的菜单按钮下,鼠标移到对应按钮才显示对应的表情包,下面是我调整后的代码和样式:
将smiley.php文件中间一大坨的标签语句的代码替换为:
- <div class="menuz">
- <ul>
- <li>
- <a href='Javascript:void(0)'>
- 天猫表情
- <!--[if IE 7]>
- <!-->
- </a>
- <!--<![endif]-->
- <!--[if lte IE 6]>
- <table>
- <tr>
- <td>
- <![endif]-->
- <ul>
- <li>
- <a href="javascript:grin(':tm01:')"><img src="<?php bloginfo('url'); ?>/wp-includes/images/smilies/01.gif" title="大笑" alt="" /></a>
- <a href="javascript:grin(':tm02:')"><img src="<?php bloginfo('url'); ?>/wp-includes/images/smilies/02.gif" title="给力" alt="" /></a>
- 。。。。。。
- </li>
- </ul>
- </ul>
- <!--[if lte IE 6]>
- </td>
- </tr>
- </table>
- </a>
- <![endif]-->
- </li>
- </ul>
- </div>
在样式文件中加入以下代码(比如我用的是t-red.css的红色样式,就在localhost\wp-content\themes\weisaysimple\css\t-red.css文件中加入以下样式代码,具体颜色根据自己需要修改):
- .menuz{font-size:12px;position:relative;z-index:100;}
- .menuz ul{list-style:none;}
- .menuz li {float:left;position:relative;}
- .menuz ul ul {visibility:hidden;position:absolute;left:3px;bottom: 28px;background:rgb(240, 240, 190);}
- .menuz ul ul ul {left:-76px;bottom: 0px;}
- .menuz table {position:absolute; top:0; left:0;}
- .menuz ul li:hover ul, .menu ul a:hover ul{visibility:visible;}
- .menuz a{border-radius: 3px;display:block;border:1px solid #aaa;background:#bc0000;padding:2px 10px;margin:3px;color:#fff;text-decoration:none;text-shadow: 0px 0px #fff;}
- .menuz a:hover{background:#6a0000;}
- .menuz ul ul li {border-top: 5px solid rgb(240, 240, 190);clear:both;text-align:center;font-size:12px;width:500px;}
- .menuz ul ul li a{border-radius: 0px;display:block;width:25px;height:25px;margin:0;border:0;float:left;background:rgb(240, 240, 190);}
- .menuz ul ul li a:hover{border:0;background:rgb(240, 240, 190);}
预览效果:
三、接下来是配置留言的解析文件,如果不配置的话输出的表情替代字符在发布时就不能被正确替换成表情图片或者干脆只显示字符没有图片.
配置文件在localhost\wp-includes\functions.php里,打开文件,在2420行开始就是表情和字符的替代关联语句,例如:
'8-)' => 'icon_cool.gif',
'8-O' => 'icon_eek.gif',
':-(' => 'icon_sad.gif',
很明显就是会把“8-)”替换为icon_cool.gif表情图片,所以只要在下边配上新增的表情图片文件,并配置上不同的替代字符(此处编辑时记得要跟第一部分的smiley.php文件中的替代字符对应),替代好后就可以预览效果啦~
Tags: wordpress 自定义表情 表情包
相关文章
- ·WordPress初级教程1:什么是博客?(2013-11-11)
- ·WordPress初级教程-2: 什么是WordPress?(2013-11-11)
- ·WordPress初级教程-3: WordPress的功能和特点(2013-11-11)
- ·WordPress初级教程-4: 选择WordPress博客的主机和域名(2013-11-11)
- ·WordPress初级教程-5: 安装WordPress(2013-11-11)
- ·WordPress初级教程-6: 本地安装WordPress(2013-11-11)
- ·WordPress初级教程-7: 一个数据库中安装多个WordPress博客(2013-11-11)
- ·WordPress初级教程-8: WordPress控制面板/ Dashboard(2013-11-11)
- ·WordPress初级教程-9: WordPress用户设置/ Users(2013-11-11)
- ·WordPress初级教程-10: WordPress博客配置/ Settings(2013-11-11)
- ·关于wordpress上传图片不显示的原因(2013-11-11)
- ·WordPress程序的脆弱点你知道吗 (2013-11-11)
- ·总结八大Wordpress网站百度收录实现秒收的方法绝招 (2013-11-11)
- ·WordPress如何网站投稿者也可以上传图片(2014-03-18)
- ·WordPress怎么修改新用户注册邮件内容(2014-03-18)
- ·WordPress怎么添加前台注册功能(2014-03-18)
推荐文章
热门文章
最新评论文章
- 写给考虑创业的年轻程序员(10)
- PHP新手上路(一)(7)
- 惹恼程序员的十件事(5)
- PHP邮件发送例子,已测试成功(5)
- 致初学者:PHP比ASP优秀的七个理由(4)
- PHP会被淘汰吗?(4)
- PHP新手上路(四)(4)
- 如何去学习PHP?(2)
- 简单入门级php分页代码(2)
- php中邮箱email 电话等格式的验证(2)