1. 程式人生 > >修改WordPress預設評論表情(附:跳轉到多說評論框的方法)

修改WordPress預設評論表情(附:跳轉到多說評論框的方法)

先吐槽一下:這兩天博主折騰搶票火車票去了,部落格也沒怎麼打理,最不爽的是折騰到最後才弄到一張無座的,唉,說多了都是淚啊!鐵道部你技術不行可以招標啊,幹嘛拿老百姓做小白鼠呢?就你那破網站,相信大把的高手可以做得比你們好百倍,還不用浪費那麼多資金!吐槽完畢。。。

之前用著大路社的主題,個人也是折騰了挺久才讓功能有所完善,結果感覺載入很卡頓,而且相容性也挺雞肋的,比如說在 IE 核心下側邊欄及全域性排版都能正常顯示,而到了 Webkit 核心下就各種錯排,慘不忍睹!又各種找主題,糾結了半天還是找了這款 weisay 1.61,本來想用 devework 的付費主題,結果漲價了,還是先擱著以後再說!

更換主題之後,發現一些小問題,其中一個就是發現文章介面的

評論直達功能失效了,經過觀察發現是啟用了多說導致的,但由於技術不佳不會解決(次日已自行研究搞定,詳見底部補充.),個人又挺喜歡這個功能,就只好拋棄多說,用回自帶評論框。。。結果發現自帶的表情真的太寒磣了,暴醜啊,只好自己動手修改下。

各位感受下:

修改前

修改Wordpress預設評論表情(附:跳轉到多說評論框的方法)

修改後:

第①種:

修改Wordpress預設評論表情(附:跳轉到多說評論框的方法)

第②種:

修改Wordpress預設評論表情(附:跳轉到多說評論框的方法)

通過後臺主題編輯介面,發現了 weisay 控制評論表情的 php 檔案→smiley.php,但 weisay 並沒有將表情打包進主題,僅僅呼叫了 wordpress 預設的表情檔案,這樣一分析,就至少有兩種方法來修改自帶評論框的表情咯!

一、傻瓜式替換 wordpress 預設表情(適合主題預設表情路徑)

找到你喜歡的表情圖片去替換 wordpress 預設表情圖片即可。注意名稱要一致哦!

預設表情庫路徑為:網站根目錄/wp-includes/images/smilies

優點:簡單易行,適合新手。
缺點:升級 WP 之後需重新弄。

二、主題程式碼修改法(提取自 weisay 主題,並補充了圖片 alt 和 title)

1.在主題資料夾下新增 smiley.php 檔案,然後貼上一下內容:

