让jQuery UI draggable兼容移动端并且模拟click点击事件,兼容安卓

用jQyery UI的draggable可以很方便地在PC端实现页面元素的可拖放,不过jQyery UI不是为移动端而写的,因此这个draggable方法在手机上无效。这么普通的问题,当然已经有了现成的解决方法,那就是再加一个jQuery UI Touch Punch插件即可。jQuery UI Touch Punch下载点这里

这样组合后在手机上测试基本完美,不过很快发现在安卓手机上,无论是原生浏览器还是微信内置浏览器上,都无法在draggable的元素上执行click点击事件,其子元素也不行;在iOS上倒是一切正常。经过排查,发现其实并非click事件不能执行,而是安卓上对touch的敏感度实在太大,太容易覆盖掉click事件,其实快速的多点几次click还是有一定概率能执行的。但这样显然不符合项目的要求了,于是我考虑用touchstart-touchmove-touchend来做一些代替click的事。其实就是判断一下手指滑动的距离,距离大的就什么都不变,当做滑动,距离小的就当作click事件去做点击的事。

这种low问题就不多展开了,直接上代码, 查看详细 »

WordPress “Can not use output buffering in output buffering display handles..”报错问题解决

这个问题在最近的一个项目中反复出现,页面显示截图如下:
WordPress ‘Can not use output buffering in output buffering desplay handles..’报错问题解决

由于报错并没有提示是哪个文件哪行代码出问题,所以起初我只能通过一个个关闭插件来排查问题。首先,在这个网站上我用了WP Super Cache插件,关闭它后,报错变得时有时无;同时这个网站上我用了WPML、BuddyPress等大体量的插件,发现关闭其中任何一个,这个报错就不会出现。那么似乎问题就出在这些插件互相间的兼容问题上。然而这几个插件目前来说都是难以被替代的,如果禁用会导致开发成本大大增加,郁闷之余,把项目先放在一边,先陪儿子们玩去了… 查看详细 »

给WordPress / BuddyPress的文章和帖子添加点赞功能

给WordPress文章添加点赞功能,其基本思路就是给每篇文章添加一个自定义字段,用这个自定义字段存储赞数;在客户端用Cookie存储是否已经点赞的变量。给BuddyPress的帖子添加点赞功能,思路也是一样的,但BP的帖子和自定义字段在数据库中并不保存在WP原来的表中,要读取/操作它们就要用BP自己的API。给BuddyPress添加的点赞功能,效果如图:
BuddyPress点赞
查看详细 »

用BuddyPress搭建社区/博客系统,总结一些实用代码

最近两周一直在忙一个基于BuddyPress的项目,从选定BuddyPress,到项目上线,中间踩了不少原本不曾料想的坑,争取尽可能多的总结出来。

首先,和WooCommerce一样,要对BuddyPress进行主题定制,就要先在自己主题根目录下新建一个buddypress.php的模板,所有外围框架样式都可以往这个模板上堆,这里就不扩展了。

其次,如需要对BuddyPress的主题、结构等做更多定制,就要在主题根目录下新建一个buddypress文件夹,把插件目录\plugins\buddypress\bp-templates\bp-legacy\buddypress内的所有文件都复制进来;另外还要把\plugins\buddypress\bp-templates\bp-legacy\css下的buddypress.css复制到主题的css文件夹下;如果你是基于WP自带主题,比如twentyeleven开发的,还需要把twentyeleven.css放到主题的css文件夹下,并且重命名为buddypress-twentyeleven.css。 查看详细 »

WordPress open_basedir 报错问题解决

最近项目很多,就没什么时间更新博客。在碰到同一个问题的时候,时隔一个月居然先后求教搜索引擎两次,比如本文标题的这个问题。其实在第一次解决后,做个笔记,第二次再碰到就可以直接解决,而不用再到处找答案了。所以,还是记录一下这个问题的解决吧。

这个问题是我修改主机上一个网站的域名绑定的时候碰到的。在改了LNMP的vhost配置文件和网站路径、域名解析也完成后,用新的域名访问网站,就出现了这样的open_basedir报错:
open_basedir报错截图 查看详细 »

