4改进WordPress主题的移动版本的方法

文章撰写者:
  • WordPress
  • 更新:Jul 29,2013

手机版WordPress

让我们面对现实,移动设备越来越受欢迎。 桌面浏览不再增长,实际上正在减少,而移动设备正在快速增长,所有那些非常棒的智能手机和桌面都在那里。

根据Net MarketShare,移动设备占网络总流量的10%。 这是一个很大的数字,在一些利基和国家甚至更大。 但重要的是移动设备需要特别注意,因为屏幕空间有限以及移动连接通常比桌面连接慢。

很多WordPress主题都有响应,但你知道,我们总是有改进的余地。 因此,我们将在此处看到4技术及其使用方法,以改善用户的移动体验。

#1 Ol'媒体类型

几年前,当IE5.5和IE6被认为是活着的时候,移动浏览器刚刚开始出现(Opera是迄今为止最好的浏览器),人们开始意识到事情刚刚破灭,因为当时的手机不能处理简单的事情,如CSS(更不用说JS,flash等)。

因此,当媒体类型来拯救我们时,做一个完全分离的移动网站是唯一的选择。 这个想法很简单,您可以告诉浏览器您提供的文件是“高级”CSS规则(用于桌面)还是简单的CSS规则(用于手持或打印)。 语法很简单:

<link rel =“stylesheet”href =“handheld.css”type =“text / css”media =“handheld”/>

这可以为您的移动网站创建完全不同的设计。 但你不应该使用它。

媒体类型起初可能听起来不错,但现代智能手机带来了一个简单的问题:缺乏浏览器支持。 那里的大多数主要玩家都忽略了这种功能(比如苹果)
然后媒体查询来拯救我们。

#2媒体查询以及如何真正改善移动体验

这是创建网站移动版本的最流行方式。

您可以根据浏览器大小,设备屏幕大小,像素密度(是的,视网膜!),甚至媒体类型的范围来定位某些点。

这是一个简单的媒体查询:

@media(max-width:700px){body {background:red; }}

这与编程几乎相同。 IF “浏览器宽度为700或更低”, THEN “应用以下CSS代码”。

子主题

让我们在/ themes中创建一个新文件夹,并将其命名为twentyMobile。 我知道,二十二点已经使用了媒体查询,但我们在这里学习,不是吗?

因此,创建一个style.css文件并添加以下内容:

/ *主题名称:手机主题模板:twentytwelve * / @import url(“../ twentytwelve / style.css”); @media掌上电脑,只有屏幕和(最大宽度:767px){nav ul {display:none;} nav select {display:block}}

上面我们创建了子主题CSS,并且我们还添加了一个仅针对移动设备的规则,它将隐藏主菜单并显示选择。 因此,如果您在选择中有菜单,则可以节省大量空间,而不是将其显示为ul / li项目

使用jQuery Mobile进行#3极致改造

jQuery mobile是一个非常棒的框架,它使用jQuery功能来改善移动体验,优化的小部件和UI元素。

使其工作的HTML非常简单,只需使用HTML数据属性和JS来检测和创建UI小部件。

但是为了使jQuery Mobile在你的WordPress博客中正常工作,你需要先调用jQuery移动脚本。 回到我们的子主题,复制主题的header.php文件并在head标签中添加以下行:

<link rel =“stylesheet”href =“http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css”/> <script src =“http://code.jquery.com /mobile/1.3.1/jquery.mobile-1.3.1.min.js“> </ SCRIPT>

我应该提一下,对于商业建议,你应该使用wp_enqueue _script,这样你就可以避免在你的网站中复制库。
现在我们可以使用您想要的任何UI元素。 jQuery mobile有很多可以在主题中使用的UI小部件,但是让我们应用页面和可折叠面板。
这是基本的HTML语法:

<div data-role =“page”> <div data-role =“header”> </ div> <div data-role =“content”> </ div> <div data-role =“footer”> </ div> </ div>

使用此代码,您将创建一个新的“页面”以及页眉,内容和页脚区域。 页眉和页脚是固定的,内容将根据当前页面进行更改,因此您可以加载多个页面,只需通过分配不同的ID来隐藏它们。
这是可折叠面板的基本HTML:

<div data-role =“collapsible-set”> <div data-role =“collapsible-set”data-collapsed =“true”> <p>可折叠区域内容</ p> </ div> </ div>

在那里实现循环非常简单,不是吗? 好吧,你的代码看起来像这样:

<div data-role =“collapsible-set”> <? while(have_posts()){...?> <div data-role =“collapsible”data-collapsed =“true”> </ div> <? ...}?> </ div>

修改了选择菜单

使用我们上面看到的代码(在媒体查询部分),您可以隐藏常用菜单并显示特殊的选择菜单。 jQuery允许你在没有太多PHP代码的情况下添加它(说实话,我们根本不需要PHP)。 让我们创建一个新文件并在其中添加以下代码:

jQuery(function($){//当DOM准备就绪时$(document).ready(function(){//让我们创建select元素$(“<select />").appendTo("nav”); / /使用新选项,转到... $(“<option />”,{“value”:“”,“text”:“转到...”})。appendTo(“nav select”);}); / /现在我们有选择创建的let填充它:$(“nav .menu a”)。each(function(){//你在菜单中找到的每个LINK var aux = $(this); $(“<option />“,{”value“:aux.attr(”href“),”html“:aux.text();})。appendTo(”nav select“); //将新项目附加到select)} ; //然后我们将下拉功能设置为在我们选择新项目时重定向$(“nav select”)。change(function(){window.location = $(this).find(“option:selected”)。val ();});});

这样做会创建一个新的移动菜单,但问题是,即使在网站的“正常”版本中,我们也在加载jquery mobile。 这就是为什么我们也可以使用一些插件来帮助我们改进我们的网站。

#4 - 使用Mobile Detector解决所有问题

这个很棒的插件创建了一个新功能,允许我们根据用户设备有条件地加载主题。 它适用于简单的条件规则,如下所示:

<?php if(MobileDTS :: is('android')){....} elseif(MobileDTS :: is('mobile')){....} else {}?>

MobileDTS方法检查当前设备然后返回一个简单的真/假。 然后我们可以使用一个名为switch_theme()的魔术函数来设置一个新的主题,例如,你可以使用像MobileDTS :: is_switcher_enabled()这样的插件条件来创建一个指向桌面版本的链接。

总结

那么,你有没有在WordPress主题中使用过移动插件或功能? 你更喜欢哪种方法? 不要害羞,分享你的想法!

罗切斯特奥利维拉的文章

我是来自巴西Itajubá(MG)的网页设计师和企业家。 我喜欢写一些关于模糊主题和做一些很酷的东西。