你想建立自己的博客，但你不想用现有的设计来显得俗气。创建你自己的主题可能会让人望而生畏，但是有了一些帮助，你可以很快为你的博客设计出一个独特的设计。这篇文章将帮助你使用WordPress，最流行的（和免费的）博客软件把它放在一起。

当你从头开始创建一个WordPress主题时，可能需要花费大量的工作，因为在你创建网站的外观和感觉之前，你必须把相当多的PHP代码（WordPress使用的编程语言）放在一起。我们将为您提供那些为您预先**的文件，再加上您将需要的CSS框架结构，以使您的WordPress站点看起来像您想要的那样，从而为您省去麻烦。PHP代码基于Ian Stewart的工作，但是已经为WordPress 3.3.1进行了更新。如果您已经准备好开始，以下是您需要的：

• WordPress，已安装并准备就绪。在主题开发期间，我们强烈建议运行一个安装了PHP和WordPress的本地web服务器，这样您就不会在web服务器上测试您所做的任何更改。这也使得开发速度大大加快。完成后，只需在web服务器上安装完成的主题，就可以开始了。如果您想在本地开发，最简单的入门方法是使用自包含的web服务器WAMP（Windows）或MAMP（osx）。它们包含apacheweb服务器和PHP和MySQL，因此您可以快速轻松地下载和安装WordPress。一旦你准备好了你的主题，在一个合适的服务器上安装WordPress通常是很容易的。例如，我们最喜欢的初学者主机Dreamhost的特点是一次点击WordPress安装。
• 我们的空白主题文件。下载并解压缩。
• HTML和CSS的基本知识（您可以在这里获得）。
• 你为你的WordPress网站做的设计（你可以在这里学习如何在Photoshop中做）。
• 可选：如果你不想使用内置在WordPress中的主题编辑器，你应该得到一个编程友好的文本编辑器(下面是我们为Windows和OS X挑选的。）
• 可选：由于您的WordPress站点可能是空的，并且在没有内容的情况下很难创建主题，因此您可以下载示例内容（并导入）以用于开发目的。在您不打算使用内容的本地开发环境中，这可能是一个很大的帮助。您可能不想将其添加到活动站点，因为1）它将可见，2）您希望在完成开发后将其删除。

一旦你拥有了一切，你就可以开始**你的主题了！

了解并安装你的主题文件

当你解压缩下载的lh\u wordpress\u blank\u theme.zip文件时，你会有一个文件夹，里面装满了一堆文件和两个文件夹。下面是他们是什么和他们做什么的快速列表：

• 404.php—负责显示404NotFound错误的页面，用于当用户试图转到WordPress站点上不存在的页面时。
• php-显示归档文章列表，与主页非常相似，但用于归档中的文章。
• php-显示特定作者的所有文章。基本上和档案页是一样的，但是只有一个作者。
• php-显示给定类别中的所有帖子。
• comments.php-当在单个post页面上接受评论时，此文件将用于显示评论表单。
• php-将**页面底部的页脚。您需要编辑此文件并添加要在页脚中显示的内容。
• functi***.php-主题的自定义函数。除非你了解PHP并且知道你在做什么，否则你应该把它放在一边。
• header.php-在WordPress站点的每个页面顶部显示标题。这是生成菜单的代码。
• img-一个文件夹的自定义图像，你正在使用你的主题。如果不使用自定义图像，可以将其保留为空或删除。
• index.php-显示主要博客滚动页。与许多其他页面（如author.php、page.php、search.php等）一样，中包含header.php、sidebar.php和footer.php文件以显示整个站点。
• page.php-显示任何单个页面。这不包括文章，而是您在WordPress管理中创建的单个静态页面。
• php-显示用户通过WordPress站点上的搜索小部件请求的搜索结果。如果找不到结果，它将通知用户它无法显示任何结果。
• php-此文件包含侧边栏小部件的主要和次要区域。您可以通过WordPress管理员向这些区域添加小部件，不需要编辑此文件。
• single.php-显示带有或不带注释的单个帖子。
• css-这是我们将在本指南中编辑的文件，因此它以红色突出显示。这包含了CSS的框架结构，你需要让你的WordPress网站看起来像你想要的样子。你的大部分工作都在这个文件里。
• 样式-包含您可能使用或导入的任何其他CSS文件的文件夹。如果你不使用这个，你可以删除它。
• tags.php-显示给定标记的文章。

这个列表可能看起来有点吓人，但很可能你不需要编辑这些文件中的大部分。我们只是想让你知道每件事都做些什么。至少，您只需要编辑styles.css，或者footer.php（如果您想向页脚添加内容）。既然你知道你的目的，让我们在WordPress中安装这个空白主题。为此，只需执行以下步骤：

1. 登录你的WordPress管理区。你可能知道它在哪里，但如果不知道，默认情况下，在http://yourdomain.com/wp-admin （或者，如果您运行的是WAMP/MAMP，则默认情况下，在http://localhost：8888/wp管理）。
2. 转到左侧菜单上的外观选项卡，然后选择外观->主题。
3. 从菜单顶部（只有两个选项卡），选择安装主题。
4. 单击上载链接。
5. 单击“选择文件…”。。。按钮选择下载的lh\u wordpress\u blank\u theme.zip文件，然后单击“立即安装”。
6. 安装完主题后，单击back to Appearance->Themes并找到它。它应该被称为空白，没有预览图像。当您看到它时，单击激活链接使其成为活动主题。

或者，如果您喜欢通过FTP安装或只是将文件移动到本地计算机上的正确目录，请解压缩lh\u wordpress\u blank\u theme.zip并将其重命名为“blank”（或任何您想要的）。现在在WordPress安装目录中找到wp content文件夹并打开它。你会在里面看到一个名为“themes”的目录。将blank复制到其中，然后按照上面步骤中的最后一步在您的WordPress站点上激活它。

设计你的wordpress主题

随着空白主题的安装，你准备开始让你的WordPress主题看起来很棒。然而，目前它看起来像是一个丑陋的混乱的蓝色，绿色，黑色。如果您没有添加菜单、小部件或任何内容，它甚至可能看起来不太好。如果仍然需要添加内容，请下载示例内容或创建一些自己的内容。即使您安装了示例内容，您仍然需要进入WordPress管理，单击外观部分，编辑菜单和小部件子部分。只需进入Widgets子部分，将一些widget拖入主侧边栏和辅助侧边栏空间，然后在Menus子部分中创建一个菜单。一旦你准备好了所有的（可能是假的）内容，你就会在你的WordPress网站上看到它们。它可能看起来像右边的图像。

现在一切就绪，我们需要开始编辑styles.css文件。您可以在您喜爱的编程友好文本编辑器中打开它，也可以转到WordPress管理部分的外观选项卡，选择编辑器，然后从右侧菜单中选择styles.css（如果默认情况下尚未选中）。不管是哪种方式，现在都应该看到将要使用的框架CSS结构。它不包括您可能想要编辑的每一个样式，而是您需要将大部分样式组合在一起的主要样式(稍后我们将讨论如何发现其他元素以及如何对它们进行样式化，因此，如果您想进一步了解我们提供的模板以外的内容，那么您可以轻松地完成这些工作。）因为每个人的设计都会有一点不同，我们将讨论大多数样式的作用，而不是提供您可以使用的特定代码。你需要把你自己的设计和CSS知识带到桌子上，所以如果你感觉有点不稳定，你可以通过我们的CSS夜校课程来提高你的技能。所以，不用多说，这里有一个styles.css文件的概要。我们涵盖的每一个项目都将展示它现在的样子，以及一旦你添加了一些样式，它会变成什么样子。

全局：常规样式默认值

常规样式默认值已经为您准备好了，即使您不太了解CSS，也应该非常熟悉。在大多数情况下，这些样式只是设置文档的边距（当前为0像素）、页面上使用的默认字体、背景和文本的颜色、链接在各种状态下的外观等等。您可以保留此信息，也可以根据需要进行常规更改。在大多数情况下，WordPress站点的外观不会受到这些样式的太大影响，如果有的话，您所做的更改主要与字体和颜色有关。

页面布局

styles.css文件的页面布局部分只包含两个代码块：一个用于div容器，另一个用于div内容。在这两种情况下，我们的目标都是DIV标签。一个叫做容器的东西包含了页面上几乎所有的东西，而不是页眉或页脚。这意味着您已经将文章、静态页面或博客卷、评论和侧边栏小部件全部打包到这个容器中。默认情况下，我们给它一个4px的边距来**所有这些内容，就在标题的一小部分。你可以调整它，但你喜欢，并添加任**的风格，你想在这里。另一方面，content DIV只包括post、静态页面或blog roll（以及评论，如果它们可见的话）。您在此处添加的任何样式都只会影响该内容。你首先要做的一件事就是把这个DIV放在页面的某个地方。传统上，使用以下CSS代码将其左对齐：

很可能你还想定义它的宽度，任何边距或填充，以及任何你想在你的站点的特定区域有所不同的东西。以下是我的网站的content DIV样式：

如您所见，它的宽度为640px。它也会向左侧浮动，就像我们前面提到的。另外，我在左侧添加了51像素的边距，在右侧添加了18像素的填充。我如何知道哪些数字对应于哪些边？在CSS边距和填充代码中，它是这样的：上、右、下、左。这很容易记住，因为缩写起来，它看起来像TRBL。听上去像是麻烦或是可怕的。不管怎样，这都是一个快速简单的记忆方法。

收割台

页眉是一个有趣的部分，你的页面样式，因为你可以决定如何菜单看起来。如果您决定在主题中添加一些新的东西，那么尽管在header.php文件中可能会有额外的元素，但是菜单仍然是主要的吸引点。菜单项是以列表样式提供的，如果不设置样式，它看起来很像：

• 第一页
• 第二页
• 第三页
• 第四页
• 第五页

这些点不是绿色的，但你基本上会得到一个列表。你不想这样，大概你想让菜单沿着页面顶部运行。我们为您处理了这个问题，并对菜单进行了样式化，使其显示为一条直线的选项，而不是无序的列表。有两个CSS可以实现这一点。第一个属于.menu类的ul（无序列表）元素：

默认情况下，此代码会删除无序列表中的点和任何边距调整。第二个相关代码块如下所示：

这段代码告诉列表以内联方式显示，这意味着它将以一行而不是传统列表的形式显示。此外，每个列表项（li）都被告知向左浮动（这将给我们更多的自由来移动每个项），并且在右侧有8px的填充空间，在左侧有4px的填充空间（这样文本就不会这么挤在一起了）。所有这些都足以为您提供一个基本的菜单，但是我们还希望设置a元素（a href中的a，link标记）的样式，以使菜单中的所有链接看起来像我们想要的那样。为此，我们需要以下CSS：

所有这些代码都将字体大小（30px）、字体颜色设置为绿色（具体为#3eaf00），并删除默认情况下出现在链接下的下划线（文本装饰：无）。悬停状态只指定用户滚动任何菜单链接时显示的稍微深绿色（#5d8a05）。这是非常简单的，基本的CSS，但它允许您使您的菜单看起来不同于您的页面上的其他文本，而不诉诸图像。如果您想更改更多的文本，可以考虑使用不同的字体，或者将所有内容转换为大写或小写文本。如果你需要一些好的网页字体选项，你可以在谷歌网页字体目录中找到数百个。

一旦你做了这些样式的选择，你就差不多完成了菜单和标题的样式设计。当然，你也可以找到其他的风格，但我们将在文章的最后讨论如何定位这些风格。

内容：文章和页面

还记得我们之前定义的div#content样式吗？这篇文章和下面两个内容部分中的几乎所有内容都与该分区中存在的样式有关

.entry title这是与不同页眉相关的样式。在styles.css文件中，您会发现它通常附加到h1s、h2s和h3s。文章标题采用.entry title样式，而不管它们是什么h#标记，因此您可以通过首先指定h#标记，然后向其添加.entry title来分别定义每个标题。您可以在styles.css文件中的几个预定义代码块中看到这一点，例如h1.entry-title和h2.entry-title。静态页面标题的工作方式相同，但是它们的样式是.page title，并且它们通常只使用h1标记和该样式。这意味着您不需要为h1.page-title以外的页面标题定义任何标题样式。设置这些标题的样式就像设置任何其他文本的样式一样，但是您希望它们很大。如果它们像其他文本一样小，它们就不会像它们应该的那样突出。

.alignright和.alignleft这两种样式只是将图像与条目的左侧和右侧对齐（您可能可以猜出哪个是哪个）。您还会注意到，在styles.css文件中，填充应用于图像的三个面，而不是一个面。为什么？没有填充的边就是不在文本旁边的边。这是右对齐图像的右侧和左对齐图像的左侧。这样做是为了使图像不会在环绕它的文本块中尴尬地缩进。当你创建你的WordPress文章和页面并向其中添加图像时，你可以在编辑器中选择图像的对齐方式。这些样式将自动应用于帖子中的任何对齐图像。除非您想增加/减少填充，或者添加其他样式，否则您可以将这两个类放在一边。

.条目内容条目内容样式应用于您在WordPress中创建的博客文章和静态页面的内容。这个类几乎将其样式应用于任何文本、图像或最终出现在您创建的内容正文中的任何内容。在大多数情况下，你在这里不必做太多。您可以设置所需的文本样式，确定标题（h1、h2、h3等）的外观、样式列表，以及基本上您希望在内容部分中具有特定样式的任何其他元素。

.entry实用程序entry实用程序是一个类，用于在每个提供上下文的文章末尾的一个小部分。它将提供诸如文章类别和标签等信息，以及RSS提要。如果你不仅仅是一个读者，而是你的WordPress站点上的一个作家，你也会在这个部分看到一个“编辑”链接。将样式添加到.entry实用程序将决定此节的外观。

.entry meta很容易混淆entry meta和entry utility，但它是不同的。它包含作者姓名、日期和其他元数据。如果您想更改它的外观，例如使文本变小，因为它不是重要的信息，那么您需要编辑这个类。

.navigation是一个用于设置主题底部导航链接样式的类。导航链接是指向较旧和较新帖子的链接。

内容：评论

虽然评论部分看起来很简单，但实际上它是博客中最复杂的部分之一。评论表单本身非常简单，但是当人们回复评论，然后再回复那些回复时，你会得到很多嵌套的评论。还有大量的元数据，以及一个头像，显示在用户的评论旁边。这意味着你有很多元素可以设计。

注释主要有三种：h3、ol、li和img。当然，h3指的是注释头。因为注释是在有序列表中发布的，所以ol（有序列表）和li（列表项）元素是必需的。在大多数情况下，你会想借用一些样式从你的标题菜单，因为你不会真的想要数字旁边的评论。您可能还需要更改列表中每个注释的背景色或添加其他样式。您可以通过设置.comments类的ol和li元素的样式来实现这一点。最后，img元素的样式化很重要，因为注释将包含用户的化身。这个头像可能是空白的或普通的，但它仍然会出现在每个评论。在comments类（.comments img）中设置img标签的样式将使您能够控制这些化身的外观以及它们与注释文本配对时的行为。

.comment与上一个类的名称非常相似，.comment是应用于特定注释的样式。

.children是用于针对评论的回复的类。这些答复被视为评论的子项。对答复的答复也被视为儿童。

回复div是持有评论回复表单的div。如果有人想留下评论，他们需要使用此表单。你需要设计这个DIV的样式，以便使窗体看起来像你想要的那样。在大多数情况下，您只需更改文本，但也可以为表单元素和按钮设置样式，以获得特别独特的外观。

内容：侧栏

设计侧边栏的样式其实很简单，但是如果你想变得非常具体的话，它可能会变得更复杂。WordPress提供了两个小部件区域：div#primary和div#primary。您可以分别以这些div为目标，也可以使用.widget区域类为它们添加样式。此外，您添加到小部件区域的每个小部件都被添加为惊喜-列表项。xoxo类应用于这个列表，可以用来按照您想要的方式分离和设置每个小部件的样式。但是，如果您想变得非常具体，就需要直接针对每个小部件。我们将在下一节讨论如何做到这一点。

其他样式

既然我们已经讨论了将这个空白主题转化为您自己的主题所需的所有基本样式，那么让我们来讨论一下如何将其进一步扩展。WordPress主题包含了大量的元素，所以毫无疑问，你会想要更多的样式。为了在开发过程中容易地发现它们是什么，您所需要的只是正确的工具。

如果你使用的是Chrome，那么这个开发工具就是内置的。只需在开发主题时预览它，并打开开发人员工具。您可以通过进入“视图”菜单并选择“开发人员”->“开发人员工具”来完成。在Firefox（和许多其他浏览器）中，只需下载并安装Firebug，然后单击Firebug扩展即可激活它。不管你用哪种工具，它都会把屏幕分成上下两部分。上半部分包含页面，下半部分包含页面代码。如果将鼠标移到页面上的任何元素上，您将看到它在代码中高亮显示，以便进一步检查。这将很快告诉您该元素的名称，并显示已应用于该元素的任何样式。然后可以使用这些知识为该元素（或应用于该元素的类）添加新样式。继续这样做，直到找到要添加到styles.css文件中的所有样式。当你完成，你就有一个完整的主题！

如果你以前做过一个WordPress主题，并且有其他的技巧让它更简单，请在评论中分享。另外，如果你使用这个过程来**一个WordPress主题，一定要在评论中贴一个截图。主题快乐！