» Theme

前几天google发来邮件说我的博客流量有1%来自于手机,预计未来一段时间会更多.其实我有时也用我的魅族MX上去看的,效果很不好,每次都要缩放才能看清楚字.所以这次就想找个插件来支持手机设备.google一番后发现WPtouch这插件不错,但是不支持翻页,而是Ajax加载后放到页面底部.对于要找多页的情况下,很不友好.所以就修改成了翻页的形式. 最终效果 " 修改方法 在{WordPress 根目录}/wp-content/plugins/wptouch/themes/default/index.php文件里找到下面的代码.大约在125行. " class"ajax-load-more"> " class"spin" style"display:none"> ').fadeIn(200); $wpt('#ajaxentries ').load(' ', {}, function(){ $wpt('#call ').fadeOut();});"> "> 然后将其替换成为下面的代码. 将修改后的index.php上传,用手机看下,已经是翻页模式了,但是footer额内容之间多了一段很难看的空白,使用google的Chrome浏览器查看后发现是CSS的问题.找到问题就好解决了. 修改style.css的#footer样式 在{WordPress 根目录}/wp-content/plugins/wptouch/themes/default/style.css文件里找到#footer样式,类似下面的代码.大约在2085行. #footer { text-align: center; color: #475d79; font-size: 10px; font-weight: bold; text-shadow: #eee 1px 1px 0; margin-top: 60px; line-height: 13px; padding: 0 0 10px; } 然后注释掉margin-top,就像下面的代码那样. #footer { text-align: center; color: #475d79; font-size: 10px; font-weight: bold; text-shadow: #eee 1px 1px 0; /* margin-top: 60px; */ line-height: 13px; padding: 0 0 10px; } 修改style.css的#switch样式 在{WordPress 根目录}/wp-content/plugins/wptouch/themes/default/style.css文件里找到#switch样式,类似下面的代码.大约在2103行. #switch { text-align: left; font-weight: bold; font-size: 14px; margin: 60px 9px 25px; background-color: #fff; border: 1px solid #b1b1b1; padding: 12px 8px; position: relative; height: 17px; border-radius: 8px; -webkit-box-shadow: rgba(255,255,255,.8) 0px 1px 0px; box-shadow: rgba(255,255,255,.8) 0px 1px 0px; color: #333; text-shadow: none; } 然后将margin的top改为0,就像下面的代码那样. #switch { text-align: left; font-weight: bold; font-size: 14px; margin: 0 9px 25px; background-color: #fff; border: 1px solid #b1b1b1; padding: 12px 8px; position: relative; height: 17px; border-radius: 8px; -webkit-box-shadow: rgba(255,255,255,.8) 0px 1px 0px; box-shadow: rgba(255,255,255,.8) 0px 1px 0px; color: #333; text-shadow: none; } 再将修改后的style.css上传了,发现丑陋的空行不见了.现在WPtouch已经完美支持翻页模式浏览更多的文章了.

LiteFeel

修改WPtouch手机主题为翻页形式

使用插件与修改源代码