• 售前

  • 售后

热门帖子
入门百科

Crayon Syntax Highlighter代码高亮插件与fancybox图片暗箱冲突的解决方法

[复制链接]
无人岛屿颈 显示全部楼层 发表于 2021-8-15 19:55:48 |阅读模式 打印 上一主题 下一主题
其实,这是一个汗青遗留题目,在最开始建站的时间就已经出现了,在知更鸟主题和Crayon Syntax Highlighter这个插件之间,我最终选择了前者。
在知更鸟主题环境下启用Crayon Syntax Highlighter插件,会出现如下冲突情况:

①、图片暗箱失效
②、下载暗箱失效
③、公告不能滚动
刚打仗建站时,张戈也是一个绝对的菜鸟,除了运维啥都不会,出现这些题目时,只能舍弃其中一个。。。
随着打仗建站时间的增长,已经可以或许编写一样平常的php和js脚本、会修改绝大部门网站功能了。这次给公司做百科网站时,再一次用到了Crayon Syntax Highlighter这个插件,依然如同初恋,爱不释手!
秉着再次相逢,绝不放手的心态,刻意要让知更鸟和Crayon Syntax Highlighter插件共存!

一、冲突分析

熟练的按下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 Syntax Highlighter的浮动标题出了题目,不能动了。检察下源代码,发现不但之前底部加载的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 Syntax Highlighter插件的crayon.te.min.js带colorbox暗箱功能,导致同时出现了2次图片弹出!真是冤家聚头。。。
末了,我用了一个简单的方法,就办理了这个题目:
尼玛,不是弹2次么?那我把其中一个hidden不就行了??
于是找到由Crayon Syntax Highlighter插件弹出的谁人图片的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 Syntax Highlighter插件终于和知更鸟主题和睦共处了!真是不轻易啊....
值得留意的是,JQuery请使用1.7~1.8左右版本,太高版本中大概会缺少知更鸟主题部门所需功能。
五、逼迫症

作为一个中度逼迫症,张戈花了险些一整天的时间,将博客200多篇文章的高亮代码,纯手工替换为Crayon Syntax Highlighter高亮模式,我勒个去啊,真是累得一逼!!!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作