wordpress自定义表情及管理不同表情包

原本是在寻找七牛的解决方案,没想到顺便把表情这块先解决了。

先说下基本的:

一般表情图片会放在imges/smilies一类的文件夹中,具体的还要看各自主题。

主题的留言表情显示文件一般是localhostwpcontentthemes主题目录includessmiley.php一类的(具体的可见评论.php文件里)。

自定义的一般要修改三个文件:

1.表情图片。2.主题的留言表情显示文件。3。在一定情况下需要修改localhostwp-includesfunctions.php文件。现在一一说来。

自定义方式:

1.将表情图片放置在imges/smilies一类的文件夹中或替换里面的表情图片。

2.留言表情显示文件类似localhostwpcontentthemes主题目录includessmiley.php,找到里面有好多

“<a>”标签的地方,就是表情的显示配置,以第一句为例:

 <a href="javascript:grin(':?:')"><img src="<?php bloginfo('template_directory'); ?>/images/smiley/baidu/icon_question.gif" alt="" /></a>

表示显示图片icon_question.gif,回复时会以:?:(留言时会自动填写并解析)。

3.配置留言的解析文件。

如果不配置的话输出的表情替代字符在发布时就不能被正确替换成表情图片或者干脆只显示字符没有图片。。。(其实这也是我之前遇到的问题)

配置文件在localhostwp-includesfunctions.php里,打开文件,在2420行开始就是表情和字符的替代关联语句,例如:

 '8-)' => 'icon_cool.gif',
 '8-O' => 'icon_eek.gif',
 ':-(' => 'icon_sad.gif',

很明显就是会把“8-)”替换为icon_cool.gif表情图片,所以只要在下边配上新增的表情图片文件,并配置上不同的替代字符(此处编辑时记得要跟第一部分的smiley.php文件中的替代字符对应)

替代好后就可以预览效果啦~

4.表情分类显示

将smiley.php文件中间一大坨的标签语句的代码替换为:

<div class="smenuz">
 <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-green.cs的绿色样式,就在localhostwp-contentthemesweisaysimplecsst-green.css文件中加入以下样式代码,具体颜色根据自己需要修改):

.smenuz{font-size:12px;position:relative;z-index:100;}
.smenuz ul{list-style:none;}
.smenuz li {float:left;position:relative;}
.smenuz ul ul {visibility:hidden;position:absolute;left:3px;bottom: 28px;background:rgb(240, 240, 190);}
.smenuz ul ul ul {left:-76px;bottom: 0px;}
.smenuz table {position:absolute; top:0; left:0;}
.smenuz ul li:hover ul, .menu ul a:hover ul{visibility:visible;}
.smenuz 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;}
.smenuz a:hover{background:#6a0000;}
.smenuz ul ul li {border-top: 5px solid rgb(240, 240, 190);clear:both;text-align:center;font-size:12px;width:500px;}
.smenuz ul ul li a{border-radius: 0px;display:block;width:25px;height:25px;margin:0;border:0;float:left;background:rgb(240, 240, 190);}
.smenuz ul ul li a:hover{border:0;background:rgb(240, 240, 190);}

预览效果:

参考资料:wordpress自定义表情及管理不同表情包

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏携程技术中心

干货 | 如何一步步打造基于React的移动端SPA框架

作者简介 喻珍祥,携程港澳研发高级经理,2004年接触互联网开发,见证前端开发从美工到全栈开发的全过程。2014年加入携程,主要负责永安旅游APP移动前端架构和...

484100
来自专栏DeveWork

WordPress免插件仅代码实现文章归档模板 II

不多说了,本站目前使用的效果,可以到我的存档页一览,该方法来自zww,感谢原作者,在这之前,建议你: 1、你的博客存档页面地址后面的应该为/articles,而...

60880
来自专栏编程微刊

js仿通知栏新消息实时推送更新效果

在最近的项目里面,用到websocket做消息推送,其中有这样的一个效果,在消息列表的模块,接收到很多条信息,展示在界面的是最近的十条接受到的消息,实时更新模块...

31330
来自专栏xingoo, 一个梦想做发明家的程序员

【AngularJS】—— 5 表单

这部分,我们写一个表单程序,使用angularjs的检测并完成表单属性的获取与拷贝。   在AngularJS中,也支持html5中多种控件的自动检测,如...

23550
来自专栏web前端教室

简单粗暴,以小见大 -- 实现一个按钮的前端组件

按钮,一个button,一个div,一个a标签,都可以做成按钮。现在要把它做成一个前端组件,那前端组件是什么? 定义很多,我随便网上查一个,“指一些设计为通用性...

26070
来自专栏性能与架构

网页性能优化工具

PageSpeed 和 YSlow 是目前主流的网页性能测试工具 GT Metrix 结合了 Google PageSpeed 和 YSlow,帮助开发者创建...

44640
来自专栏娱乐心理测试

微信小程序如何获取地理位置和进行地图导航

82450
来自专栏MixLab科技+设计实验室

从react-sketch.app说起

airbnb又发布了款开源工具,这次是一个利用react来生成sketch设计稿的工具。 基本原理 是利用sketch开放的api接口,把react写的组件按照...

39750
来自专栏编程微刊

jedate-开始使用一款好用的时间插件

24430
来自专栏编程

6个绝招,让你的网站加载速度提高3倍!

首先我们打开一个网页看到的都只是前端,所以我们看到一个页面背后的支持就是HTML代码,其中就包含了各种网页标签,其中包括网站优化中的TKD,载入的渲染资源:ja...

34460

扫码关注云+社区

领取腾讯云代金券