使用WordPress创建移动优化网站

“移动网络设计的。”除非你一直躲在灌木丛下，为过去18个月内，你就会知道，它是目前在同行业中最热门的话题之一。几乎每个星期都会亮相，以帮助我们在网站工作以及磨练自己的技能 – 快 – 移动设备上尽可能没有新的技巧。

如果您拥有或已设计为桌面WordPress网站，并正在考虑去移动，这个过程可以是相当艰巨的。你可能知道响应设计和卢克Wroblewski发展，这需要规划的内容和移动设备的设计，然后桌面第二，而不是反过来，可能已经听说过移动第一种方法。

但是，如果你的WordPress网站，这一切是在像素设置桌面主题，然后采用一个负责任的设计思想，有可能你运行的山丘。

它并不一定是这样。

这里有四种方式，使你的WordPress博客或移动友好的网站，从快速和肮脏的复杂，但可能很漂亮。以及介绍这些方法的优点和缺点，我们将包括实际上不这样做你的所有工作，这将有助于插件的信息，我们会提供一些​​代码，您可以使用一个负责任的设计。

插件：快速路，使您的内容移动友好

设计的内容，正日益成为比压缩成一个像素完美的设计内容更常见，因为这里记录碎杂志。

如果您的网站超过设计（说你运行一个博客，是重内容和阅读设计）的有关内容，那么你会不会太在意你的网站看起来像移动设备上的手忙脚乱。你只是希望人们能够阅读它，而无需进行放大，移动视口周围，或普遍把自己弄糊涂了，直到他们决定离开。

如果是这样的话，那么一个简单的插件可能会做的伎俩。下面是一些插件来考虑。

WPTOUCH

WPtouch，在免费和收费版本，带出您现有的主题和显示你的内容，而不是其他，但结果却是用户友好，可靠和易于阅读。

WPtouch被广泛应用于网站上，包括斯蒂芬·弗莱的博客和社会媒体考官。你可以看到下面的插件如何呈现这两个网站。高级版本有选项来修改颜色和风格，包括在屏幕底部的菜单定制，社会媒体稽查。

社会媒体考官桌面设计

社会媒体考官的手机设计，使用WPtouch

WORDPRESS移动包

WordPress移动包有一定的色彩选择，并可以作为一个移动切换，如果你想有一个用于移动设备的完全不同的主题。它还具有移动界面的编辑职位，虽然这已取代由WordPress应用在一定程度上为iOS 和 Android 。

WordPress移动包截图

BUDDYPRESS的移动

如果您的网站运行BuddyPress的，那么你需要一个插件，以确保其功能没有移动设备上的损失。BuddyPress的手机主题选项，你可以编辑样式表，使手机设计自己的。

BuddyPress的移动

手机主题的下一级

如果你想跨越桌面和移动一贯的设计，但你还没有主题，或者你想开发一个，然后一个移动的主题可能是答案。

在过去一年中涌现出越来越多的移动主题。尤其是二十十一，自3.0版本WordPress的默认主题，是许多网站的响应。

20桌面上的十

20移动十一

下面是一些其他主题，包括移动或响应的样式表。

卡林顿

卡林顿主题的家庭可以使用作为母公司主题。您可以编辑CSS和功能，以满足您的需求，它有一个移动版本。

卡林顿在桌面上

卡林顿移动

谐谑曲

谐谑曲是干净的的和极简主义的的，，和将是伟大的到使用作为一个父的主题的。它采用了移动第一反应设计。

谐谑曲桌面上

谐谑曲移动

JIGOSHOP

电子商务网站是棘手的移动友好，但可以帮助Jigoshop。它是一个完整的电子商务插件和主题，一个负责任的布局，可以调整，以满足您的设计。

jigoshop桌面上的

jigoshop移动

一个用于移动设备的不同主题

在日前响应的设计获得了牵引，网站通常有两个版本：台式机和移动。移动版本可能已经 m.子域或有扩展名为 .mobi 有一些网站仍然这样做，主要服务于不同的内容，取决于设备的庞大的新闻网站。

较少的WordPress的管理员选择现在这样做，但如果你想要沿着这条路走下去，然后从同一个数据库的两个版本你的网站服务是可能的，通过使用移动交换机。

这里有两个插件，使这成为可能：

• WordPress移动包
  ，上面已经提到的一个主题，让你的网站移动友好，这个工具也可以用来作为移动切换，检测移动设备和使用您所选择的一个单独的主题。
