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

2024-09-07 00:50:51

字体：大中小

来源：转载

供稿：网友

最近在搞一个用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)'>

   天猫表情

    

    </a>

    

    

    <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>

  

  </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);}