前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >wordpress自定义表情及管理不同表情包

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

作者头像
WindCoder
发布2018-09-19 11:30:17
1.1K0
发布2018-09-19 11:30:17
举报
文章被收录于专栏:WindCoderWindCoder

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

先说下基本的:

一般表情图片会放在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自定义表情及管理不同表情包

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2013-12-29,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 先说下基本的:
  • 自定义方式:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档