點擊登錄
  • 歡迎訪問好資源,這里會在第一時間更新最新最好的資源給您,如果您有好的資源、文章,可投稿。如有其他需要請聯系 QQ 點我注冊
  • 如果您覺得本站非常有看點,那么趕緊使用Ctrl+D 收藏好資源吧~ 點我注冊

山东群英会顺一推荐:給WordPress編輯器添加表情按鈕,讓文章萌萌噠!

前端設計 itsmalldog 5143次瀏覽 已收錄 6個評論 掃描二維碼
本文最后更新于2014年11月21日,已超過 1 年沒有更新,如果文章內容或圖片資源失效,請留言反饋,我們會及時處理,謝謝!

4海南彩票开奖结果 www.vctrn.com 給WordPress默認編輯器添加表情按鈕,自由的給文章添加萌萌的表情,讓文章萌起來23333

給WordPress編輯器添加表情按鈕,讓文章萌萌噠!

前言

傳說有一種人叫表情;-) ,不管發什么都想帶幾個表情 :oops: ,但是WordPress自帶的編輯器確實木有表情按鈕,這讓身為表情控的博豬情何以堪,經過博豬百度一下,谷歌兩下,找到了比較不錯的解決方案了 :cool:

函數代碼

首先將以下代碼加入functions.php文件

<span class="com"><span class="com">//輸出<a href="//www.vctrn.com/?tag=wordpress" title="查看更多關于WordPress的文章" target="_blank">WordPress</a><a href="//www.vctrn.com/?tag=%e8%a1%a8%e6%83%85" title="查看更多關于表情的文章" target="_blank">表情</a></span></span>
<span class="kwd"><span class="kwd">function</span></span><span class="pln"><span class="pln"> fa_get_wpsmiliestrans</span></span><span class="pun"><span class="pun">(){</span></span>
<span class="kwd"><span class="kwd">global</span></span><span class="pln"><span class="pln"> $wpsmiliestrans</span></span><span class="pun"><span class="pun">;</span></span><span class="pln"><span class="pln">
$wpsmilies </span></span><span class="pun"><span class="pun">=</span></span><span class="pln"><span class="pln"> array_unique</span></span><span class="pun"><span class="pun">(</span></span><span class="pln"><span class="pln">$wpsmiliestrans</span></span><span class="pun"><span class="pun">);</span></span>
<span class="kwd"><span class="kwd">foreach</span></span><span class="pun"><span class="pun">(</span></span><span class="pln"><span class="pln">$wpsmilies </span></span><span class="kwd"><span class="kwd">as</span></span><span class="pln"><span class="pln"> $alt </span></span><span class="pun"><span class="pun">=></span></span><span class="pln"><span class="pln"> $src_path</span></span><span class="pun"><span class="pun">){</span></span><span class="pln"><span class="pln">
$output </span></span><span class="pun"><span class="pun">.=</span></span> <span class="str"><span class="str">'<a class="add-smily" data-smilies="'</span></span><span class="pun"><span class="pun">.</span></span><span class="pln"><span class="pln">$alt</span></span><span class="pun"><span class="pun">.</span></span><span class="str"><span class="str">'"><img class="wp-smiley" src="'</span></span><span class="pun"><span class="pun">.</span></span><span class="pln"><span class="pln">get_bloginfo</span></span><span class="pun"><span class="pun">(</span></span><span class="str"><span class="str">'template_directory'</span></span><span class="pun"><span class="pun">).</span></span><span class="str"><span class="str">'/img/smilies/'</span></span><span class="pun"><span class="pun">.</span></span><span class="pln"><span class="pln">rtrim</span></span><span class="pun"><span class="pun">(</span></span><span class="pln"><span class="pln">$src_path</span></span><span class="pun"><span class="pun">,</span></span> <span class="str"><span class="str">"gif"</span></span><span class="pun"><span class="pun">).</span></span><span class="str"><span class="str">'gif" /></a>'</span></span><span class="pun"><span class="pun">;</span></span>
<span class="pun"><span class="pun">}</span></span>
<span class="kwd"><span class="kwd">return</span></span><span class="pln"><span class="pln"> $output</span></span><span class="pun"><span class="pun">;</span></span>
<span class="pun"><span class="pun">}</span></span><span class="pln"><span class="pln">
add_action</span></span><span class="pun"><span class="pun">(</span></span><span class="str"><span class="str">'media_buttons_context'</span></span><span class="pun"><span class="pun">,</span></span> <span class="str"><span class="str">'fa_smilies_custom_button'</span></span><span class="pun"><span class="pun">);</span></span>
<span class="kwd"><span class="kwd">function</span></span><span class="pln"><span class="pln"> fa_smilies_custom_button</span></span><span class="pun"><span class="pun">(</span></span><span class="pln"><span class="pln">$context</span></span><span class="pun"><span class="pun">)</span></span> <span class="pun"><span class="pun">{</span></span><span class="pln"><span class="pln">
$context </span></span><span class="pun"><span class="pun">.=</span></span> <span class="str"><span class="str">'<style>.smilies-wrap{background:#fff;border: 1px solid #ccc;box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.24);padding: 10px;position: absolute;top: 60px;width: 380px;display:none}.smilies-wrap img{height:24px;width:24px;cursor:pointer;margin-bottom:5px} .is-active.smilies-wrap{display:block}</style><a id="insert-media-button" style="position:relative" class="button insert-smilies add_smilies" title="添加<a href="//www.vctrn.com/?tag=%e8%a1%a8%e6%83%85" title="查看更多關于表情的文章" target="_blank">表情</a>" data-editor="content" href="javascript:;">
添加表情
</a><div class="smilies-wrap">'</span></span><span class="pun"><span class="pun">.</span></span><span class="pln"><span class="pln"> fa_get_wpsmiliestrans</span></span><span class="pun"><span class="pun">()</span></span> <span class="pun"><span class="pun">.</span></span><span class="str"><span class="str">'</div><script>jQuery(document).ready(function(){jQuery(document).on("click", ".insert-smilies",function() { if(jQuery(".smilies-wrap").hasClass("is-active")){jQuery(".smilies-wrap").removeClass("is-active");}else{jQuery(".smilies-wrap").addClass("is-active");}});jQuery(document).on("click", ".add-smily",function() { send_to_editor(" " + jQuery(this).data("smilies") + " ");jQuery(".smilies-wrap").removeClass("is-active");return false;});});</script>'</span></span><span class="pun"><span class="pun">;</span></span>
<span class="kwd"><span class="kwd">return</span></span><span class="pln"><span class="pln"> $context</span></span><span class="pun"><span class="pun">;</span></span>
<span class="pun"><span class="pun">}</span></span>