几款WordPress二维码生成插件深入比较

现在二维码的应用已经很普及了,在我们的每个网站上都可以看见,比如右下角的当前页二维码。一般我们用qrserver.com的在线生成器就能轻松在页面上实现任何文本的二维码,不过有时候qrserver.com服务器响应会变慢,甚至当掉,这样二维码就显示不出来了。而且使用qrserver.com这个资源的人越来越多,服务器压力的增加使得它的可靠性正在变低,是时候找一些替代方案了。于是我尝试了WordPress后台能搜到的几款人气看上去不错的二维码插件,做一下总结。
后台搜索关键词:QR Code

1. QR Code

QR Code
和关键词同名的插件,自然是牌第一了,激活量不错。使用
[qrcode url="http://abc.com" margin="10" size="100" before="QR Code" after="QR Code"]
这样的短代码在任何地方生成二维码。不过这款插件本身就是qrserver.com接口生成二维码的,因此没有任何可靠性的增加,果断放弃。 查看详细 »

LNMP1.2下安装Pureftpd Web管理界面登陆报错502的解决方法

这两天用LNMP1.2安装了一台阿里云主机,照着以前安装LNMP1.1的步骤按部就班的安装下来,大致顺利,但也碰到了个新的问题,装完Pureftpd后,发现无法用web方法登陆了。打开http://[ip]/ftp目录可以访问到登陆界面,但输入正确的密码后页面就停止响应,有时候给出502报错,有时候干脆什么也不显示。最后搜索到解决方法:

在web目录中新建一个.user.ini文件

 vi /home/wwwroot/default/ftp/.user.ini

然后加入一行代码:

open_basedir=/home/wwwroot/default:/tmp/:/proc/:/etc/

保存后,即可正常登陆Web管理界面了。

解决WP-PageNavi插件产生的分页链接无法正确传递Query String的问题

这个问题似乎是最近才爆出来的,一位客户反映某个基于WPML实现的双语的网站上,英语版列表页面的分页不起作用了,点击第二页会跳转到网站首页。检查后发现问题锁定在自定义文章类型的分页上,并且只发生在英语版;网站默认语言中文版则无此问题。这个网站在英语版的URL上加了Query String-“lang=en”,而WP-PageNavi把分页链接变成了这样“http://xxx.com?lang=en/category/greece/page/2”

记得网站刚开发完的时候,当时版本的WPML和WP-PageNavi配合还不错,是没这个问题的,也不知道是其中哪个插件更新后造成了这个兼容问题,已无从追查,看来只能自己动手解决了。我的解决方法比较粗暴,主要是没本事也不愿从插件内部找问题,直接在前端修改这串Query String的位置即可,此JS代码放在调用了wp_pagenavi函数的页面底部,也可以偷懒直接放在footer.php:

1
2
3
4
5
6
7
8
9
$(function(){
	$(".wp-pagenavi a").each(function(){
		tempvelue = $(this).attr("href");
		if( tempvelue.indexOf("?lang=en")>0 ){
			tempvelue = tempvelue.replace("?lang=en","") + "?lang=en";
			$(this).attr("href",tempvelue);
		}
	});
});

这个问题也可能发生在其他带URL带Query String的页面上,修改以上代码都可以解决。所以感觉更可能是WP-PageNavi的问题,希望以后的更新能解决。

如果有哪位高人知道在PHP层的解决方法,还请赐教。

研究一下响应式图片加载属性srcset和sizes

元旦过后又长一岁,然而活到老学到老这个道理是不变的。这几天把手上一部分WordPress网站升级到最新版4.4,就学到新东西了。发现4.4版给所有在文章内容区的图片都加上了两个属性:srcset和sizes。比如:
srcset
这俩个属性的作用是为不同显示尺寸加载不同的图片源,这样就能在图片本身做到“响应式”,而不仅仅是跟随屏幕尺寸了。 查看详细 »

第 1 页,共 9 页12345...最旧 »