网站建设

WordPress高亮插件:Crayon Syntax Highlighter加载优化

Crayon Syntax Highlighter是我这种代码控的必装插件。但是,这款插件也有一些小缺憾,比如体积大、拖慢速度、容易产生冲突等。很多博主就是因为这些个原因,才不得不忍痛割爱。 至于冲突问题,上次博客已分享过一次相关教程,感兴趣的可以看看: 解决Crayon Syntax Highlighter代码高亮与fancybox图片暗箱冲突问题 本文主要是分享Crayon Syntax Highlighter插件的CSS和JS加载优化。 优化原理:禁止Crayon Syntax Highlighter插件js和css的全局自动加载机制,只有检测到文章中存在代码时,才会按需加载,这样解决了所有页面均加载js和css拖慢博客速度的问题。 修改方法: ①、禁止自动加载 后台编辑Crayon Syntax Highlighter插件,利用浏览器 Ctrl+F 依次搜索一下关键词,并注释掉: 比如搜索到self::crayon_theme_css();,则直接在这行代码前加上双斜杠//屏蔽即可,如图: 其中self::enqueue_resources();有2处,总共4处,全部注释即可。 ②、按需加载函数 第①步已经禁止插件在前台输出js和css了,下面部署按需加载函数。 将以下代码添加到WordPress主题目录下的functions.php当中即可实现按需加载: 其中, 最后一个css定义了文章高亮代码的样式,默认是classic.css,若在后台选了其他样式,请按实际更改即可! Ps:其实第②步中的css和js代码,就是未禁止插件全局加载之前,在页面源代码中复制而来的,只要注意代码中全部使用双引号即可(因为单引号给php了)。如果你看明白了,又无法确认代码中css的路径,也可以在禁用全局加载之前,先从前台网页源代码中复制一份,留作第②步使用即可。 做好以上操作之后,那么只有在文章中存在需要高亮显示的代码时,才会在文章页面输出上方的CSS和JS,从而解决了这款高亮插件全局加载CSS和JS,影响页面加载速度的问题。 教程完毕,希望对你有所帮助! 最后弱弱的打个广告:如果你是纯粹的代码盲,而又强迫症一般追求博客速度,那么可以购买张戈博客的有偿服务,让张戈来帮你优化WordPress加载速度!
阅读全文
网站建设

原创插件:WordPress读者排行榜插件WP Readers Ranking