自定義表情圖片

將以下代碼加入functions.php文件,可能很多主題已經做到了表情自定義了,這個可以忽略,具體看自己的主題吧 :mrgreen:

<span class="pln"><span class="pln">add_filter</span></span><span class="pun"><span class="pun">(</span></span><span class="str"><span class="str">'smilies_src'</span></span><span class="pun"><span class="pun">,</span></span><span class="str"><span class="str">'fa_smilies_src'</span></span><span class="pun"><span class="pun">,</span></span><span class="lit"><span class="lit">1</span></span><span class="pun"><span class="pun">,</span></span><span class="lit"><span class="lit">10</span></span><span class="pun"><span class="pun">);</span></span>
<span class="kwd"><span class="kwd">function</span></span><span class="pln"><span class="pln"> fa_smilies_src </span></span><span class="pun"><span class="pun">(</span></span><span class="pln"><span class="pln">$img_src</span></span><span class="pun"><span class="pun">,</span></span><span class="pln"><span class="pln"> $img</span></span><span class="pun"><span class="pun">,</span></span><span class="pln"><span class="pln"> $siteurl</span></span><span class="pun"><span class="pun">){</span></span><span class="pln"><span class="pln">
$img </span></span><span class="pun"><span class="pun">=</span></span><span class="pln"><span class="pln"> rtrim</span></span><span class="pun"><span class="pun">(</span></span><span class="pln"><span class="pln">$img</span></span><span class="pun"><span class="pun">,</span></span> <span class="str"><span class="str">"gif"</span></span><span class="pun"><span class="pun">);</span></span>
<span class="kwd"><span class="kwd">return</span></span><span class="pln"><span class="pln"> get_bloginfo</span></span><span class="pun"><span class="pun">(</span></span><span class="str"><span class="str">'template_directory'</span></span><span class="pun"><span class="pun">).</span></span><span class="str"><span class="str">'/img/smilies/'</span></span><span class="pun"><span class="pun">.</span></span><span class="pln"><span class="pln">$img</span></span><span class="pun"><span class="pun">.</span></span><span class="str"><span class="str">'png'</span></span><span class="pun"><span class="pun">;</span></span>
<span class="pun"><span class="pun">}</span></span>

效果圖

給WordPress編輯器添加表情按鈕,讓文章萌萌噠!

后語

一篇文章如果純粹都是文字的話看乏力,圖文并茂才是王道,當然文章多幾個萌萌的表情,會讓文章變得生動不小,這篇文章的代碼就可以在編輯器直接插入表情按鈕,省的還需要自己插入表情代碼。

相關鏈接

方形QQ表情下載

相關代碼來自于大發 :shock:?

好資源 , 版權所有丨如未注明 , 均為原創丨本網站采用BY-NC-SA協議進行授權 , 轉載請注明給WordPress編輯器添加表情按鈕,讓文章萌萌噠!!
喜歡 (16)
[捐贈網站,支持好資源!]
分享 (0)
發表我的評論
取消評論

表情 貼圖 加粗 刪除線 居中 斜體 簽到

Hi,您需要填寫昵稱和郵箱!

  • 昵稱 (必填)
  • 郵箱 (必填)
  • 網址
(6)個小伙伴在吐槽
  1. 多發精品,支持
    懶人天下2014-11-21 14:29 回復 Windows XP | Firefox瀏覽器 33.0
  2. 想試試
    Pang2015-03-16 16:50 回復 Windows 8 | Chrome 41.0.2272.89
  3. 表情下載不了,能發一份給我嗎,謝謝 [email protected]
    蜂哥2015-03-26 16:32 回復 Windows XP | Chrome 33.0.1750.117
  4. 你好,按您的教程修改后發現只顯示了部分表情的,想請教下什么原因啊。。。 :arrow:
    IzY2015-06-05 15:33 回復 Windows 7 | Firefox瀏覽器 38.0
  5. :mrgreen: 試試
    小義2015-08-20 15:18 回復 Windows 10 | Chrome 42.0.2311.152
  6. 試試 :mrgreen: :razz:
    aa2015-09-16 14:16 回復 Windows 8 | Firefox瀏覽器 40.0