构建移动优先的 WordPress 艺术家网站

大家好！欢迎观看使用 WordPress 构建移动优先艺术家网站的完整系列。这与我们上次录制时进行的构建系列略有不同。在本课程中，“最终”网站已构建完成：JeffCampana.com…

在本屏幕录像中，我们看看 Jeff 现有的网站。本系列不像 v10 系列那样专注于“重新设计”，但这里确实存在一个现有的网站，我们将使用来自该网站的一些现有内容。…

在本屏幕录像中，我谈论了 Jeff 首次给我发邮件询问是否希望重新设计网站时我和 Jeff 之间的沟通情况。

Jeff 的总体感觉是“该是时候了”。是时候重新设计网站了。…

从上一个视频中，我们知道在开始设计此网站时，我们需要考虑五个主要要点。在我们前进的过程中，我们会牢记这些要点。

当然，我们从“移动优先”开始，…

我们从打开 Photoshop 文件开始。这个看起来很傻的“拉伸” iPhone 屏幕截图，它只是在移动优先的背景下为我们提供了一个画布。

我们从最简单的开始：Jeff 的名字。我们需要…

我们已经完成了设计的“页眉”，我们只需要确定页面的其余部分。我们有一个要完成的最重要目标列表，因此这将帮助我们指导我们。…

我们希望在进行此项目时进行本地工作。有几个原因

• 速度快。
• 我们可以从任何地方离线工作。
• 我们正在进行完整的重新设计，这将需要很多天，我们不能让网站一直处于活动状态

我们很快就会停止查看旧网站。这是最后一次！现在我们有了合适的本地开发环境，我们的计划是让自己完全重新开始。我们希望剥离…

我们正在将 WordPress 主题剥离到尽可能精简的状态。我们并不担心我们要达成的设计，我们关注的是剥离旧的主题，并为我们提供…

在本屏幕录像中，我们让 CodeKit 开始监视我们的项目。这使得许多开发人员任务变得更加轻松。

我们首先使用它无损优化图像。只需点击一下即可。

然后，我们在…中安装 Compass

我们选择了 Proxima Nova 作为 Jeff 网站的主要字体。它现在非常流行，但它与 Jeff 的作品看起来很棒。简单、简洁的线条，不会强加太多个性。我们 使用 Typekit，以便…

我们决定使用 RoyalSlider 作为首页的滑块。我一直很喜欢 AnythingSlider，因为我参与了它的创建，我认为它非常强大。但是，我认为它是一个…

滑块已实现并可以正常工作，只是它看起来不像我们设计的那样。我们通过删除不需要的 HTML 和 CSS 来完成此过程。我们还查看 RoyalSlider 的设置…

滑块可以正常工作！但它并没有完全按照我们在 Photoshop 文件中设计的那样放置。我们需要在它下方留出更多空间，以显示更多主导航。

在本屏幕录像中，我们深入研究了随之而来的 CSS…

我们有一个针对首页导航的计划，我们只需要在代码中完成它。我说的是首页导航，因为这很可能只在首页使用。这将是一个…

我们已经很好地开始了首页导航，但仍然需要完成一些样式设置。我们首先完成内容本身，添加一些导航链接，总共五个。然后…

我们快完成首页导航了，但滑块下方和导航本身上方有一些奇怪的空间。我们深入研究以找出原因。

对于那些喜欢观看精确解决方案的人来说，这并不适合…

这将是网站上最简单的页脚。它将是一个版权符号，以及 Jeff 的姓名（我认为在页脚中以纯文本形式包含网站名称总是很不错，因为易于…

我们开始着手网站的博客区域。我们希望网站的博客区域位于 /blog/ – 因此，我们最终为此创建了一个名为 page-blog.php 的页面模板，并使用设置…

博客正在输出我们想要的内容，但它的排版和布局还不够。我们根据需要添加了一些标记，为我们提供了更好的语义和仅用于…的元素。

