解决Crayon Syntax Highlighter代码高亮与fancybox图片暗箱冲突问题

其实,这是一个历史遗留问题,在最开始建站的时候就已经出现了,在知更鸟主题和 Crayon Syntax Highlighter 这个插件之间,我最终选择了前者。

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

①、图片暗箱失效

②、下载暗箱失效

③、公告不能滚动

刚接触建站时,张戈也是一个绝对的菜鸟,除了运维啥都不会,出现这些问题时,只能舍弃其中一个。。。

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

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

一、冲突分析

熟练的按下 F12,开始 debug:

解决Crayon Syntax Highlighter代码高亮与fancybox图片暗箱冲突问题

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

头部已加载 JQ:

解决Crayon Syntax Highlighter代码高亮与fancybox图片暗箱冲突问题

 

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

解决Crayon Syntax Highlighter代码高亮与fancybox图片暗箱冲突问题

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

二、着手解决

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

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

三、基本解决

不过,这算是小问题了,先把上面的代码屏蔽,然后打开文章源代码,把除重复加载的 JQ 之外的其他代码全部拷贝一份,然后粘贴到 footer.php 或 header.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.css 当中:

就能隐藏 ID 为 colorbox 的弹出图片,从而变相解决了重复弹出的问题!

至此,Crayon Syntax Highlighter 插件终于和知更鸟主题和睦共处了!真是不容易啊....

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

五、强迫症

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

评论已关闭!