• WPtap移动探测器，
  针对移动设备，并允许您选择的主题。

使用这些插件使您可以开发一个用于移动设备的完全独立的主题，用自己的布局，导航和内容结构。

或者，最后，设为当前主题的响应

如果你不想扔掉现有的主题，那么最好的方式给移动用户的经验，至少在视觉上类似的桌面版本到你的主题是建立响应。

一个负责任的主题包含媒体查询主题的样式表中定义的CSS，只适用于指定的最大或最小宽度的设备。一个真正具有响应性的主题有液体的布局，适应移动设备和更大的屏幕，在一定程度上已经，但有一些额外的造型，使移动设备的最佳布局。

1。定义媒体查询

要开始，你将需要在样式表中定义的媒体查询。大多数已经在你的样式表的样式适用于台式机和移动，所以你只需要添加CSS是用于移动设备的不同。这将去年底在主题的样式表。

首先确定你正在开发的屏幕宽度。这主要有两个方法：

1. 开始你的目标（通常是手机在纵向）的屏幕宽度最窄;添加这个屏幕宽度所需的CSS，然后添加连续的媒体更广泛的屏幕查询。这被称为移动的第一种方法，它使移动设备的网站上更快的利益，因为只有这些设备所需的CSS加载。
2. 开始用的最广泛的屏幕宽度（通常是台式电脑显示器）和工作，加入CSS，这适用于每个回合的屏幕宽度。虽然这可能放慢装载在移动设备上，它具有在IE 8及以下，不明白媒体查询工作的优势。目前，大多数网站都是这样，因为它们涉及现有的桌面设计响应，所以这是我们将在这里覆盖的方法。

有媒体查询三个主要部分组成：

1. @media规则;
2. 媒体类型（最常见的是 print和 screen-我们将使用 screen）;
3. 你的目标在屏幕的最大宽度。

针对手机在纵向（和其他小型设备，如iPod的触摸），有一个宽320像素，你可以有一个传媒查询：

被应用到该屏幕的宽度和任何比它窄，将括号之间的书面屏幕的CSS。

一个替代的 @media规则将创建一个CSS的链接样式表每个屏幕宽度。但我不这样做，因为它增加了另一种可能减缓下来的网站服务器的请求;和管理所有的风格变得更加困难，如果他们是在多个地方。

下面是常用有针对性的屏幕尺寸为其他媒体查询：

• (max-width: 480px) 工程在纵向或横向模式的移动设备，因为他们是在横向宽480像素，但仍低于这个肖像的最大宽度窄。
• (max-width: 780px) 工程iPad和其他大型片在肖像模式和任何屏幕比他们窄。
• (max-width: 1024px) 工程ipad公司在这两个方向，以及小型桌面浏览器。

可以运行此起彼伏媒体查询，使你做的每一个变化，适用于你查询屏幕尺寸，加上样式表中的任何质疑的宽度进一步下降。在这种情况下，你将首先与更广泛的屏幕。例如：

如果忽略片，你会首先包括这个媒体查询，并在纵向和横向模式（例如，图形或文字的大小所做的任何更改）添加任何手机的CSS。然后，你会遵循这：

2。布局响应

