一个程序员的遐想

is a popular WordPress starter theme, one that featured in my previous article ‘‘.

是一个流行的WordPress入门主题，在我之前的文章“ ”中有介绍。

Reverie is mainly based on ZURB’s Foundation framework, with a few added perks. You don’t have to go through the hassle of trying to mesh the Foundation framework with WordPress on your own. This is a great way to get up and running, if you want to dive straight into development.

Reverie主要基于ZURB的Foundation框架，还有一些额外的好处。 您不必费力尝试自行将Foundation框架与WordPress网格化。 如果您想直接从事开发工作，这是启动和运行的好方法。

When you work with an existing theme, even if it’s a framework and you’re going to customize it, it’s important to understand how to go about it, so that you streamline the process. Not taking the time to understand the framework or starter theme you’re using can end up costing you more time than if you just built everything from scratch.

当您使用现有主题时，即使它是框架并且要自定义，也很重要的一点是要了解如何进行操作，从而简化流程。 与仅从头开始构建所有内容相比，不花时间了解所使用的框架或入门主题可能会花费更多时间。

您的第一个重大决定 (Your First Major Decision)

Whenever you customize any base or starter theme, you want to evaluate the need for a child theme. If you’re going to keep the theme updated, you’ll definitely want to go the route of using a child theme. The main reason for this is that when you update the main theme, you are likely to lose all of the changes you’ve made. This can easily be a disaster if you’re building the site for a client.

每当您自定义任何基本主题或入门主题时，都需要评估对子主题的需求。 如果您要保持主题更新，则肯定要使用子主题。 这样做的主要原因是，当您更新主主题时，您可能会丢失所做的所有更改。 如果要为客户构建站点，这很容易成为灾难。

On the other hand, if you don’t want clients updating the theme by themselves and destroying all of your hard work, you can disable updates with a simple code snippet. This will make theme updates unavailable from the backend for that user. Updates to themes and plugins can end up breaking the whole site, so you can disable them by adding the following to the functions.php file.

另一方面，如果您不希望客户自己更新主题并破坏您的所有辛苦工作，则可以使用简单的代码片段禁用更新。 这将使该用户无法从后端获取主题更新。 主题和插件的更新最终可能破坏整个网站，因此您可以通过将以下内容添加到functions.php文件中来禁用它们。

function remove_core_updates() {  global $wp_version;return(object) array('last_checked'=> time(),'version_checked'=> $wp_version,);}add_filter('pre_site_transient_update_core','remove_core_updates');add_filter('pre_site_transient_update_plugins','remove_core_updates');add_filter('pre_site_transient_update_themes','remove_core_updates');

首次安装后 (After Your First Install)

You can see from the screenshot that when you first install the Reverie theme, it comes with the Customize feature, which enables you to preview basic changes from the front end, such as background color, background image, and widgets. A lot of popular themes are customizing this area in detailed ways, down to font colors, font families and much more.

从屏幕快照中可以看到，首次安装Reverie主题时，它具有Customize功能，该功能使您可以从前端预览基本更改，例如背景色，背景图像和小部件。 许多流行的主题都在以详细的方式自定义该区域，包括字体颜色，字体系列等等。

为遐想设置儿童主题 (Setting up a Child Theme for Reverie)

How a child theme works is that the files are kept in a separate folder, so when you update the main theme, the files in the separate folder aren’t touched. This means that all of your hard worked and custom designs aren’t erased every time you update the main theme.

子主题的工作方式是将文件保存在单独的文件夹中，因此在更新主主题时，不会触碰单独文件夹中的文件。 这意味着您每次更新主主题时都不会删除所有辛苦的工作和自定义设计。

Setting up a child theme for Reverie is done the same as any other theme, for the most part. In the themes directory, you need to create a folder that says reverie-child. Inside it, you need to place a style.css file and a functions.php file. This is typical for any child theme. If you want to add your own custom functionality, and you want to add your own custom styles, these files are necessary.

在大多数情况下，为Reverie设置子主题的过程与其他任何主题相同。 在主题目录中，您需要创建一个名为reverie-child的文件夹。 在其中，您需要放置一个style.css文件和一个functions.php文件。 这对于任何儿童主题都是典型的。 如果要添加自己的自定义功能，并且要添加自己的自定义样式，则这些文件是必需的。