排版仍然不太正确，因此我们花了一些时间对其进行调整。这样做是值得的，因为页眉和正文的排版几乎可以在网站的任何地方使用得很好。…

从首页只能通过一种方式进入网站的博客区域，那就是点击“最新文章”。但这会将你带到最新的博客文章。我们还需要一种方法来…

在几乎所有 WordPress 主题中，都存在一个名为 page.php 的文件。这是控制“页面”的模板 – 所有 WordPress 网站都具有的一种默认内容类型。页面与文章的不同之处在于，它们不会…

首页导航很好地满足了我们的需求，但在网站的每个页面上都拥有如此大量的导航并不实用。对于网站的子页面，我们需要一些更低调的东西。

在本屏幕录像中，我们创建了…

我们只需使用几个插件就可以真正扩展 WordPress 的“CMS”功能：高级自定义字段 和 自定义文章类型 UI。

安装这些插件后，我们可以创建更适合…的新内容类型。

安装了两个工作马 CMS 扩展插件后，我们花了一些时间来设置它们。

Jeff 网站上的“活动”就是一个很好的例子。“活动”应具有标题和描述，因此这些默认字段是可以的，但它…

我们还有一个需要应用适当的自定义字段的帖子类型：首页幻灯片。这是一种可以轻松地硬编码到模板中的东西，但我们会加倍努力…

我们在上一个视频中学到了如何执行自定义循环，并从自定义帖子类型和自定义字段中输出自定义数据。这次我们需要再次执行此操作，只是针对更复杂的活动部分。…

我以为我们可以用上一个视频中讨论的内容来完成活动，但当我完善活动区域时，需要编写足够的代码，我认为值得录制一个总结视频。

在某些…

网站的五个主要区域之一是联系页面。虽然它几乎不需要任何介绍，因为我们只是在 Wufoo 中构建了它，并将它的代码作为页面嵌入并发布。…

当浏览器窗口变大时，首页顶部的滑块变得过大。这是一个移动优先系列，但由于滑块的移动版本已经可以正常工作（也许我们应该加载更小的…

我们正在修复网站，以便在“台式机”（即更大的屏幕）上，网站仍然看起来不错。首页导航是另一个在台式机上变得过大的东西。因此，我们不会这样做，而是将…

当我们在对网站进行台式机化时，我们将首页导航移到了页面的右侧，以便在左侧打开一个空间以容纳更多内容。我们希望仅在…时添加此内容。

我们最终得到了一个非常简单的测试，如果空间足够，它会加载来自博客的文章以显示。

// Load additional content if enough room
enquire
  .register("(min-width: 700px)", {
    match: function() {
      $("#home-article").load("/blog/ #main-article");
    }
  })
  

仅仅因为这是一个移动优先系列并不意味着我们可以忽略台式机/笔记本电脑的交互。我们花了一些时间来确保“可点击”内容（如链接）具有 :hover/:focus/:active 状态。我们使用 Sass 的能力来…

在更大的屏幕上，我们在所有页面上都有更多空间。我们已经在首页解决了这个问题，但我们也可以在其他子页面上做得更好。单个博客文章页面很重要。

默认情况下，…

当我们弄乱为首页滑块赋予 CMS 能力时，我们为每个首页幻灯片提供了一个颜色选择器作为自定义字段。这让我们可以在需要的地方访问该颜色。在模板中，我们将…

WordPress 为 Jeff 的网站评论区提供支持。使用我们的 CSS 超级力量，清理起来将超级容易。我们专门为评论创建一个 .scss 文件（这是使用 Sass 部分的完美示例）。我们包含...

到目前为止，我们主要使用 iOS 模拟器来测试网站的移动版。这很好，比测试狭窄的浏览器窗口要好得多，但也远非全面。

我们使用...

是时候结束这个系列了。这是一段有趣的旅程！

我们所涵盖的内容与 JeffCampana.com 上的实际内容之间存在一些差异。通常情况下，有些东西最终会变得更好...