PHP
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859 <script type="text/javascript"language="javascript">/* <![CDATA[ */functiongrin(tag){varmyField;tag=' '+tag+' ';if(document.getElementById('comment')&&document.getElementById('comment').type=='textarea'){myField=document.getElementById('comment');}else{returnfalse;}if(document.selection){myField.focus();sel=document.selection.createRange();sel.text=tag;myField.focus();}elseif(myField.selectionStart||myField.selectionStart=='0'){varstartPos=myField.selectionStart;varendPos=myField.selectionEnd;varcursorPos=endPos;myField.value=myField.value.substring(0,startPos)+tag+myField.value.substring(endPos,myField.value.length);cursorPos+=tag.length;myField.focus();myField.selectionStart=cursorPos;myField.selectionEnd=cursorPos;}else{myField.value+=tag;myField.focus();}}/* ]]> */</script><div id="smilelink"><aonclick="javascript:grin(':?:')"><img src="/wp-content/themes/dalushe/images/smilies/icon_question.gif"title="疑問"alt="疑問"/></a><aonclick="javascript:grin(':razz:')"><img src="/wp-content/themes/dalushe/images/smilies/icon_razz.gif"title="調皮"alt="調皮"/></a><aonclick="javascript:grin(':sad:')"><img src="/wp-content/themes/dalushe/images/smilies/icon_sad.gif"title="傷心"alt="傷心"/></a><aonclick="javascript:grin(':evil:')"><img src="/wp-content/themes/dalushe/images/smilies/icon_evil.gif"title="摳鼻"alt="摳鼻"/></a><aonclick="javascript:grin(':!:')"><img src="/wp-content/themes/dalushe/images/smilies/icon_exclaim.gif"title="黑線"alt="黑線"/></a><aonclick="javascript:grin(':smile:')"><img src="/wp-content/themes/dalushe/images/smilies/icon_smile.gif"title="微笑"alt="微笑"/></a><aonclick="javascript:grin(':oops:')"><img src="/wp-content/themes/dalushe/images/smilies/icon_redface.gif"title="可愛"alt="可愛"/></a><aonclick="javascript:grin(':grin:')"><img src="/wp-content/themes/dalushe/images/smilies/icon_biggrin.gif"title="奸笑"alt="奸笑"/></a><aonclick="javascript:grin(':eek:')"><img src="/wp-content/themes/dalushe/images/smilies/icon_surprised.gif"title="震驚"alt="震驚"/></a><aonclick="javascript:grin(':shock:')"><img src="/wp-content/themes/dalushe/images/smilies/icon_eek.gif"title="嚇到了"alt="嚇到了"/></a><aonclick="javascript:grin(':???:')"><img src="/wp-content/themes/dalushe/images/smilies/icon_confused.gif"title="撇嘴"alt="撇嘴"/></a><aonclick="javascript:grin(':cool:')"><img src="/wp-content/themes/dalushe/images/smilies/icon_cool.gif"title="酷"alt="酷"/></a><aonclick="javascript:grin(':lol:')"><img src="/wp-content/themes/dalushe/images/smilies/icon_lol.gif"title="忍不住笑"alt="忍不住笑笑"/></a><aonclick="javascript:grin(':mad:')"><img src="/wp-content/themes/dalushe/images/smilies/icon_mad.gif"title="狂罵"alt="狂罵"/></a><aonclick="javascript:grin(':twisted:')"><img src="/wp-content/themes/dalushe/images/smilies/icon_twisted.gif"title="狂怒"alt="狂怒"/></a><aonclick="javascript:grin(':roll:')"><img src="/wp-content/themes/dalushe/images/smilies/icon_rolleyes.gif"title="噢?"alt="噢?"/></a><aonclick="javascript:grin(':wink:')"><img src="/wp-content/themes/dalushe/images/smilies/icon_wink.gif"title="鼓掌"alt="鼓掌"/></a><!--<aonclick="javascript:grin(':idea:')"><img src="/wp-content/themes/dalushe/images/smilies/icon_idea.gif"title="貪"alt="貪"/></a>--><aonclick="javascript:grin(':arrow:')"><img src="/wp-content/themes/dalushe/images/smilies/icon_arrow.gif"title="⊙﹏⊙b汗"alt="⊙﹏⊙b汗"/></a><aonclick="javascript:grin(':neutral:')"><img src="/wp-content/themes/dalushe/images/smilies/icon_neutral.gif"title="鄙視"alt="鄙視"/></a><aonclick="javascript:grin(':cry:')"><img src="/wp-content/themes/dalushe/images/smilies/icon_cry.gif"title="大哭"alt="大哭"/></a><aonclick="javascript:grin(':mrgreen:')"><img src="/wp-content/themes/dalushe/images/smilies/icon_mrgreen.gif"title="嘿黑"alt="嘿黑"/></a></div>

然後在主題目錄找到評論模組:comments.php(名稱可能隨主題而定),找到[textarea name=*..][/textarea],並在它的上面加上

PHP
1 <?phpinclude(TEMPLATEPATH.'/smiley.php');?>

儲存之後基本就可以修改成功了!

特別說明下,我這個程式碼是原封不動貼上來的,所以路徑就是指向我之前大路社主題的表情位置,各位如果需要拷貝過去的話,只需要根據實際情況修改/wp-content/themes/dalushe/images/smilies/這個路徑就可以了!後面的 title 和 alt 屬性可能要根據你的表情來相應修改下。

優點:自定義表情路徑,就算 WP 升級也無需再次折騰。
缺點:麻煩了不少。
寫到最後,博主再打包一下我所用的表情圖片吧!喜歡的童鞋可以拿走拉!

第①個:大路社提取的方正行 QQ 表情(目前我所用的)

第②個:QQ 原版表情

下載地址

2014-01-07 補充採用多說時修復跳轉功能的方法:

通過檢視相關主題程式碼已自行搞定,又用回多說啦!多說在聯絡左鄰右舍還是比郵件方便不少!下面貼下方法:

其實這跳轉功能就是通過內部 id 標籤來實現的,搞清楚了就非常簡單,自帶的評論模組是加了 id 申明的,也就是 id=respond,那麼你在文章連結後面加上#respond 引數就自動跳轉到評論框所在位置啦!而多說預設是沒有定義這樣一個 ID 的,所以我們只要在呼叫多說的位置給它添上一個 ID 標識就行了,具體做法如下:

開啟主題目錄的文章頁面→single.php 找到<?php comments_template(); ?>,在包裹它 div 中加入 id="respond"就行,如下所示:

PHP
1234 <!--評論框所在位置--><div class="articles"id="respond"><?phpcomments_template();?></div>

那麼要跳轉到評論框的位置,直接給[我要評論]加上<a href="#respond"></a>即可,比如我要評論

簡單吧?
哈哈,方便的多說又回來了~~~