貌似在上个月,我就和中国历史、梦轩丽人等几位博友提过,张戈博客分享的《WordPress酷炫CSS3读者墙,排名按年度、本月、本周划分的小方法》,其实可以封装成WordPress插件,方便一些不会部署代码的童鞋。 最近,连续开发了3个WordPress插件,也有了些心得和经验,干脆就把之前的想法也来实现一下! 说干就干,绝不含糊,目前该插件已制作成功,并上传到了WordPress官方插件站,下面简单的介绍下。 一、插件名称 我在制作插件的时候下意识的取名为WP Readers Wall,直到开发完插件之后,我才发现WordPress很早之前就有了一款读者墙的插件,名字是Readers Wall。 没办法,根据实际功能,我将这个插件命名为WP Readers Ranking,译为WordPress读者排行榜,也就懒得去深究中式英语的对与错了。。。 二、插件功能 说到插件功能,不得不提一下,这个排行版的原始出处是折子戏博客,名为CSS3酷炫读者墙代码。在梦轩丽人号召众博客推活跃博客称号时,我突然想到,如果这个读者墙能够按年、月、周来区分不是更能提高评论者的积极性么?因为原版的是按年份来划分的,以至于一些新访客短时间内很难上榜!要是改成本月、或本周那难度就直线下降了, 不管新老访客,人人都有机会上墙! 所以,这个插件的功能就是基于这个想法来开发的,具体功能如下: ①、读者排行榜 这是插件的核心功能,能够按时间段来输出该段时间内评论最多的访客并展示: ②、头像加速 最近,相信大部分博主都知道,全球最流行的Gravatar头像系统被墙了,时不时来一次大姨妈,导致博客评论者头像惨不忍睹!正好,博客联盟群里的博友在使用了这个插件的测试版之后,也反馈部分头像不能显示。 于是,我就给这个插件加了一个头像加速的功能,可选择性开启,更换头像来源服务器,缓解大姨妈的问题: ③、加载模式 最近制作的几个插件都牵扯到了这个加载模式的问题,可能有小部分博主不懂加载模式是干什么的。其实加载模式就是指,你启用插件之后,是需要插件自动来输出这个页面还是你自行部署插件提供的调用代码。 I、当选择自动模式的时候,设置中将自动展示博客已存在的页面及页面ID,你只要将相应的ID填写到【目标页面】一栏即可,当然你还可以自定义这个排行版的输出位置!不过稍微遗憾的是,插件只能定义在文章前面还是后面。 II、当选择手动模式的时候,设置中将出现一段提示话语: 在手动模式当中,插件提供2个自定义部署的方法: 方法①是短代码部署的方法: 后台编辑页面内容,在任意位置插入短代码“”,保存页面即可。 特别说明的是: i、  短代码只能将排行版输出到页面的最前面; ii、 已排除文章类型,所以短代码只对页面生效; iii、不管是手动模式还是自动模式,只要启用插件,短代码就会生效。 方法②是模板函数部署的方法: 编辑主题目录下的自定义页面模板(比如:gueskgook.php),在合适的位置插入:<?php readers_page();?>并保存,比如: Ps:在主题模板中调用函数,可以灵活定义排行版出现的位置,适合熟悉程度较高的WordPress博主。 ④、自定义样式 原本我想将这个排行版弄成响应式的,可惜弄了半天也就是个半成品!只好开放这样一个功能,让博主可以自行调试一下排行版的样式,比如宽度,列数等: 如果不熟悉CSS代码,可以试探性的修改带中文注释的那些属性,并不建议修改其他不熟悉的属性。 如果很熟悉CSS代码,你可以在后台自定义样式设置中重新定义这个排行榜的样式。 三、插件安装 每次写文章都不喜欢写这个安装步骤,因为太简单了,老翻来覆去的炒剩饭也挺恶心的。 安装方法和其他WordPress插件一样,分为2种: ①、在线安装 该插件已上传到了WordPress官方插件站,所以只要在WordPress后台的插件在线安装界面搜索WP Readers Ranking即可找到并在线安装。 ②、ZIP包安装 这种方法适用于SAE等没有权限在线直接写入的WordPress博客,怎么安装就不赘述了! 插件主页:https://wordpress.org/plugins/wp-readers-ranking/ 下载地址:https://downloads.wordpress.org/plugin/wp-readers-ranking.zip 四、插件设置 插件设置在功能介绍的时候已经说过了,就偷懒截个图吧! 当然, 感兴趣的自行安装看看就知道了~如果好用,希望能抽时间到WordPress官方给个五星好评。当然,看洋文就头晕的就算了。 五、东拉西扯 这几天接连制作了4个插件,不得不感叹,看似很简单的几个功能,真正要做成通用的插件,真是伤脑筋!我到现在头还是痛的,当然这个和我水平有限也有很大的关系,毕竟是勉强制作水准。分享完这个插件,在很长一段时间,我都不会再碰插件了,实在是头疼到不行! 本文就分享到这里,如果有朋友觉得这些个插件还不错,可以分享给你周围的博客朋友尝试下,有任何问题欢迎给我留言,张戈在这里,先说声感谢了!
阅读全文
网站建设

WordPress前端html代码压缩优化,附对应知更鸟主题压缩报错的解决方案

