解决Crayon Syntax Highlighter代码高亮与fancybox图片暗箱冲突问题 | 张戈博客

  • 时间:
  • 浏览:49
  • 来源:言午博客 - 专注共享福佳博客活动

虽然 ,这是一有两个 历史遗留问题报告 ,在最时候开始建站的前一天 就肯能出現了,在知更鸟主题和Crayon Syntax Highlighter很多插件之间,我最终取舍 了前者。

在知更鸟主题环境下启用Crayon Syntax Highlighter插件,会出現如下冲突情况:

①、图片暗箱失效

②、下载暗箱失效

③、公告能才能 滚动

刚接触建站时,张戈也是一有两个 绝对的菜鸟,除了运维啥完整后该会,出現那此问题报告 时,才能才能 舍弃其中一有两个 。。。

随着接触建站时间的增长,肯能才能编写一般的php和js脚本、会修改绝大累积网站功能了。这次给公司做百科网站时,再一次用到了Crayon Syntax Highlighter很多插件,依然如同初恋,爱不释手!

秉着再次重逢,绝不放手的心态,决心要让知更鸟和Crayon Syntax Highlighter插件共存!

一、冲突分析

熟练的按下F12,时候开始debug:

看来是JQuery的问题报告 ,要不而是重复加载JQ冲突了,要不而是没加载成功,进一步查看源代码:

头部已加载JQ:

赫然发现底部也加载了JQ:

看来是插件未判断JQ环境,就强行加载原困了冲突!

二、着手避免

网上随便搜了一把,就找到了避免JQ重复加载的最好的最好的办法。将如下代码添加到主题的function.php当中即可:

//禁止加载默认jq库
if ( !is_admin() ) { // 后台不禁止
function my_init_method() {
wp_deregister_script( 'jquery' ); // 撤出

原有的 jquery 定义
}
add_action('init', 'my_init_method');
}
wp_deregister_script( 'l10n' );

保存后,立即试了下效果,发现前一天 的问题报告 倒是避免了,而是Crayon Syntax Highlighter的浮动标题出了问题报告 ,能才能 动了。查看下源代码,发现不但前一天 底部加载的JQ没有了,而是插件相关的JS也都没有了!从前上面的代码是禁止所有由wp_footer函数输出的js啊??

三、基本避免

不过,这否有 小问题报告 了,先把上面的代码屏蔽,而是打开文章源代码,把除重复加载的JQ之外的很多代码完整拷贝一份,而是粘放上footer.php或header.php的相应位置即可:

<!-- 代码高亮 -->
<?php if ( is_single() ) { ?>
<script type='text/javascript'>
/* <![CDATA[ */
var quicktagsL10n = {"closeAllOpenTags":"\u5173\u95ed\u6240\u6709\u6253\u5f00\u7684\u630007\u7b7e","closeTags":"\u5173\u95ed\u630007\u7b7e","enterURL":"\u8f93\u5165URL","enterImageURL":"\u8f93\u5165\u56fe\u3000cfURL","enterImageDescription":"\u4e3a\u56fe\u3000cf\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='//res.zgboke.com/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:\/\/zhang.ge\/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\u30002","minimize":"\u70b9\u51fb\u5c55\u5f00\u4ee3\u730001"};
var CrayonTagEditorSettings = {"home_url":"http:\/\/zhang.ge","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\u730001\u9ad8\u4eae","dialog_title_edit":"\u7f16\u8f91\u4ee3\u730001\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:\/\/zhang.ge\/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\u30002","minimize":"\u70b9\u51fb\u5c55\u5f00\u4ee3\u730001"};
/* ]]> */
</script>
<script type='text/javascript' src='//res.zgboke.com/wp-content/plugins/crayon-syntax-highlighter/js/min/crayon.te.min.js?ver=2.6.6'></script>
<?php } ?> 
<!-- 代码高亮 -->

完整保存后,代码高亮正常了,公告也动了,尼玛图片暗箱青春恋爱物语点击后该弹出2次?关了第一层,上面还有第二层…

四、彻底避免

分别看过一下2层弹出图片的ID,发现是不一样的,两种是鸟哥主题的fancybox-img,从前是colorbox,我有没安装colorbox暗箱插件,哪来的?

最终发现是Crayon Syntax Highlighter插件的crayon.te.min.js带colorbox暗箱功能,原困一齐出現了2次图片弹出!青春恋爱物语冤家聚头。。。

最后,我用了一有两个 简单的最好的最好的办法,就避免了很多问题报告 :

尼玛,完整后该弹2次么?从前把其中一有两个 hidden不就行了??

于是找到由Crayon Syntax Highlighter插件弹出的那个图片的ID,而是对很多ID设置隐藏CSS属性就学会英语了!

避免最好的最好的办法:将以下代码添加到上面的高亮代码当中:

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

肯能,将以下代码添加到主题的style.css当中:

#colorbox {
   display:none !important;
 }

就能隐藏ID为colorbox的弹出图片,从而变相避免了重复弹出的问题报告 !

至此,Crayon Syntax Highlighter插件终于和知更鸟主题和睦共处了!青春恋爱物语不容易啊….

值得注意的是,JQuery请使用1.7~1.8左右版本,太高版本中肯能会缺少知更鸟主题累积所需功能。

五、强迫症

作为一有两个 中度强迫症,张戈花了几乎一整天的时间,将博客3000多篇文章的高亮代码,纯手工替换为Crayon Syntax Highlighter高亮模式,我勒个去啊,青春恋爱物语累得一逼!!!