In the stylesheet in your child theme, all you need to do is follow the basic setup for a child theme CSS file.

在子主题的样式表中，您需要做的只是遵循子主题CSS文件的基本设置。

/*Theme Name: Reverie Child ThemeDescription: Child theme for Reverie Author: James GeorgeTemplate: reverie*/ @import url("../reverie/style.css"); /* Start child theme customization below *

Now, you’re all set to add your custom functions and styles to your new Reverie child theme.

现在，您已经准备好将自定义功能和样式添加到新的Reverie子主题中。

This is typically what Reverie looks like right after installing it. If we want to customize the look, we’ll need to add custom CSS to the style.css file in our child theme folder.

这通常是Reverie在安装后的外观。 如果要自定义外观，则需要在子主题文件夹中的style.css文件中添加自定义CSS。

The best way to do this is to open up the main-index.php file and the single-page.php file and look at the structure. It’s important to note any special classes you’ll want to pay attention to. For the most part, everything should be pretty straight forward.

最好的方法是打开main-index.php文件和single-page.php文件并查看结构。 请务必注意您要注意的任何特殊课程。 在大多数情况下，一切都应该很简单。

The other method (and my method of choice) is to use the Firebug Inspector for Firefox and the Inspect tool in Chrome. It doesn’t matter which one you choose, they both do close to the same thing. My personal preference is Firefox’s Firebug. I can inspect an element, and it will tell me the div ID and any classes with attributes that are styling a particular element.

另一种方法(也是我选择的方法)是使用Firefox的Firebug检查器和Chrome中的检查工具。 选择哪一个都没关系，它们都接近同一件事。 我个人比较喜欢Firefox的Firebug。 我可以检查一个元素，它会告诉我div ID以及带有样式的特定类的特定元素。

This is also a great way to see how things are built when you hover over an item in the breakdown at the top of Firebug’s window, it will highlight that element. You can see how divs are nested, which can help you narrow down any problems you’re trying to solve.

当您将鼠标悬停在Firebug窗口顶部的明细中的项目上方时，这也是查看事物构建方式的好方法，它将突出显示该元素。 您可以看到div是如何嵌套的，这可以帮助您缩小要解决的问题的范围。

In the image above, you can see the area of code you are looking at is highlighted in a light blue. If there is a purple area, that represents any padding present. Yellow represents any margin values applied. This is a great way to fine tune any spacing issues and diagnose why your design isn’t structure how you want it to be.

在上图中，您看到的代码区域以浅蓝色突出显示。 如果有紫色区域，则表示存在任何填充。 黄色代表所应用的任何边距值。 这是微调所有间距问题并诊断为什么设计没有按照您希望的方式构造的好方法。

In the example above, if I want to style the author name, changing its color, I can hover over it with my mouse, right-click, and select inspect element. Then, in the code below, you can see the div and class name, which is actually a span class of byline author.

在上面的示例中，如果要设置作者姓名的样式，更改其颜色，可以用鼠标悬停在其上，右键单击并选择检查元素。 然后，在下面的代码中，您可以看到div和类名，它实际上是Byline作者的span类。

Since the author name is a link, I can do add an a to the end, selecting the active element:

由于作者名称是一个链接，因此我可以在末尾添加a ，选择活动元素：

.byline.author a{color: #F90;}

This changes the author link to orange. It’s simple, but these are the fundamentals of styling your theme. Also, it’s much easier that staring with a page of PHP, div’s and classes – and trying to sort it all out in your head.

这将作者链接更改为橙色。 很简单，但这是样式主题的基础。 此外，盯着PHP，div和类的页面，并试图将所有内容整理在脑海中要容易得多。

In the next article in the series, we’ll look at adding functionality to the Reverie theme. There’s a lot of flexibility here, and the sky is the limit. Understanding the overall structure of the Reverie theme and how to manipulate its look will help you to understand how to build upon it successfully.

在本系列的下一篇文章中，我们将介绍为Reverie主题添加功能。 这里有很多灵活性，而天空是极限。 了解Reverie主题的整体结构以及如何操纵其外观将有助于您了解如何成功地构建它。

翻译自:

一个程序员的遐想