今天,逛松果博客的时候,看到了他分享的《wordpress通过代码压缩网页》一文,让我想起了其实张戈博客之前也用过这个功能,当时是在WP迷博客看到的纯代码版本,用了之后发现和知更鸟主题会产生冲突,比如底部滚动条停止滚动、图片暗箱无法弹出等错误。 再次看到这篇文章,我已经将WP玩得比较熟了,想着应该可以搞定这种问题吧?折腾ing... 一、压缩产生乱码 于是,我复制了松果博客的代码,部署后发现前台惨不忍睹: 纳尼?我记得以前用代码版的时候也不会出现这种情况啊!于是到WP迷博客找来代码,和松果博客的对比了下,我去这错误太明显了! 松果博客分享的代码中的关键替换位置如下所示: 而正确的代码应该是: 少了反斜杠之后的n、t、r意义完全不同了!有反斜杠表示换行和tab空格等,如果没有反斜杠那就是单纯的字母了,不乱才怪了! 二、部署功能代码 所以,正确的压缩代码如下所示(强迫症又发作了,代码严格缩进了下): 部署方法:将以上代码粘贴到WordPress主题目录下的functions.php文件的最后一个 ?> 之前即可。 Ps:使用知更鸟主题的博客,需要将以上代码稍微改动一下,否则首页不会被压缩,已亲测! 修改方法: 将上述代码中的最后三行: 修改为: 也就是将 get_header 动作修改为全局init,然后再加上排除WP后台的判断,否则后台写文章就惨不忍睹了...(这样修改后,压缩生效的范围更大,若不出错,建议用修改后的代码!) 三、绕过压缩注释 然后,本文的重点来了: 关于在页面位置加上避免压缩的注释,很多教程都是错的!亲测无效! 网络上很多教程,包括松果博客、WP酷以及WP迷,他们都是这样描述的: 实际上,我测试了半天都不能生效!仔仔细细检查代码中的逻辑判断,终于推敲出正确的注释如下: 只有这样包裹代码,被包裹的代码才不会被压缩,网上分享的大部分方法都是无效的。 顺带再说一个技巧,如果博客使用了Crayon Syntax Highlighter高亮插件,那么启用代码压缩之后,你会发现在文章页面双击代码切换到纯文本模式时,会发现代码全挤在一团了!好吧,全都给压缩了,尴尬中... 解决办法: 将以下代码加入到主题functions.php当中,当检测到文章内容中有代码标签时,文章内容不会被压缩: 四、知更鸟专用 搞定了绕过压缩问题,那压缩代码后知更鸟的各种错误也就好解决了,折腾了半小时,就把所有错误给解决了!下面分享一下,主要给旧版知更鸟主题的博主提供参考。 ①、head部分,需要绕过压缩的是time.php(时间模块)和pirobox.php(图片暗箱)中的js代码: i. 编辑知更鸟主题下的includes中的time.php,参考下图添加注释: ii. 编辑知更鸟主题下的includes中的pirobox.php,参考下图添加注释: ②、侧边栏部分,需要绕过压缩的是侧边栏TAB滑动模块和跟随模块中的js代码 i. 编辑知更鸟主题下的includes目录中的tab.php和tab_h.php,参考下图加注释: ii. 编辑知更鸟主题下的includes目录中的recently.php,参考下图添加注释: ③、当未搜索到内容时的搜索结果页面,底部的js代码需要绕过压缩,否则展开功能无法使用: 解决办法:修改知更鸟主题目录下的search.php文件,如下添加免压缩注释请: 完成以上步骤,知更鸟主题的博客应该可以修复因为html代码压缩带来的错误了!在添加注释的时候,一定注意前后代码是不同的,切记不要颠倒顺序了,否则压缩范围就南辕北辙了哦! 当然,也可能有些知更鸟主题博客,安装了其他插件,压缩代码后会导致更多错误,若遇到这种情况,也不要着急!你只要记住修复这种问题的思路就是:哪个功能失效,就去找对应功能所在的代码,然后添加免压缩注释即可!一般都是JS代码被压缩,产生的报错。 2014/12/9最新补充,经过长期观察,发现js压缩报错无外乎2种情况: ①、js代码的作者偷懒,简写了某些语句。比如js的if结构一般是: 可有些人写js的时候,不知道是自视高超还是偷懒,就写成如下形式: 这种偷懒格式,一旦压缩,就会破坏逻辑判断从而报错!如果压缩报错,并发现这种偷懒模式,只要写全代码即可。 ②、js代码中存在//注释语句,比如:  这种代码,一旦压缩就会变成这样: 由于这个注释是半闭合的,因此压缩后就会伤及无辜,把后面的语句一起给注释了!从而报错!! 解决办法有2种: i. 删除半闭合注释即可; ii. 使用/* */ 全封闭注释 ; 2015/06/17 最新补充:解决压缩功能和代码高亮冲突的问题 用了此压缩功能后,肯定有部分同学发现博客的代码高亮排版都错乱了!因为压缩功能把文章中的高亮代码也给压缩了!我们该如何绕过这个压缩呢?总不能对所有文章都加入免压缩的注释吧?那压缩覆盖面就大大的减小了! 其实,我们可以这样解决:对于存在高亮代码的文章,则自动在文章内容的首尾插入免压缩的注释。 功能实现:将如下代码加入到主题的functions.php当中即可: 本文主要为了修正网络上对WordPress前端HTML代码压缩优化方法中的错误,以及知更鸟主题下的兼容修复方法。我个人也是非常喜欢这个压缩功能,尤其是对知更鸟这种页面内容庞大的主题,更是效果显著!如果你也有强迫症,如果你也喜欢压榨WordPress性能,那么我也推荐你来试试!
阅读全文
网站建设

解决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当中即可: 保存后,立即试了下效果,发现之前的问题倒是解决了,但是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高亮模式,我勒个去啊,真是累得一逼!!!
阅读全文
又是Crayon Syntax Highlighter! 网站建设

又是Crayon Syntax Highlighter!

