关于 CSS-Tricks 的重新设计

如果您还没有注意到，我在这里做了一些设计大修。我想借此机会回顾一下新设计的某些要点和功能。

为什么？

因为很有趣。因为我是一名设计师，我们永远不会感到满足。因为我认为网站应该至少每年进行一次小的设计更新。

有什么新内容吗？

没有，实际上没有。只是一个新的外观。在后端，我正在慢慢地将一些之前存在于 WordPress 之外的内容迁移到 WordPress 中。比如所有视频页面。它们中的大多数都位于我根据需要逐个构建的静态页面上。我甚至不记得为什么。但现在我为它们创建了一个特殊的 WordPress 页面模板，在那里我将内容插入自定义字段，我认为这将非常有效。这将允许在视频页面本身进行评论，这很好。这还将使未来的设计调整变得容易得多。

与旧设计的关联

我过去多次说过，我更喜欢演变设计而不是革命设计。从本质上讲，是调整和改进而不是从头开始。虽然这种设计感觉非常不同，但我仍然认为它是演变的。底层代码几乎没有发生任何变化。背景纹理虽然更浅，但还是一样的。标签仍然在这里！侧边栏仍然在右侧，并且在完全相同的位置包含完全相同的内容。页脚仍然很大=)

jQuery

我喜欢 jQuery，你喜欢 jQuery，WordPress 也喜欢 jQuery。我在上一个设计中稍微使用过它，但我认为如果要加载库，我最好充分利用它。jQuery 在新设计中执行的操作

• 在主菜单中执行颜色渐变。关于此的教程即将推出。
• 为侧边栏中的选项卡滑块提供动力。
• 在页脚中提取我最近的推文。
• 为页脚中的链接设置动画。

页面标题的更改

旧设计在几乎每个页面的末尾都附加了“ – CSS-Tricks”。我甚至不记得为什么，我认为这要么是早期 SEO 的努力，要么就是作为我开始使用的模板的一部分而引入的。我从来不喜欢它。现在我正在使用一种更智能的技术来正确命名 WordPress 中的页面。主页只是博客的名称。帖子只是帖子的名称。

以下是处理页面标题的巧妙 PHP 代码段（特定于 WordPress）

<title>
	<?php if (is_home()) { echo bloginfo('name');
	} elseif (is_404()) {
	echo '404 Error - Page Not Found';
	} elseif (is_category()) {
	echo 'Category:'; wp_title('');
	} elseif (is_search()) {
	echo 'Search Results';
	} elseif ( is_day() || is_month() || is_year() ) {
	echo 'Archives:'; wp_title('');
	} else {
	echo wp_title('');
	}
	?>
</title>

@font-face

为了向 CSS3 致敬，我在页脚的一些文本中使用了 @font-face。您只能在 Firefox 3.1 beta 和最新版本的 Safari 中看到它（在撰写本文时）。我使用的是 Jos Buivenga 提供的免费且非常棒的 Fontin 字体。

如果您有兴趣使用 @font-face，想了解更多信息，并想知道如何在 IE 中使其工作，请查看 Jon Tan 的文章。

编码新主题

我决定在 CSS-Tricks 目前所在的完全相同环境中工作会更容易。因此，我注册了一个 顶级域名 并将其放在同一台服务器上。这样，当它完成并全部完成后，我只需移动几个文件夹和文件即可。所有相对文件路径都将完全相同，如果我从原始站点的子目录中工作，我就无法做到这一点。也许是过度杀伤，也许有更好的方法。不管怎样，它对我来说非常有效。

我遇到的一个问题是，我想将所有帖子和评论从主站点复制到测试站点。我应该能够从主站点导出并在测试站点导入。尝试过，但文件大小为 10MB，对于 WordPress 来说太大（即使经过一些花哨的黑客技巧）而无法导入。我可以移动数据库，但我只是变得懒惰，没有这样做。

所以……当设计接近完成并需要在真实站点上进行一些真实的现场测试时，我找到一个很棒的 WordPress 插件来完成这项工作。它被称为 主题切换器，它允许您向已登录的用户（以及具有足够高访问级别的用户）显示不同的主题。因此，我能够激活我的新主题并在登录时实际看到它，而其他人仍然看到旧设计。非常有用。

它没有居中

只是一个设计决策。为了使此设计居中，我必须想出某种方法来解决左侧，以便它可以使用与右侧相同的重复图形。这将占用相当一部分水平空间，我认为没有必要。我并不介意它左对齐。

您必须接受的事项

在这一点上，我有很多文章，永远（永远）无法逐一重新审视并进行更改。文章中存在一些一致性，这些一致性决定了网站的某些设计方面。例如

• 所有帖子中的图片最大为 570px。因此，网站的主要内容区域始终需要至少这么宽。
• 所有帖子中的图片都旨在显示在白色背景上。当我第一次开始这个新设计时，我在主要内容区域中添加了一些我喜欢的纹理，但后来我回过头去查看了一些旧帖子，这些帖子包含许多旨在显示在白色背景上的图片，看起来很糟糕。从现在开始，我的主要内容区域始终需要具有白色背景。
• 我的档案中的所有代码片段都用 <pre> 和 <code> 标签包装，并使用一个类名来指示代码类型。所有 HTML 代码都为**未转义**状态。我使用一个插件来允许我这样做，另一个插件来进行突出显示。我还可以接受这个系统，但我现在绝对被困住了。不同的代码突出显示器对如何处理代码有不同的要求，而我的代码片段太多了，无法更改它们。

希望您喜欢！

就是这样！我希望您喜欢它，请随时告诉我（无论如何）。为了后代，这里有一些屏幕截图。

旧版设计

新版设计