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

發(fā)布時間：2015-10-18 22:42:27 作者：張戈

這篇文章主要介紹了Crayon Syntax Highlighter代碼高亮插件與fancybox圖片暗箱沖突的解決方法,需要的朋友可以參考下

其實(shí)，這是一個歷史遺留問題，在最開始建站的時候就已經(jīng)出現(xiàn)了，在知更鳥主題和Crayon Syntax Highlighter這個插件之間，我最終選擇了前者。
在知更鳥主題環(huán)境下啟用Crayon Syntax Highlighter插件，會出現(xiàn)如下沖突情況：

①、圖片暗箱失效
②、下載暗箱失效
③、公告不能滾動
剛接觸建站時，張戈也是一個絕對的菜鳥，除了運(yùn)維啥都不會，出現(xiàn)這些問題時，只能舍棄其中一個。。。
隨著接觸建站時間的增長，已經(jīng)能夠編寫一般的php和js腳本、會修改絕大部分網(wǎng)站功能了。這次給公司做百科網(wǎng)站時，再一次用到了Crayon Syntax Highlighter這個插件，依然如同初戀，愛不釋手！
秉著再次重逢，絕不放手的心態(tài)，決心要讓知更鳥和Crayon Syntax Highlighter插件共存！

一、沖突分析

熟練的按下F12，開始debug：

看來是JQuery的問題，要不就是重復(fù)加載JQ沖突了，要不就是沒加載成功，進(jìn)一步查看源代碼：

頭部已加載JQ：

赫然發(fā)現(xiàn)底部也加載了JQ:

看來是插件未判斷JQ環(huán)境，就強(qiáng)行加載導(dǎo)致了沖突！

二、著手解決

網(wǎng)上隨便搜了一把，就找到了避免JQ重復(fù)加載的方法。將如下代碼添加到主題的function.php當(dāng)中即可：

PHP Code復(fù)制內(nèi)容到剪貼板

//禁止加載默認(rèn)jq庫
if ( !is_admin() ) { // 后臺不禁止
function my_init_method() {
wp_deregister_script( 'jquery' ); // 取消原有的 jquery 定義
}
add_action('init', 'my_init_method');
}
wp_deregister_script( 'l10n' );

保存后，立即試了下效果，發(fā)現(xiàn)之前的問題倒是解決了，但是Crayon Syntax Highlighter的浮動標(biāo)題出了問題，不能動了。查看下源代碼，發(fā)現(xiàn)不但之前底部加載的JQ沒了，而且插件相關(guān)的JS也都沒了！原來上面的代碼是禁止所有由wp_footer函數(shù)輸出的js啊？？

三、基本解決

不過，這算是小問題了，先把上面的代碼屏蔽，然后打開文章源代碼，把除重復(fù)加載的JQ之外的其他代碼全部拷貝一份，然后粘貼到footer.php或header.php的相應(yīng)位置即可：

PHP Code復(fù)制內(nèi)容到剪貼板

<?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 } ?>

全部保存后，代碼高亮正常了，公告也動了，尼瑪圖片暗箱居然點(diǎn)擊后會彈出2次？關(guān)了第一層，里面還有第二層...

四、徹底解決

分別看了一下2層彈出圖片的ID，發(fā)現(xiàn)是不一樣的，一種是鳥哥主題的fancybox-img，另一個是colorbox，我有沒安裝colorbox暗箱插件，哪來的？
最終發(fā)現(xiàn)是Crayon Syntax Highlighter插件的crayon.te.min.js帶colorbox暗箱功能，導(dǎo)致同時出現(xiàn)了2次圖片彈出！真是冤家聚頭。。。
最后，我用了一個簡單的方法，就解決了這個問題：
尼瑪，不是彈2次么？那我把其中一個hidden不就行了？？
于是找到由Crayon Syntax Highlighter插件彈出的那個圖片的ID，然后對這個ID設(shè)置隱藏CSS屬性就搞定了！
解決辦法：將以下代碼添加到上面的高亮代碼當(dāng)中：

CSS Code復(fù)制內(nèi)容到剪貼板

<style type="text/css">
#colorbox {
display:none !important;
}
</style>

或者，將以下代碼添加到主題的style.css當(dāng)中：

CSS Code復(fù)制內(nèi)容到剪貼板

#colorbox {
display:none !important;
}

就能隱藏ID為colorbox的彈出圖片，從而變相解決了重復(fù)彈出的問題！
至此，Crayon Syntax Highlighter插件終于和知更鳥主題和睦共處了！真是不容易啊....
值得注意的是，JQuery請使用1.7~1.8左右版本，太高版本中可能會缺少知更鳥主題部分所需功能。
五、強(qiáng)迫癥

作為一個中度強(qiáng)迫癥，張戈花了幾乎一整天的時間，將博客200多篇文章的高亮代碼，純手工替換為Crayon Syntax Highlighter高亮模式，我勒個去啊，真是累得一逼?。?！

Tag：Crayon syntax Highlighter 代碼高亮 Fancybox

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

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

相關(guān)文章

最新評論

文章分類

大家感興趣的內(nèi)容

最近更新的內(nèi)容