前言:昨天才发现文章以及分类页面,底部的公告不滚动了,但是在首页却是好的,本以为是我修改了相关代码导致的,等我修改过的还原之后,问题依旧,于是wopus问了下,被告知是插件冲突!在使用排除法后发现是主题与Crayon Syntax Highlighter高亮插件有冲突!而且图片暗箱放大功能也因为这个插件而无法使用,有2次因为这个插件的冲突导致服务器卡死,被空间商停用了数小时!实在忍无可忍,终于将这个插件给开除了!  熟悉我博客的朋友都知道,我的博文脚本代码比较多,所以这个插件的易用性带给我很大的便利,于是我在【底部公告+暗箱放大】 VS 【代码高亮 】中权衡利弊,我觉得前面2个都是华而不实的功能,远远没有Crayon对于玛思阁来得重要。于是我还是打算关闭公告和暗箱效果,保留高亮插件。但是接下来的测试还是让我忍痛割爱。 昨天空间商客服再次联系我,说我的博客产生的CPU负载太高,需要暂停服务器,并让我尽快调试好。于是我又到PHPmMyAdmin中将所有插件全部咔掉,然后告知空间商客服已OK。开启来之后,为了找出产生高负载的原因,我将插件依次启用,并同时测试页面加载速度。这一测还真发现了问题,在插件全部禁用的时候,我网站加载速度平均在0.5s左右,我去,从来都是3s以上,很多时候都是5s左右,全部禁用之后,速度竟然快了近10倍!!?于是我终于理解为什么万戈等博主都提倡插件能不用就不用了! 测试发现,某些插件还真是卡!启用之后平均拖慢了接近1s,有的甚至更严重!比如WP Mail SMTP,启用之后页面加载速度瞬间慢至2S以上,真乃神器啊!现在用多说了,这东西果断干掉【Win主机就是闹腾】!另外发现多说和WP User Avatar貌似也存在冲突,这个头像插件还是最开始的时候安装的,一直也没去鸟它,现在发现拖慢速度,个人猜测可能是与多说{或主题}的头像调用产生了冲突导致的。当测试到Crayon Syntax Highlighter时,发现加载速度直接慢至4s以上!于是我决定将其开除!虽然原因很可能就是和主题有冲突,但是个人技术有限,暂时先放弃解决方法的研究。 这主题本身自带了高亮代码生成工具,试用了下感觉还行,虽然没有那些实用的按钮,而且兼容性可能也就一般,但是优势在于完全不会拖慢速度,深思熟虑之后决定以后就用它了!于是动手将几十篇博文中的代码全部又重新编辑了一遍,真是累趴下!  这下世界终于清静了!
阅读全文
DX-Seo与WP-codebox插件冲突解决方法 网站建设

DX-Seo与WP-codebox插件冲突解决方法

这两天折腾代码高亮插件,折腾得够呛!缘由要不就是导致网站爆卡,要不就是点击复制按钮出问题。 这里说下wp-codebox和DX-Seo插件冲突的现象及解决方法:     现象:如上图所示,wp-codebox高亮的代码右上角的点击复制按钮,点击后会在新窗口弹出res://ieframe.dll/dnserror.htm#javascript:;的错误!虽然代码复制功能依然有效,但是用户体验就非常糟糕了,这是我无法忍受的!于是开始傻瓜式DEBUG。 解决过程:由于俺只是一个运维工程师,并不是开发人员,对于这些网页代码,确实只是浮于皮毛层次。于是只能按照以前做脚本debug的思维来解决问题。 我先将除wp-codebox以外的所有插件都禁用,然后一个一个开启,并测试【点击复制】功能是否继续弹错,于是在启用了DX-Seo插件的时候,错误重现了,于是直接锁定冲突对象! 俺是一个SEO菜鸟,以前也没接触过,所以这个插件暂时还是要继续使用,不能因为一个小冲突就放弃了,于是沉下心分析了下:这错误是因为强行让所有链接从新窗口弹出导致的,对照DX-Seo插件的设置,马上定位到那个【自动nofollow】功能,因为就它是和链接有关系的,于是将这个功能关掉了,冲突立马消失!验证成功! 但是这仍然不是我要的,懂点SEO的站长都知道,这个nofollow设定还是比较重要的,不然给爬虫搞恼了拒绝上门就不好了!于是研究继续深入。。。 我想,既然出错的原因是因为给链接加上了nofollow属性,那我排除掉【点击复制】这个链接不就可以了么??进入dx-seo自动nofollow选项一看,还真有白名单呢!于是将wp-codebox【点击复制】按钮的链接【javascript:;】加入白名单,发现这个问题已得到解决! 再重复一遍解决DX-Seo和wp-codebox冲突导致codebox点击复制功能出错的解决方法: 在DX-Seo的自动nofollow设置白名单中加入  javascript:;  即可解决!具体见下图:     估计遇到这个问题的童鞋不是很多,所以俺怎么搜索都找不到解决办法,现在自己搞定了,也就记录下,希望以后出现了同样问题的童鞋也能通过搜索引擎找到此文,然后参考解决,那我真是莫大之荣幸! 写在最后:通过刚刚的排除法,我猜测上一篇文章提到的Crayon Syntax Highlighter导致服务器卡死,估计也是和DX-Seo有同样冲突的,估计解决方法也差不多,暂时先放一放,有时间再去测试下!
阅读全文