随着国内各界朋友都在以各种方式纪念着本年度第一条如此有震撼力的短句…
当然我也不能闲着, 咱也丧良心一回…-_,-
用了几十分钟写了我的第二个WordPress插件, 希望能给大家的Blog带去一些个性的时髦的气氛.
解压缩下载回来的.zip文件, 将整个文件夹上传至your-wordpress-site/wp-content/plugins/目录下.
登录Wordpress后台, 启用即可.
网页只有在新开浏览器进程后的第一次访问才会弹出来, 想要看的一定要珍惜哟.
从上至下, 由左至右的顺序, 分别是:IE7, IE6, Firefox, ?(我将opera的js支持关掉了, 懒得开.)
从我个人来讲, 写这个插件并不是针对被采访的人. 她也只是被利用的工具而已.
一个小孩儿, 特别是在我国这样性教育贫乏的真空地带, 怎么可能知道”很黄, 很暴力”是什么内容呢?
希望嘻嘻踢危没把这孩子的前途断送了…
自己写的第一个WordPress插件, 希望大家喜欢.
很多人并不是很喜欢WordPress自带的可视编辑器, 包括我.
一般情况下, 我在新安装了一个WordPress都会去用户个人设置中将其禁用.
因为它在某些功能上多少表现的有些”鸡肋”.
比如添加一个Flash, 或者在Blog文章中插入一条FLV视频什么的.
在可视编辑器下就会丢失一些HTML标签.
但是可视编辑器有一个不错的设计, 就是它的右下角是可以拖拽的.
一个很方便的功能, 可以把编辑器拖拽到自己最开心的尺寸.
但是在代码编辑视图下就没有这么好的功能.
编辑框的尺寸需要听从后台设置. 后台定义好是多大, 他就是多大, 改不了的.
这多少让我有些郁闷.
因为尺寸小了, 哪天需要输入很长一篇代码的时候, 上下来回调整滚动条, 我会看晕, 不清楚哪儿是哪儿.
尺寸大了, 又很占篇幅. 也是, 上下翻页很烦.
所以想到了添加这样几个按钮. 来完成我所需要的东西.
最开始是通过修改website/wp-includes/js/quicktags.js, 在输出按钮的函数中加入这些代码.
但是几天前升级WordPres2.3.2的时候发现, 如果以后每次升级都覆盖掉那个.js文件,
就意味着每次我都需要手动修改添加这些代码.
于是乎我就产生了写一个插件的想法.
独立于系统之外, 这样无论怎么升级, 以后都可以不用关心那个文件了.
由于第一次写插件, 可以说是对WordPress的API没有丝毫的了解.
于是借鉴了”CoolPlayer“中的代码. 了解到了如何正确使用add_actions.
最初写代码的时候, 并没用到class.
只不过后来写着写着, 感觉需要限制一下变量的作用范围, 这样才能保证我的变量不同其他插件或者WordPress自身的变量相冲突, 所以才用到的class.
插件挺简单, 毕竟是第一个插件. 知道如何使用add_actions就好.
下载回去后, 请解压缩. 这时会释放出一个叫做”pbModifier”的文件夹.
不要修改文件夹的名字. 使用FTP或者其他你喜欢的方式上传到你空间的插件目录(/blog-site/wp-content/plugins/)下.
默认的点击一次按钮所产生的效果是, 改变5行.
如果想修改这个值, 在WordPress后台中修改这个插件.
将”pbModifier/pbModifier.php”的
改为你想要的幅度.
然后记得保存文件.
本插件, 在IE6, IE7, Firefox, Opera下运行良好. 以下是此插件运行于这四种主流浏览器时的截图.
由于之前我自己对wordpress中的文件有一些修改, 但是忘记了改了什么文件, 什么位置…
所以只能根据trac中的列表, 覆盖了应该更新的16个文件…
顺便也找到了这16个文件中, 我曾经都修改了什么.
现在要开始要做一系列记录了…
升级相当的顺利. 没发生别人说的首页无法浏览或者后台无法自动保存的bug…
当然为了保险起见, 我还是先在本地覆盖. 没发现什么异常, 然后才上传到空间的…
再次感谢wordpress中文团队的汉化包.
我自己做的这个R-big Style主题, 曾经因为这个导航条的下拉式效果的”困难”而直接跳过.
(修改sandbox主题文件functions.php代码中的”title_li=&sort_column=menu_order&echo=0&depth=X“), 最后这个x之前为1, 现在已经被我修改成2了. 因为我要他最深显示到2级菜单. 这样就可以做下拉效果咯…
然后通过CSS样式表的设定, 最终让它成为跟韩国R2Beat官网中, 那个Flash导航条的效果.
注意: 他用的是Flash, 而我用的只是HTML+CSS哟~
目前差一个阴影效果, 不难, 用css滤镜就可以做出来. 不过好像css滤镜并不被Firefox浏览器所支持. 所以也先放下一段时间吧.
思来想去, 还是把阴影滤镜加上吧…
这里给出代码吧, 希望各位能够活学活用.
id=”menu”部分的css代码:
#menu{height:45px;padding-left:30px;padding-top:15px;background:#6D4035;position:relative;z-index:100;}
#menu ul{list-style:none;}
#menu li {float:left;position:relative;margin:auto 10px;}
#menu ul ul {visibility:hidden;position:absolute;left:10px;top:25px;}
#menu ul li:hover ul, #menu ul a:hover ul{visibility:visible;background:#FF6682;border:#6D4035 solid 4px;width:90%;border-top-width:10px;padding-bottom:5px;}
#menu a{white-space:nowrap;display:block;padding:2px 10px;margin:3px;font-size:16px;font-weight:700;text-decoration:none;color:#FFF;}
#menu a:hover{color:#FFADBC;}
#menu ul ul li {clear:both;text-align:left;width:100%;margin:0;padding-left:5px;}
#menu ul ul li:hover {background:url(./images/menu-arrow.gif) no-repeat left center;}
#menu ul ul li a{display:block;font-size:12px;margin:0;margin-right:10px;border:0;padding:2px 5px;border-bottom:1px solid #FE85A8;}
#menu ul ul li a:hover{color:#FFFBC8;}
其中, images/menu-arrow.gif 这个图片是鼠标指向时的动画效果图. 他是一个并不重复播放的GIF动画图片.
这种css样式, 对浏览器的友好程度, 从高到低分别是
IE6的确要被列入淘汰的名单了…