WordPress文章中插入qq表情

看見一些部落格中使用了QQ表情，這個效果還是很不錯的，可以讓文章看起來更爽，那麼這個是怎麼實作的呢？

下面我就來說說方法。

工具：QQ表情包，下載下傳位址：http://yunpan.cn/cLw6UhwB865Eg 通路密碼 af61

步驟：

1.先下載下傳我上面提供的表情包，然後上傳到你主題目錄下的images目錄中，如果沒有這個目錄就自己建立一個，我提供的是壓縮包，你們直接上傳到cpanel面闆後解壓即可。目錄的名字不要修改。

2.在function.php中添加下面代碼：

展開/收縮

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

//輸出WordPress表情 function fa_get_wpsmiliestrans(){ global $wpsmiliestrans ; $wpsmilies = array_unique ( $wpsmiliestrans ); foreach ( $wpsmilies as $alt => $src_path ){ $output .= '<a class="add-smily" data-smilies="' . $alt . '"><img class="wp-smiley" src="' .get_bloginfo( 'template_directory' ). '/images/smilies/' .rtrim( $src_path , "gif ").'gif" /></a>'; } return $output ; } add_action( 'media_buttons_context' , 'fa_smilies_custom_button' ); function fa_smilies_custom_button( $context ) { $context .= '<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= "添加表情" data-editor= "content" href= "javascript:;" > 添加表情 </a><div class = "smilies-wrap" > '. fa_get_wpsmiliestrans() .' </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>'; return $context ; }

注意：上面代碼設定的表情路徑為主題檔案夾/images/smilies，是以請一定确認目錄名字是否一樣，如果不一樣請根據需要修改。

3.完成上述操作後，在釋出文章時，就會看到添加媒體選項右側多了一個添加表情，點選一下就可以看到酷酷的qq表情啦，如下圖：

但是注意，第二步的代碼功能還是有缺陷的，比如你會發現你現在釋出表情時表情會單獨占用一行，而且表情看起來有時候很小而不是原來的大小，這個肯定不行三，是以還要看第4步。

4.在style.css中添加下面代碼

1 2 3 4 5

.wp-smiley { display: inline-block !important; height:24px !important; max-height: 24px !important; }

搞定！

文章轉載自：http://www.dedewp.com/2843.html