wordpress作为一个欠折腾的货,那么玩转wordpress怎么离得开代码?分享wordpress使用技巧怎么能不在文章中展示代码?很少有人会直接把黑乎乎的代码贴到文章里面,那样简直丑爆了,大部分人采用的方案是安装一个代码高亮插件,对代码进行彩色渲染。
现在的代码高亮插件很多,我也试用过两三个,但都难以解决在可视化与html模式切换过程中的乱码现象,虽然我很喜欢在html模式下写文章,但难免有些时候也会用到可视化模式下的某些功能,比如居中对齐,这个时候如果编辑框中有代码存在的话,往往会乱成一团;所以我开始考虑搞掉代码高亮插件这个问题。
促使我搞掉代码高亮插件的另一个原因,还是追求wordpress的简洁和速度,过多的插件总会拖慢加载速度的,不是吗?
很早以前就瞄上了在线代码高亮这个project,它的名字叫做CodeMirror,一个老外搞得东西,功能丰富庞杂,看过几次使用说明,但没看懂。昨天吃过晚饭开始继续研究这个东西,一边啃英文,一边研究别人的实例,作为代码小菜鸟,仍然感觉压力山大。
大概是到了晚上十一点钟的时候,基本功能已经搞定,接下来又遭遇了代码托管的难题,注册了一个google code host,那个SVN客户端愣是不知道怎么上传代码,各种折腾各种搜索教程,最后也没完全搞明白,但到凌晨一点多的时候,还是把代码磕磕绊绊的传到google code了。
早上起床之后,开始将代码向现在这个fishy主题进行整合,这一个步骤倒是没费太多力气,毕竟以前整合模块到wordpress模板的事情搞过很多次了。然后就没有然后了,具体效果可以从导航栏的代码高亮传送门进去参观。
这个代码高亮功能使用方法很简单,将你需要贴在文章中的代码复制到代码高亮框中,然后点选语言种类,html和xml个人感觉几乎没区别,然后php、css和javascript大家总能区分是什么意思吧?点选语言种类后,预览框中可以显示高亮效果,这个时候只需要把渲染好的代码复制到wordpress后台编辑框中就行了,注意要复制到html模式的编辑框中哟。
另外,受功能的限制,本服务目前不支持ie浏览器,当然代码高亮效果在各浏览器下显示均正常。贴几个范例给大家看看咯。
css代码高亮
#header{ margin:0 auto; width:100%; margin-bottom:5px; background:url(images/logo.jpg) no-repeat; height:80px; }
html代码高亮
<div id="search-from" class="clearfix"> <form name="formsearch" method="get" action="<?php bloginfo('home'); ?>"> <label><input type="text" name="s" id="search-txt" value="" /></label> <input type="submit" id="search-btn" value="搜索" /> </form> </div>
javascript代码高亮
$(function(){ $('.list-table-left').masonry({ itemSelector: '.item' }); });
那些插件大多也是这样的,我用了19+插件
插件拖慢网站加载速度哦,我现在只有四个插件。能砍就砍,能删就删。
@啄木游弋: 你用的都是那个?
@kslr: 百度地图,谷歌地图,无觅,wp clean up。足够满足我的需求了。
@啄木游弋: ©Feed,Akismet,All In One SEO Pack,Analytics360,Baidu Sitemap Generator,失效链接检查器,Configure SMTP
Crayon Syntax Highlighter
Executable PHP widget
Google XML Sitemaps
Hacklog DownloadManager
NIX Gravatar Cache
W3 Total Cache
Watermark RELOADED
Widget Logic
WP-Memory-Usage
wp-Monalisa
WordPress表格
wp auto top
WP RC Reply AJAX
大部分都是一些小功能
哎,你确定这些功能都是必需的?我的主机不是很强劲,插件用多了会影响加载速度和访客体验,所以我的原则是插件能删除就删除。话说你这里面有些插件我都没听说过
我每次都是黑糊糊的直接CTRL+C/+V~搞得版面面目全非
@我們30歲: 下次来咱这里,试试代码高亮。
@啄木游弋: 哈.要是可以,還真想找你幫忙解決.俺折騰不起~
@我們30歲: 近期实在是不方便哈。
……我就是黑乎乎的直接插入的人
@死亡之鹰: 欢迎以后来使用我的代码高亮服务。
曾经使用过代码高亮,写过几篇貌似技术的文章,不过换Typecho后就不准备写代码类的文章了。
是的,老是折腾也怪没意思的。不如安心的写点文章。
@啄木游弋: 你这回复跟给晓伍的回复自相矛盾,呵呵…
@De: 字面上是互相矛盾的,但表达的意思却是想通的。一方面,让我放弃折腾实在是难以割舍,本身就喜欢鼓捣;另一方面,从理性的角度讲,我又不得不放弃一段时间,近来有大事情要做,所以又要安心工作。
@啄木游弋: 咦?我还以为你是北大学生呢。
咦?我表述有问题么?我真是北大的学生,现在是研究生三年级,我所谓的工作其实就是论文工作,我们习惯上这样讲,还有就是面临找工作的压力呀。嘿嘿,这回肯定讲清楚了。
@啄木游弋: 明白,终于明白了。你这专业研究生出来很吃香的啊,怎么会有压力呢?
@De: 帝都是一个压力山大的地方啊,亲。
@啄木游弋: 北大最近很风波~
@死亡之鹰: 邹恒甫事件,风起云涌。
折腾无处不在啊,不过折腾很费时间哟
乐在其中。