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