Crayon Syntaxer代码高亮插件与fancybox图片暗箱抵触的处理办法

2022-01-01 收藏 0 点赞 0 图文教程

其实，这是一个历史**成绩，在最开端建站的时分就曾经呈现了，在知更鸟主题和Crayon Syntaxer这个插件之间，我最终抉择了前者。
在知更鸟主题环境下启用Crayon Syntaxer插件，会呈现如下抵触状况：

①、图片暗箱生效
②、下载暗箱生效
③、布告不能滚动
刚接触建站时，张戈也是一个相对的菜鸟，除了运维啥都不会，呈现这些成绩时，只能舍弃其中一个。。。
随着接触建站工夫的增长，曾经可以编写普通的php和js脚本、会修正绝大局部网站性能了。这次给公司做百科网站时，再一次用到了Crayon Syntaxer这个插件，仍然好像初恋，爱不释手！
秉着再次重逢，绝不撒手的心态，信心要让知更鸟和Crayon Syntaxer插件共存！

一、抵触剖析

纯熟的按下F12，开端debug：

看来是JQuery的成绩，要不就是反复加载JQ抵触了，要不就是没加载胜利，进一步查看源代码：

头部已加载JQ：

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

看来是插件未判别JQ环境，就强行加载招致了抵触！

二、着手处理

网上随意搜了一把，就找到了防止JQ反复加载的办法。将如下代码增加到主题的function.php当中即可：

PHP Code复制内容到剪贴板

//制止加载默许jq库
if ( !is_admin() ) { // 后盾不由止
function my_init_method() {
wp_deregister_script( 'jquery' ); // 勾销原有的 jquery 定义
}
add_action('init', 'my_init_method');
}
wp_deregister_script( 'l10n' );

保留后，立刻试了下成果，发现之前的成绩倒是处理了，然而Crayon Syntaxer的浮动题目出了成绩，不能动了。查看下源代码，发现岂但之前底部加载的JQ没了，而且插件相干的JS也都没了！原来下面的代码是制止一切由wp_footer函数输入的js啊？？

三、根本处理

不过，这算是小成绩了，先把下面的代码屏蔽，而后关上文章源代码，把除反复加载的JQ之外的其余代码全副拷贝一份，而后粘贴到footer.php或header.php的相应地位即可：

PHP Code复制内容到剪贴板

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

全副保留后，代码高亮失常了，布告也动了，尼玛图片暗箱竟然点击后会弹出2次？关了**层，外面还有第二层...

四、彻底处理

辨别看了一下2层弹出图片的ID，发现是不一样的，一种是鸟哥主题的fancybox-img，另一个是colorbox，我有没装置colorbox暗箱插件，哪来的？
最终发现是Crayon Syntaxer插件的crayon.te.min.js带colorbox暗箱性能，招致同时呈现了2次图片弹出！真是朋友聚头。。。
最初，我用了一个简略的办法，就处理了这个成绩：
尼玛，不是弹2次么？那我把其中一个hidden不就行了？？
于是找到由Crayon Syntaxer插件弹出的那个图片的ID，而后对这个ID设置暗藏CSS属性就搞定了！
处理方法：将以下代码增加到下面的高亮代码当中：

CSS Code复制内容到剪贴板

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

或许，将以下代码增加到主题的style.css当中：

CSS Code复制内容到剪贴板

#colorbox {
display:none !important;
}

就能暗藏ID为colorbox的弹出图片，从而变相处理了反复弹出的成绩！
至此，Crayon Syntaxer插件终于和知更鸟主题不和共处了！真是不容易啊....
值得留意的是，JQuery请应用1.7~1.8左右版本，太高版本中可能会短少知更鸟主题局部所需性能。
五、强制症

作为一个中度强制症，张戈花了简直一终日的工夫，将博客200多篇文章的高亮代码，纯手工交换为Crayon Syntaxer高亮模式，我勒个去啊，真是累得一逼！！！

以上就是安达网络工作室关于《Crayon Syntaxer代码高亮插件与fancybox图片暗箱冲突的解决方法》的一些看法。更多内容请查看本栏目更多内容！

打赏