唷！所以，现在我们已经定义了媒体的质疑，我们准备推出一些移动友好的CSS。下面是主要的事情，你将需要为一个标准的WordPress网站上。让我们假设您的网站的标记类似的二十一的主题 (i.e. html → body → header (或者 div#header) → #main → #content → #primary → #secondary → footer (或者 div #footer) 。您可能在下面的例子的需要替换自己的元素和标识。

总宽度的网站，
你需要改变，以便它可以正确显示。第一媒体查询括号之间加入下面的代码：

这将确保网站的身体填充设备的宽度，并删除任何花车。在这一点上，你也可能要更改背景图片，如果有一个（不久）。

现在，你会在你的样式表的底部有以下代码：

特别是在肖像模式，没有房为主要内容的权利的侧边栏。传媒查询有关设备的最大宽度320像素添加以下代码：

如果你的页脚部件领域或其他元素与应用彩车，您将需要重写他们在肖像模式下的移动设备。

如果你想页脚的部件是在风景和肖像模式的全宽，则只需添加 footer.widget-area的CSS侧边栏和内容。

然而，你可能想一边在横向模式奠定了部件领域的一面，取决于你有多少。在这种情况下，你需要做到以下几点：

1. 工作的宽度，padding和margins（你一些盒模型的数学！）的百分比;
2. 相关的代码添加到您的媒体设备查询与最大宽度为480像素;
3. 加入你的工作后，一个上了320像素的最大宽度为单独的查询设备，用下面的代码：
4. footer .widget-area { width: 100%; float: none; margin: 10px 0; }

   1 2 3 4 5

   footer .widget-area { width: 100%; float: none; margin: 10px 0; }

您可能还需要调整文本的对齐方式，边框和填充，根据您现有的主题。保证金应设置为0，左，右;在顶部和底部，它们适合你的主题，但他们一般应小于在桌面版本中。

图像尺寸
设计中的图像仍可能打破布局或摆脱其包含的元素，使您的网站在移动设备上浏览时收缩。这有一个简单的办法：

这将确保图像永远不会比其包含元素的宽。你可能需要调整的CSS，如果图像大小样式表中的进一步上涨有更大的特异性。

然而，这种解决方案并不理想。图像看起来可能较小，但移动设备仍将有充分的大小，这将减慢响应时间，并可能失去游客，以及昂贵的数据计划（其中更是有可能比你想象的）惹恼用户下载。有一个数字，这一解决方案，其中一些，你会发现在此综述响应图像上的文章。您可能还记得前面提到的移动方法，这种方法的好处之一是根据屏幕宽度的设备，它提供不同大小的图像文件。

文字的大小，
所以，我们的布局工作，一切显示很好。但现在，该网站是窄的，文字可能会出现巨大的。我们需要调整文字的大小，用下面的代码：

这作为进一步上涨为它在样式表中的百分比的大小设置字体大小。

4。改变导航菜单，创建一个应用程序的界面

有时候，移动用户将要访问的具体内容，例如，商店的网站的访问者将要来寻找这家店的位置很容易，和1电子商务网站的访问者将要购买最少的点击次数（或水龙头）。有时你可能需要调整，使网站看起来更像一个应用程序的导航。

这里有一些方法可以做到这一点：

• 使用CSS来打开菜单项到下拉菜单的桌面上是可见的，使用类似的代码，你会使用它来创建第二个层次的下拉菜单在桌面上的网站。
• 使用条件的PHP或插件，如Mobble取决于设备，以显示不同的菜单，在网站上看到我为发展百年休息室：百年休息室桌面网站百年休息室移动网站
  
• 
• 使用CSS作为一个垂直的按钮列表中显示的菜单项，给网站一个应用程序的外观，例如，咖啡混合：混合咖啡桌面网站咖啡混合的移动网站
  
• 
• 使用如插件下拉菜单，显示下拉沃克的菜单项，腾出屏幕房地产。
• 使用结合媒体的查询和彩车的背景图像，创建一个网格为您导航的视觉按钮，主页给一个应用程序般的感觉。
• 使用固定定位修复的导航屏幕的底部，减少滚动的需要，早在社会媒体稽查。

可能性是有限的，只有你的想象力和创造力！

5。一个问题！

你添加上述媒体查询，但您的手机仍然显示在桌面上的版本。不用担心！这是因为许多智能手机使用一个虚拟的视口，等于一个小的桌面台式机设计的网站，以防止在浏览器中呈现时打破的宽度。这可以很容易地通过下面的代码放置在 每一页的 head固定 。因为你是一个WordPress网站，你需要添加它只有一次的 header.php主题文件：

这样做是什么告诉电话视为它的实际大小，而不是虚拟大小的屏幕尺寸……如果是有道理的。

总结

下面是我们已经看到在这篇文章中：

• 使移动友好，是一个WordPress网站：插件，与一个预置反应的主题，一个单独的手机主题，四个不同的方式，使现有的主题反应;
• 媒体查询响应的设计，以及他们如何针对不同的设备宽度;
• 一些常见的风格，使反应在其布局，图像和文字，是一个WordPress网站。

正如你可以看到，没有一个选项是不一定是最好的，这将取决于预算和涉及的时间和能力上，在网站上。随着时间的推移，大多数移动友好的WordPress网站将有内置到他们的反应，而不是使用一个单独的主题，移动网站或插件。

希望这篇文章给你一个起点，让你的WordPress网站的移动友好。这仅仅是开始的可能性。为了进一步开发移动网站，你可能要考虑移动内容战略;移动第一设计; ​​API和本地设备的功能，以创建一个更类似应用程序的经验;多。

原文：http://mobile.smashingmagazine.com/2012/05/24/creating-mobile-optimized-websites-using-wordpress