解决Crayon Syntax Highlighter代码高亮与fancybox图片暗箱冲突问题
其实,这是一个历史遗留问题,在最开始建站的时候就已经出现了,在知更鸟主题和 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":"u5173u95edu6240u6709u6253u5f00u7684u6807u7b7e","closeTags":"u5173u95edu6807u7b7e","enterURL":"u8f93u5165URL","enterImageURL":"u8f93u5165u56feu50cfURL","enterImageDescription":"u4e3au56feu50cfu8f93u5165u63cfu8ff0","fullscreen":"u5168u5c4f","toggleFullscreen":"u5207u6362u5168u5c4fu6a21u5f0f","textdirection":"u6587u672cu65b9u5411","toggleTextdirection":"u5207u6362u7f16u8f91u5668u6587u672cu4e66u5199u65b9u5411"};
/* ]]> */
</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://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":"u4f7fu7528 %s u590du5236uff0cu4f7fu7528 %s u7c98u8d34u3002","minimize":"u70b9u51fbu5c55u5f00u4ee3u7801"};
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":"u63d2u5165u4ee3u7801u9ad8u4eae","dialog_title_edit":"u7f16u8f91u4ee3u7801u9ad8u4eae","submit_add":"u63d2u5165","submit_edit":"u4fddu5b58","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":"u4f7fu7528 %s u590du5236uff0cu4f7fu7528 %s u7c98u8d34u3002","minimize":"u70b9u51fbu5c55u5f00u4ee3u7801"};
/* ]]> */
</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 左右版本,太高版本中可能会缺少知更鸟主题部分所需功能。
五、强迫症
作为一个中度强迫症,张戈花了几乎一整天的时间,将博客 200 多篇文章的高亮代码,纯手工替换为 Crayon Syntax Highlighter 高亮模式,我勒个去啊,真是累得一逼!!!
- java与ruby的直观比较
- 每天一个Linux命令:chmod
- SparkSql 中外连接查询中的谓词下推规则
- Caliburn.Micro学习笔记(三)----事件聚合IEventAggregator和 Ihandle<T>
- Python进行数据可视化分析快速教程实例
- 一个抓取豆瓣图书的开源爬虫的详细步骤
- Java 8 Stream 教程 (三)
- silverlight ListBox 多列图片效果
- ZooKeeper构建分布式锁(选译)
- Caliburn.Micro学习笔记(二)----Actions
- 每天一个Linux命令:find
- textFile构建RDD的分区及compute计算策略
- 一个基于Flask和MongoDB的CMS内容管理系统
- c++多重继承小结
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- troubleshoot之:使用JFR解决内存泄露
- 一个ABAP和JavaScript这两种编程语言的横向比较
- WebRTC & Android 开发学习环境搭建~
- word模板和XML数据源是如何合并生成最后的word文档的详细过程
- Angular路由跳转时,如何传递信息
- Angular里的购物车页面实现
- CentOS7部署WeADMIN监控主机交换机和URL(无坑版)
- JsonPath实践(一)
- 开源测试服务
- Charles报错Failed to install helper解决方案
- [890]scrapy之pipeline的使用
- Redis的slot迁移工具
- 一文搞懂Flink rocksdb中的数据恢复
- Linux expect用法介绍
- GitHub通过access token来clone代码