CrayonSyntaxHighlighter代码高亮插件与fancybox图片暗箱冲突的解决方法
本文主要介绍蜡笔语法荧光笔代码高亮插件与fancybox图片冲突的解决方法。有需要的朋友可以参考一下。
其实，这是一个历史遗留问题，在最开始建站的时候就已经出现了，在知更鸟主题和CrayonSyntaxHighlighter这个插件之间，我最终选择了前者。
在知更鸟主题环境下启用CrayonSyntaxHighlighter插件，会出现如下冲突情况：
①、图片暗箱失效
②、下载暗箱失效
③、公告不能滚动
刚接触建站时，张戈也是一个绝对的菜鸟，除了运维啥都不会，出现这些问题时，只能舍弃其中一个。。。
随着接触建站时间的增长，已经能够编写一般的php和js脚本、会修改绝大部分网站功能了。这次给公司做百科网站时，再一次用到了CrayonSyntaxHighlighter这个插件，依然如同初恋，爱不释手！
秉着再次重逢，绝不放手的心态，决心要让知更鸟和CrayonSyntaxHighlighter插件共存！
一、冲突分析熟练的按下F12，开始debug：
似乎是JQuery有问题，或者是JQ冲突的重复加载，或者是加载失败。进一步检查源代码:
装载JQ的割台:
我发现JQ也装在底部:
看来插件没有判断JQ环境，所以强行加载导致了冲突！
其次，我们开始解决
。随便在网上搜了一下，找到了一个避免重复加载JQ的方法。将以下代码添加到主题的function.php中:
PHPCode复制内容到剪贴板
//禁止加载默认的jq库
如果(！Is_admin()){//后台不禁止
函数my_init_method()
WP_deregister_script('jquery')；//取消原来的jquery定义
}
add_action('init'，'my_init_method')；
}
WP_deregister_script('l10n')；
保存后马上试了一下效果，发现之前的问题解决了，但是蜡笔语法荧光笔的浮动标题有问题，动不了。查看源代码发现，不仅之前在底部加载的JQ没了，插件相关的JS也没了！上面的原代码禁止wp_footer函数输出所有js。？
三。基本解决
不过，这是个小问题。先把上面的代码屏蔽掉，然后打开文章的源代码，把除了重复加载的JQ之外的所有其他代码都复制一份，然后粘贴到header.php或者header.php中的相应位置:。
PHPCode复制内容到剪贴板
<！-代码亮点->:
<？phpif(is_single()){？>
<脚本类型='text/JavaScript'>；
/*<；！[CDATA[*/
varquicktags110n={"closeAllOpenTags":"\u5173\u95ed\u6240\u6709\u6253\u5f00\u7684\u6807\u7b7e"，"closetags":"\u5173\u95ed\u6807\u7b7e"，"enterURL":"\u8f93\u5165URL"，"enterimageurl":"\u8f93\u8f93
/*]]>；*/
</script>；
<scripttype='text/JavaScript'src='http://RES.Zhangge.net/WP-includes/js/quicktags.min.js？ver=4.0'></script>；
<脚本类型='text/JavaScript'>；
/*<；！[CDATA[*/
varCrayonSyntaxSettings={"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":"}；
varCrayonSyntaxStrings={"copy":"\u4f7f\u7528%s\u590d\u5236\uff0c\u4f7f\u7528%s\u7c98\u8d34\u3002"，"minimize":"\u70b9\u51fb\u5c55\u5f00\u4ee3\u7801"}；
varCrayonTagEditorSettings={"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":":":"range_CSS":"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_CSS":"#crayon-te-submit-wrapper"，"data_value":"data-value"，"attr
varCrayonSyntaxSettings={"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":"}；
varCrayonSyntaxStrings={"copy":"\u4f7f\u7528%s\u590d\u5236\uff0c\u4f7f\u7528%s\u7c98\u8d34\u3002"，"minimize":"\u70b9\u51fb\u5c55\u5f00\u4ee3\u7801"}；
/*]]>；*/
</script>；
<scripttype='text/JavaScript'src='http://RES.Zhangge.net/WP-content/plugins/crayon-syntax-highlight/js/min/crayon.te.min.js？ver=2.6.6'>；</script>；
<？php}？>
<！-代码亮点->:
全部保存后，代码高亮正常了，公告也动了，尼玛图片暗箱居然点击后会d出2次？关了第一层，里面还有第二层...
四、彻底解决
分别看了一下2层d出图片的ID，发现是不一样的，一种是鸟哥主题的fancybox-img，另一个是colorbox，我有没安装colorbox暗箱插件，哪来的？
最终发现是CrayonSyntaxHighlighter插件的crayon.te.min.js带colorbox暗箱功能，导致同时出现了2次图片d出！真是冤家聚头。。。
最后，我用了一个简单的方法，就解决了这个问题：
尼玛，不是d2次么？那我把其中一个hidden不就行了？？
于是找到由CrayonSyntaxHighlighter插件d出的那个图片的ID，然后对这个ID设置隐藏CSS属性就搞定了！
解决办法：将以下代码添加到上面的高亮代码当中：
全部保存后，代码正常高亮，公告也动了。尼玛图片黑盒点击后居然d出两次？关闭一楼后，里面还有二楼...
第四，彻底解决
。我分别看了两个楼层的d窗图片的id，发现不一样。一个是以鸟哥为主题的fancybox-img，另一个就不一样了。
终于发现蜡笔语法荧光笔插件的crayon.te.min.js有彩盒暗箱的功能，导致同时d出两个图像！多好的朋友聚会啊。。。
最后我用一个简单的方法解决了问题:
尼玛，你不是打了两次吗？我为什么不干脆藏起其中一个呢？？
所以找到蜡笔语法荧光笔插件d出的图片的ID，然后在这个ID上设置隐藏的CSS属性，就完成了！
解决方案:将以下代码添加到上面突出显示的代码中:
CSSCode复制内容到剪贴板
<styletype="text/css">
#彩盒{
显示:无！重要；
}
</style>；
或者，将以下代码添加到主题的style.css中:
CSSCode复制内容到剪贴板
#彩盒{
显示:无！重要；
}
可以用colorbox的id隐藏d出的图片，从而变相解决重复d出的问题！
到目前为止，蜡笔语法荧光笔插件终于和知更鸟主题和谐共处了！这并不容易.....
值得注意的是，JQuery请使用1.7~1.8版本，过高的版本可能缺少robin主题部分所需的功能。
五、强迫症
作为一名中度强迫症患者，张戈几乎花了一整天的时间，将自己博客中的200多篇文章的高亮代码手动替换为蜡笔句法高亮高亮模式。我靠，我真的累了！！！
微信扫一扫
支付宝扫一扫
评论列表（0条）