我们现在有一个来自 Photoshop 的设计，用于代码片段区域的主页。它比之前更易于浏览，但保留了之前彩虹的风格。现在我们可以开始在我们的 WordPress 模板中构建它。编写所有 HTML、PHP、CSS，以及你懂得！
第一步是将我们之前在静态设计中准备好的自定义页眉移过来。这意味着需要更改一些 HTML 代码以拥有正确的包装元素。这也意味着要确保页眉中的条件逻辑已就位，以便加载特定于此区域的 CSS。这总是让我想起我针对任何给定网站上的 CSS 文件和 JavaScript 文件的 1、2 或 3 规则。CSS-Tricks 是一个“2”网站的完美示例，我们在这里拥有全局样式以及针对网站每个具有相当多独特样式的特殊部分的 CSS。此代码片段布局肯定很独特。
为了获得此页面上我们需要的所有输出，我们再次使用了一堆 wp_list_pages() 调用。我们讨论了这可能存在问题，因为它是一个非常密集的调用，并且我们在过去创建年鉴区域时遇到过此问题。但是，由于我们已经增加了内存使用量并使用了缓存，因此这不是什么大问题。
我们在屏幕录制结束时将我们需要的所有内容输出到页面上，并设置了一个非常基本的网格。现在我们可以继续使其看起来像我们的模型，并最终添加交互。