Crayon Syntax Highlighter代碼高亮插件與fancybox圖片暗箱沖突的解決方法

在知更鳥(niǎo)主題環(huán)境下啟用Crayon Syntax Highlighter插件,會(huì)出現(xiàn)如下沖突情況:
①、圖片暗箱失效
②、下載暗箱失效
③、公告不能滾動(dòng)
剛接觸建站時(shí),張戈也是一個(gè)絕對(duì)的菜鳥(niǎo),除了運(yùn)維啥都不會(huì),出現(xiàn)這些問(wèn)題時(shí),只能舍棄其中一個(gè)。。。
隨著接觸建站時(shí)間的增長(zhǎng),已經(jīng)能夠編寫(xiě)一般的php和js腳本、會(huì)修改絕大部分網(wǎng)站功能了。這次給公司做百科網(wǎng)站時(shí),再一次用到了Crayon Syntax Highlighter這個(gè)插件,依然如同初戀,愛(ài)不釋手!
秉著再次重逢,絕不放手的心態(tài),決心要讓知更鳥(niǎo)和Crayon Syntax Highlighter插件共存!
一、沖突分析
熟練的按下F12,開(kāi)始debug:

看來(lái)是JQuery的問(wèn)題,要不就是重復(fù)加載JQ沖突了,要不就是沒(méi)加載成功,進(jìn)一步查看源代碼:
頭部已加載JQ:
赫然發(fā)現(xiàn)底部也加載了JQ:
看來(lái)是插件未判斷JQ環(huán)境,就強(qiáng)行加載導(dǎo)致了沖突!
二、著手解決
網(wǎng)上隨便搜了一把,就找到了避免JQ重復(fù)加載的方法。將如下代碼添加到主題的function.php當(dāng)中即可:
- //禁止加載默認(rèn)jq庫(kù)
- if ( !is_admin() ) { // 后臺(tái)不禁止
- function my_init_method() {
- wp_deregister_script( 'jquery' ); // 取消原有的 jquery 定義
- }
- add_action('init', 'my_init_method');
- }
- wp_deregister_script( 'l10n' );
保存后,立即試了下效果,發(fā)現(xiàn)之前的問(wèn)題倒是解決了,但是Crayon Syntax Highlighter的浮動(dòng)標(biāo)題出了問(wèn)題,不能動(dòng)了。查看下源代碼,發(fā)現(xiàn)不但之前底部加載的JQ沒(méi)了,而且插件相關(guān)的JS也都沒(méi)了!原來(lái)上面的代碼是禁止所有由wp_footer函數(shù)輸出的js啊??
三、基本解決
不過(guò),這算是小問(wèn)題了,先把上面的代碼屏蔽,然后打開(kāi)文章源代碼,把除重復(fù)加載的JQ之外的其他代碼全部拷貝一份,然后粘貼到footer.php或header.php的相應(yīng)位置即可:
- <!-- 代碼高亮 -->
- <?php if ( is_single() ) { ?>
- <script type='text/javascript'>
- /* <![CDATA[ */
- var quicktagsL10n = {"closeAllOpenTags":"\u5173\u95ed\u6240\u6709\u6253\u5f00\u7684\u6807\u7b7e","closeTags":"\u5173\u95ed\u6807\u7b7e","enterURL":"\u8f93\u5165URL","enterImageURL":"\u8f93\u5165\u56fe\u50cfURL","enterImageDescription":"\u4e3a\u56fe\u50cf\u8f93\u5165\u63cf\u8ff0","fullscreen":"\u5168\u5c4f","toggleFullscreen":"\u5207\u6362\u5168\u5c4f\u6a21\u5f0f","textdirection":"\u6587\u672c\u65b9\u5411","toggleTextdirection":"\u5207\u6362\u7f16\u8f91\u5668\u6587\u672c\u4e66\u5199\u65b9\u5411"};
- /* ]]> */
- </script>
- <script type='text/javascript' src='http://res.zhangge.net/wp-includes/js/quicktags.min.js?ver=4.0'></script>
- <script type='text/javascript'>
- /* <![CDATA[ */
- var CrayonSyntaxSettings = {"version":"2.6.6","is_admin":"0","ajaxurl":"http:\/\/zhangge.net\/wp-admin\/admin-ajax.php","prefix":"crayon-","setting":"crayon-setting","selected":"crayon-setting-selected","changed":"crayon-setting-changed","special":"crayon-setting-special","orig_value":"data-orig-value","debug":""};
- var CrayonSyntaxStrings = {"copy":"\u4f7f\u7528 %s \u590d\u5236\uff0c\u4f7f\u7528 %s \u7c98\u8d34\u3002","minimize":"\u70b9\u51fb\u5c55\u5f00\u4ee3\u7801"};
- var CrayonTagEditorSettings = {"home_url":"http:\/\/zhangge.net","css":"crayon-te","css_selected":"crayon-selected","code_css":"#crayon-code","url_css":"#crayon-url","url_info_css":"#crayon-te-url-info","lang_css":"#crayon-lang","title_css":"#crayon-title","mark_css":"#crayon-mark","range_css":"#crayon-range","inline_css":"crayon-inline","inline_hide_css":"crayon-hide-inline","inline_hide_only_css":"crayon-hide-inline-only","hl_css":"#crayon-highlight","switch_html":"#content-html","switch_tmce":"#content-tmce","tinymce_button_generic":".mce-btn","tinymce_button":"a.mce_crayon_tinymce,.mce-i-crayon_tinymce","tinymce_button_unique":"mce_crayon_tinymce","tinymce_highlight":"mce-active","submit_css":"#crayon-te-ok","cancel_css":"#crayon-te-cancel","content_css":"#crayon-te-content","dialog_title_css":"#crayon-te-title","submit_wrapper_css":"#crayon-te-submit-wrapper","data_value":"data-value","attr_sep":":","css_sep":"_","fallback_lang":"sh","dialog_title_add":"\u63d2\u5165\u4ee3\u7801\u9ad8\u4eae","dialog_title_edit":"\u7f16\u8f91\u4ee3\u7801\u9ad8\u4eae","submit_add":"\u63d2\u5165","submit_edit":"\u4fdd\u5b58","bar":"#crayon-te-bar","bar_content":"#crayon-te-bar-content","extensions":{"scpt":"applescript","applescript":"applescript","swf":"as","fla":"as","cs":"c#","h":"c++","hh":"c++","hpp":"c++","hxx":"c++","h++":"c++","cc":"c++","cpp":"c++","cxx":"c++","c++":"c++","pas":"delphi","java":"java","class":"java","jar":"java","mv":"miva","mvc":"miva","mvt":"miva","m":"objc","mm":"objc","pl":"perl","py":"python","pyw":"python","pyc":"python","pyo":"python","pyd":"python","rb":"ruby","rbx":"ruby","rhtml":"ruby","vbs":"vb"}};
- var CrayonSyntaxSettings = {"version":"2.6.6","is_admin":"0","ajaxurl":"http:\/\/zhangge.net\/wp-admin\/admin-ajax.php","prefix":"crayon-","setting":"crayon-setting","selected":"crayon-setting-selected","changed":"crayon-setting-changed","special":"crayon-setting-special","orig_value":"data-orig-value","debug":""};
- var CrayonSyntaxStrings = {"copy":"\u4f7f\u7528 %s \u590d\u5236\uff0c\u4f7f\u7528 %s \u7c98\u8d34\u3002","minimize":"\u70b9\u51fb\u5c55\u5f00\u4ee3\u7801"};
- /* ]]> */
- </script>
- <script type='text/javascript' src='http://res.zhangge.net/wp-content/plugins/crayon-syntax-highlighter/js/min/crayon.te.min.js?ver=2.6.6'></script>
- <?php } ?>
- <!-- 代碼高亮 -->
全部保存后,代碼高亮正常了,公告也動(dòng)了,尼瑪圖片暗箱居然點(diǎn)擊后會(huì)彈出2次?關(guān)了第一層,里面還有第二層...
四、徹底解決
分別看了一下2層彈出圖片的ID,發(fā)現(xiàn)是不一樣的,一種是鳥(niǎo)哥主題的fancybox-img,另一個(gè)是colorbox,我有沒(méi)安裝colorbox暗箱插件,哪來(lái)的?
最終發(fā)現(xiàn)是Crayon Syntax Highlighter插件的crayon.te.min.js帶colorbox暗箱功能,導(dǎo)致同時(shí)出現(xiàn)了2次圖片彈出!真是冤家聚頭。。。
最后,我用了一個(gè)簡(jiǎn)單的方法,就解決了這個(gè)問(wèn)題:
尼瑪,不是彈2次么?那我把其中一個(gè)hidden不就行了??
于是找到由Crayon Syntax Highlighter插件彈出的那個(gè)圖片的ID,然后對(duì)這個(gè)ID設(shè)置隱藏CSS屬性就搞定了!
解決辦法:將以下代碼添加到上面的高亮代碼當(dāng)中:
- <style type="text/css">
- #colorbox {
- display:none !important;
- }
- </style>
或者,將以下代碼添加到主題的style.css當(dāng)中:
- #colorbox {
- display:none !important;
- }
就能隱藏ID為colorbox的彈出圖片,從而變相解決了重復(fù)彈出的問(wèn)題!
至此,Crayon Syntax Highlighter插件終于和知更鳥(niǎo)主題和睦共處了!真是不容易啊....
值得注意的是,JQuery請(qǐng)使用1.7~1.8左右版本,太高版本中可能會(huì)缺少知更鳥(niǎo)主題部分所需功能。
五、強(qiáng)迫癥
作為一個(gè)中度強(qiáng)迫癥,張戈花了幾乎一整天的時(shí)間,將博客200多篇文章的高亮代碼,純手工替換為Crayon Syntax Highlighter高亮模式,我勒個(gè)去啊,真是累得一逼?。?!
相關(guān)文章
CyberPanel安裝WordPress并配置偽靜態(tài)規(guī)則
下面教你如何在 CyberPanel安裝WordPress以及配置偽靜態(tài),需要的朋友可以參考下2023-12-27- 這篇文章主要介紹了wordpress無(wú)法安裝更新主題插件的解決辦法,需要的朋友可以參考下2020-12-27
WordPress必備數(shù)據(jù)庫(kù)SQL查詢(xún)語(yǔ)句整理
發(fā)現(xiàn)幾條比較實(shí)用的,適合 WordPress 實(shí)用的SQL語(yǔ)句。于是就趕緊收集分享出來(lái)了,需要的朋友可以參考下2017-09-23wordpress在安裝使用中出現(xiàn)404、403、500及502問(wèn)題的分析與解決方法
wordpress是很多新手站長(zhǎng)搭建個(gè)人博客最喜愛(ài)的程序,但是最近在使用WordPress的時(shí)候遇到了一些問(wèn)題,所以想著將遇到問(wèn)題總結(jié)分享出來(lái),下面這篇文章主要給大家介紹了關(guān)于wo2017-08-11WordPress取消英文標(biāo)點(diǎn)符號(hào)自動(dòng)替換中文標(biāo)點(diǎn)符號(hào)的優(yōu)雅方法
這篇文章主要介紹了WordPress取消英文標(biāo)點(diǎn)符號(hào)自動(dòng)替換中文標(biāo)點(diǎn)符號(hào)的優(yōu)雅方法,需要的朋友可以參考下2017-04-04- 這篇文章主要給大家介紹了wordpress自定義上傳文件類(lèi)型的方法,如WordPress默認(rèn)允許上傳 .exe 后綴名的可運(yùn)行文件,那么我們?cè)趺唇褂脩?hù)在WordPress后臺(tái)發(fā)表文章時(shí)上傳 .e2016-12-19
- 大家可能發(fā)現(xiàn)了當(dāng)實(shí)現(xiàn)了前端用戶(hù)中心,后臺(tái)控制面板就失去了作用,那么限制其他用戶(hù)進(jìn)入后臺(tái)控制面板就很有必要了!那么我們要怎么做呢?通過(guò)下面這篇文章分享的方法后,只2016-12-19
WordPress實(shí)現(xiàn)回復(fù)文章評(píng)論后發(fā)送郵件通知的功能
這篇文章主要介紹了WordPress實(shí)現(xiàn)回復(fù)文章評(píng)論后發(fā)送郵件通知的功能,涉及wordpress針對(duì)評(píng)論與郵件的相關(guān)操作技巧,需要的朋友可以參考下2016-10-11WordPress使用自定義文章類(lèi)型實(shí)現(xiàn)任意模板的方法
這篇文章主要介紹了WordPress使用自定義文章類(lèi)型實(shí)現(xiàn)任意模板的方法,可通過(guò)自定義文章類(lèi)型來(lái)實(shí)現(xiàn)任意模版的使用,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-10-11WordPress后臺(tái)地址被改導(dǎo)致無(wú)法登陸后臺(tái)的簡(jiǎn)單解決方法
這篇文章主要介紹了WordPress后臺(tái)地址被改導(dǎo)致無(wú)法登陸后臺(tái)的簡(jiǎn)單解決方法,簡(jiǎn)單分析了后臺(tái)無(wú)法登陸的原因與相應(yīng)的解決方法,涉及針對(duì)wordpress配置項(xiàng)的簡(jiǎn)單修改,需要的朋友2016-10-11