嗨，我的名字是格雷格·道格拉斯。 我是位于加利福尼亚州洛杉矶的 Premium Interactive 的创意总监。 这是 www.edwinpireh.com 的案例研究。
该项目
Edwin Pireh 总部位于墨尔本，专门设计手工制作的优质奢华真丝领带和围巾。 设计和开发这个网站解决方案的挑战是从客户给我们的灵感中汲取灵感，建立一个高档的、奢华的在线品牌，具有独特和定制的 UX 设计，同时又不影响我们选择的 WooTheme 内置的响应性。 为了捕捉这个优质品牌的精髓，我们认为最适合我们需求的主题是“雅典娜”主题。 我们认为可以自定义主页以反映高档品牌，并且商店页面模板将非常适合实现我们创建独特商店 UX 设计的目标。
当我从预先构建的主题进行开发时，我将整个项目视为一系列加法和减法。 我正在反复工作，从注释掉这种定制不需要的元素到有时编写我自己的代码或搜索过去的 WooTheme 论坛帖子，看看是否有人已经解决了我现在面临的同样挑战。 对于 Edwin Pireh，Athena 定制我面临的大部分挑战都集中在 WooCommerce 组件上，如何首先定制我的商店页面，其次如何准备我的移动特定 .css 以显示该网站以供手机查看。 在本案例研究中，我将特别关注我是如何解决其中一些挑战的。 并在我用于将 Athena 定制为优质丝绸配饰电子商务网站的基于响应式 WooThemes 的网站设计的设计过程和编码技术方面达到顶峰。 我的自定义前后雅典娜的屏幕截图如下所示。
设计阶段/准备开发
我想分享的第一件事是关于我的设计过程。 在设计我的自定义 WooThemes 网站时，我喜欢先从 woocommerce.com 获取模板网站的屏幕截图。 然后将这些屏幕截图打开到 Photoshop 中，并在一个、两个、三个或更多主文件中设计我的项目主页、WooCommerce 和第三页。 为了为 Edwin Pireh 设计我的自定义网站，我使用了 Athena WooTheme 主页和商店页面的屏幕截图； 并继续围绕 WooThemes 团队如何开发 Athena 来设置我的指南。 对我来说，设置指南为我提供了初始结构或松散的地图，以便在我移动指南以创建我独特的自定义主题 UI 时遵循。 从这些指南中，我可以设计出我希望如何定制主题的像素； 这反过来将决定我的网站如何开发/编码。
我发现以这种方式设计有很多好处，但对于这个案例研究，我想分享一个具体的例子，说明这种设计方法如何帮助我为我的主页（100% 宽度的滑块区域）正确缩放。 如下图所示，您将看到我为自定义 Athena 设置的部分指南……
在我在 Photoshop 中的设计中确定我想要的自定义效果是让幻灯片始终以 100% 的宽度显示。 我做的第一件事是在 Google Chrome 中右键单击演示站点并查看源代码。 通过这样做，我能够识别控制滑块宽度的代码。 我发现如果我所做的只是将幻灯片媒体图像的宽度从“自动”更改为“100%”，那么无论浏览器打开多大，它都会自动调整滑块的大小。 因此，使用我在 Photoshop 中设置的指南，我只需在指南中选择幻灯片区域后复制图层合并，然后将复制的区域粘贴到新图像中，然后按比例缩放以创建完美缩放的滑块图像。 这样，当我将图像导入我的网站并更改我的 custom.css 文件中用于幻灯片区域的代码时，“width:auto;” 到“宽度：100%；” 滑块区域将始终按比例缩放以在更大的浏览体验以及移动设备上看起来不错，就像这样……
#featured-slider .slide-media img {
display: block;
margin: 0 auto;
width: 100%;
}
这是一个详细的设计和开发过程，但回报往往是惊人的，正如您在上面看到的，在设计阶段只需额外关注和规划，有时您可以找到一个非常优雅的解决方案，只需要更改一行您的 .css 为您的主题自定义创建一个大的视觉设计更改。
自定义主题商店页面
现在让我们将注意力转向商店模板页面，并讨论我为自定义 Athena 的商店模板而创建的解决方案。
我再次开始制作 Athena 商店页面的屏幕截图并在文件中设置指南。 从这里我能够以这个页面为模板设计我自己的商店页面的外观。
一旦我为我的商店页面缩略图大小确定了确切的比例和间距，这将让我知道我需要为我的缩略图设置什么大小，并为我提供我需要在 custom.css 中更改哪些代码的指南用于控制商店缩略图之间的内容边距和间距的代码。
要更改商店页面缩略图的大小，我只需在仪表板中导航到 WooCommerce/Settings 并单击“目录”选项卡。 从这里我滚动到页面底部并更改了我的目录图像的宽度和高度以反映我需要的大小，在本例中为 230 宽度 x 230 高度。 注意：请务必记住，每次为目录、产品图像或缩略图保存新尺寸时，您都需要运行“Regen. Thumbnails Plugin”来修复更改和保存新尺寸时可能出现的模糊。
一旦我保存了我的新目录图像尺寸，我仍然需要控制我的边距以及翻转自定义，包括颜色和间距。 我添加到 custom.css 的代码如下……
ul.products {
margin-left: 2% !important;
float: left;
}
ul.products .product:hover .product-hover {
background: rgba(158, 108, 13, 0.6);
text-shadow: 0 0.15em 0 rgba(0, 0, 0, 0.8);
width: 229px;
}
ul.products .product:hover .product-hover a {
background-color: #9e6c0d;
padding: 1.327em 1.327em .327em 1.327em;
width: 194px;
}
ul.products .product {
width: 24.5%;
background: #ffffff;
margin-right: 0;
margin-bottom: 0;
}
ul.products .product img {
height: auto;
padding: 0;
display: block;
border: 1px solid #ffffff;
background: white;
margin: 0 auto;
-webkit-border-radius: 0em;
border-radius: 0em;
}
ul.products .product:hover .product-hover .price {
width:50%;
}
ul.products .product .title {
text-shadow: 0 0.15em 0 rgba(0, 0, 0, 0.8);
}
这里是完成的“领带”商店类别页面的链接，向您展示了完成的定制外观示例。
移动特定商店页面 CSS
当然，在当今的网络中，越来越多的用户正在他们的手机上访问他们喜爱的网站。 WooThemes 在与网络趋势保持同步方面非常出色，因为它们不仅提供了非常出色执行的响应式主题，而且还使更改 custom.css 文件变得容易。 每个响应式的 WooThemes 都在 custom.css 文件中预先打包了一行代码，允许您添加仅应用于桌面布局或相反仅应用于您网站的移动查看的样式。 这行 .css 是
@media only screen and (min-width: 768px) {}
或者，如果您愿意，可以将其更改为
@media only screen and (max-width: 768px) {}
在编写 Edwinpireh.com 时，出于我的目的，我选择使用 @media only 屏幕和 (max-width: 768px) {}，这样我就可以首先专注于桌面自定义代码，然后重新利用我的一些桌面特定 .css 来响应到我的@media 中的手机设备仅屏幕特定的.css 秒。 在我的 .css 代码的这个区域中，我能够添加所需的 .css，当用户在移动浏览器中访问我的网站时，它会改变网站的查看方式。
对于 edwinpireh.com 的商店页面，我面临的挑战是更改我在 custom.css 文件中添加的 .css，以便在手机上查看时，领带和围巾目录整齐地出现在两列中，而不是四个为桌面浏览器指定。 下面是在手机上查看完成的移动版商店页面的屏幕截图……
…我为这个站点更改代码的方式实际上与查看我的桌面 .css 更改的源代码非常相似。 我只是在将窗口大小调整到手机大小后查看了源代码，以查看挤压页面对布局的影响。 从这里开始，只需在我的 @media only 屏幕和 custom.css 文件中的 (max-width: 768px) {} 部分进行调整，保存我的更改并在我的移动浏览器中查看结果，直到我能够拨入网站以按我的意图精确显示。
以下是我需要在 @media only 屏幕和 (max-width: 768px) {} .css 中进行的代码更改，它允许我的产品目录及其翻转显示在手机上…
ul.products {
margin-left:0 !important;
}
ul.products .product {
width:50%;
background:transparent;
margin-right:0;
margin-bottom:0;
}
ul.products .product:hover .product-hover .title {
width:125px;
}
ul.products .product .title {
width:125px;
}
ul.products .product:hover .product-hover a {
width:125px;
padding: 1em 0 .327em 1em;
}
ul.products .product:hover .product-hover {
width:140px;
}
我想在这里注意的主要事情是我需要更改宽度或更改为特定于桌面查看而编写的 .css 的边距和填充的位置。 对于 ul.products .product，真正需要的是覆盖“宽度：24.5%；” 使用“width:50%”获得桌面可视体验； 什么时候可以在手机上查看。 从那里开始，只需确保为手机查看设置了翻转、边距和填充，然后我就有了。
把它包起来
为了创建这种独特的 WooCommerce 自定义，我在 Athena 上进行的许多其他详细的外观更改都以与我为商店页面描述的相同方式执行……我从我想要自定义、设置指南、设计的页面的屏幕截图开始我在 Photoshop 中的自定义外观，然后在网站的实时版本上查看源代码，以便定位我需要在我的 custom.css 文件中更改的 .css。
我很高兴为您编写这个简短的案例研究，介绍我使用 WooCommerce 定制响应式 Athena WooTheme 的一些解决方案。 随时在下面发布任何想法或问题，或者如果您想直接与我联系，您可以通过 premiuminteractive.com 与我联系。
访问 edwinpireh.com
