用2个文件和2分钟的时间在WordPress中构建儿童主题-CSDN博客

One the best ways to get a website up and running quickly is to use a WordPress theme that already has the approximate look and feel and tailor it to suit your needs. But, one dangerous practice that many WordPress developers are guilt of is modifying the theme’s files directly. This is a big no-no! Even if it’s a simple theme like one of the stock WordPress versions of TwentyTwelve, child themes give you a powerful, simple way to make all the changes you want without any risk to having your careful design work wiped out by an upgrade-happy client.

使网站快速启动和运行的最佳方法之一是使用已经具有近似外观的WordPress主题，并对其进行调整以适合您的需求。但是，许多WordPress开发人员感到内gui的危险做法是直接修改主题文件。这是一个很大的禁忌！即使这是一个简单的主题(例如TwentyTwelve的现有WordPress版本之一)，子主题也可以为您提供一种强大而简单的方法，使您可以进行所需的所有更改，而不会冒因升级满意的客户而使仔细的设计工作消失的风险。

Beyond the power of child themes, I want to show you my own methodology for quickly creating design changes to a theme. Using a couple of readily available tools, I can make design changes almost as quickly as they’re requested, save the changes in a child theme, and continue doing great, time-efficient design work.

除了子主题的功能外，我还想向您展示自己的方法，以快速创建主题的设计更改。使用几个易于使用的工具，我几乎可以按要求进行设计更改，将更改保存在子主题中，并继续进行出色的省时设计工作。

Some of the tools you will need for this article are FTP, Chrome web browser, and a text editor. That’s it! As I’ll demonstrate, this process allows for fast site changes with no risk of losing your work with a theme upgrade, which is a common issue as more and more sites are using a few standard base themes for development.

本文所需的一些工具是FTP，Chrome Web浏览器和文本编辑器。而已！正如我将演示的那样，此过程允许快速进行站点更改，而不会因主题升级而丢失工作，这是一个常见问题，因为越来越多的站点正在使用一些标准的基本主题进行开发。

什么是儿童主题？ (What’s a Child Theme?)

A child theme has all the characteristics, code, and functions of its parent. So, if you’re working with something like the Skeleton or Responsive theme, two awesome, free base themes, you can get all the benefits of the parent theme while adding your changes without directly modifying the base theme.

子主题具有其父主题的所有特征，代码和功能。因此，如果您正在使用Skeleton或Responsive主题之类的两个很棒的免费基础主题，则可以在不直接修改基础主题的情况下获得父主题的所有好处，同时添加更改。

WordPress makes the child theme the primary source for code, so if you have CSS for a particular class in the parent theme that is modified in the child, the child theme’s CSS supercedes the parent. In short, you get all the good without worrying about an edit or upgrade breaking your theme.

WordPress使子主题成为代码的主要来源，因此，如果在子主题中修改了父主题中特定类CSS，则子主题CSS会取代父主题。简而言之，您将获得所有好处，而不必担心修改或升级会破坏您的主题。

Another huge, but overlooked, benefit of a child theme is that you have a much smaller file that you can reference later. I’ve worked with scores of themes that have 2,000+ lines of code just in their CSS files alone. My child themes typically have under 200 lines, so it’s a lot easier to jump back into the code and find what I’m looking for to make changes.

另一个巨大的，但忽视了，子主题的好处是，你有一个更小的文件，您可以日后参考。仅在CSS文件中，我就处理了数十个主题，这些主题具有2,000多行代码。我的孩子主题通常少于200行，因此，跳回到代码中并查找要更改的内容要容易得多。

步骤1：建立儿童主题 (Step 1: Create a Child Theme)

If you haven’t worked with a child theme before, I understand the apprehension. Thankfully, they take a few seconds to set up — literally. Once in place, you have an easy way to change the site without modifying the theme’s core files.

如果您以前没有使用过儿童主题，那么我会感到不安。值得庆幸的是，他们花了几秒钟来完成设置-实际上。放置到位后，您可以轻松更改站点，而无需修改主题的核心文件。

Create a new CSS file and drop this code into it. I’m assuming you have the TwentyEleven theme, since it comes with almost all the WordPress installations in the last year or two.

创建一个新CSS文件并将此代码放入其中。我假设您具有TwentyEleven主题，因为过去一两年中几乎所有的WordPress安装都附带该主题。

You MUST name this file style.css

您必须将此文件命名为style.css

[sourcecode language=””] /* Theme Name: Twenty Eleven Child Template: twentyeleven */ [/sourcecode]

[sourcecode language =”“] / *主题名称：二十一个十一孩子模板：二十一岁* / [/ sourcecode]

Upload this file into a new folder within your wp-content/themes folder. It doesn’t matter what you name the folder, but good practice is to add a “-child” to the theme name you are creating a child theme for. So, in the above example, I would place my new child theme document into a folder called “twentyeleven-child”.

将此文件上载到wp-content / themes文件夹中的新文件夹中。命名文件夹并不重要，但是好的做法是在要为其创建子主题的主题名称中添加“ -child”。因此，在上面的示例中，我将新的子主题文档放置在名为“ twentyeleven-child”的文件夹中。

The above code doesn’t do anything as of yet. But, you will be able to see it in the Admin->Appearance->Themes section of your WordPress admin site. By selecting the child theme we just created as the theme for your site, you will be using the Twenty Eleven theme as your primary theme.

上面的代码到目前为止还没有执行任何操作。但是，您将能够在WordPress管理站点的“管理”->“外观”->“主题”部分中看到它。通过选择我们刚刚创建的子主题作为您网站的主题，您将使用“二十一”主题作为主要主题。

步骤2：为您的孩子主题添加功能 (Step 2: Adding Functionality to Your Child Theme)

Now, all you have to do is add a functions.php file to your child theme folder and any functions you write will automatically be available to you. This is a powerful way to quickly add a ton of functions to your site if you find yourself regularly creating and recreating the same functionality.

现在，您所要做的就是将一个functions.php文件添加到您的子主题文件夹中，并且您编写的所有函数将自动对您可用。如果您发现自己定期创建和重新创建相同的功能，则这是一种快速向网站添加大量功能的强大方法。

Case in point, I have a few shortcodes I like to use, as well as some forms that I like to be able to quickly add to most of clients’ sites. So I have a standard functions.php file that I automatically put into the child theme folder I create.

举例来说，我有一些我喜欢使用的短代码，以及一些我希望能够快速添加到大多数客户站点中的表格。因此，我有一个标准的functions.php文件，该文件会自动放入创建的子主题文件夹中。

Just add your functions to a functions.php file you can start from scratch with and upload to your child theme folder. That’s it! No includes statements or other code necessary.

只需将您的函数添加到functions.php文件，您可以从头开始并上传到您的子主题文件夹。而已！否包括语句或其他必要的代码。

步骤3：Chrome的检查元素功能 (Step 3: Chrome’s Inspect Element Feature)

Hands down, one of the easiest ways to work with CSS on a live website is through Google Chrome’s “Inspect Element” tool. Whenever you want to identify the CSS that is defining how an element appears on the page, just right-click and select “Inspect Element”:

不言而喻，在实时网站上使用CSS的最简单方法之一就是通过Google Chrome浏览器的“检查元素”工具。每当您要标识定义元素如何在页面上显示CSS时，只需右键单击并选择“检查元素”：

The Development Panel will pop and you can drill down into what class and CSS is being used to define the element.

将弹出“开发面板”，您可以深入了解正在使用什么类和CSS定义元素。

If you want to see the actual CSS document and location within the document for the CSS you’re interested in examining, simply click on the file name in the right panel:

如果要查看实际CSS文档以及要检查CSS在文档中的位置，只需单击右侧面板中的文件名：

This is a powerful way to learn from other sites that have a design element that looks the way you want. Just inspect it using Chrome and look through their CSS. It’s amazing what you can learn and quickly adapt to your site.

这是一种向其他站点学习的强大方法，这些站点的设计元素看起来像您想要的。只需使用Chrome进行检查并查看其CSS。您可以学习并快速适应您的网站，这真是太神奇了。

步骤4：使用Chrome进行实时CSS开发 (Step 4: Real-time CSS Development Using Chrome)

Another powerful tool built right into the Inspect Element feature of Chrome is that you can actually manipulate the CSS live. Just right-click, inspect the element, and make your changes in the right side of the development panel. You can change any CSS on the page and see the results as you change them.

Chrome的Inspect Element功能中内置的另一个强大工具是，您实际上可以实时操作CSS。只需右键单击，检查元素，然后在开发面板的右侧进行更改。您可以更改页面上的任何CSS，并在更改结果时查看结果。

This is a great way to tinker with your designs to see how the CSS will affect the overall look and feel. I use this method when making initial changes to see my results, as well as to make sure that my CSS changes only affect the elements I’m interested in changing. (In the past, I’ve added some CSS code and inadvertently changed something else.)

这是修改设计以查看CSS如何影响整体外观的好方法。进行初始更改时，我会使用此方法来查看结果，并确保我CSS更改仅影响我要更改的元素。 (过去，我添加了一些CSS代码，并且无意中更改了其他内容。)

A final reason why this is so helpful is that you don’t have to change the CSS, upload/save the changes, refresh the page, and then see how your changes affected the site. It’s a fast way to get it right and then you only have to upload/save your CSS changes once.

这样做如此有用的最后一个原因是，您不必更改CSS，上传/保存更改，刷新页面，然后查看更改如何影响网站。这是解决问题的快速方法，然后只需上传/保存CSS更改一次。

步骤5：提交更改 (Step 5: Commit the Changes)

Once you have the CSS the way you want it, simply add your new CSS to the style.css file within your child theme folder. You can edit this directly in the Appearance->Editor menu option in WordPress, or you could use FTP to upload the changes.

有了所需CSS后，只需将新CSS添加到子主题文件夹中的style.css文件中。您可以在WordPress的“外观”->“编辑器”菜单选项中直接进行编辑，也可以使用FTP上传更改。

It’s that easy! Once you have a directory in place, it’s takes just a few minutes to get the child theme up and running and you get to keep the benefits of themes that get regular updates.

就这么简单！建立目录后，只需几分钟便可以启动和运行子主题，并且可以保留定期更新主题的优点。

Rapid development using Chrome’s Inspect Element feature then allows you to use a quick, non-destructive trial-and-error process to test CSS changes in real-time. Then you simply add the code to your approved CSS file and upload/save it.

然后，利用Chrome的Inspect Element功能进行快速开发，即可使用快速，无损的反复试验过程来实时测试CSS更改。然后，您只需将代码添加到批准CSS文件中，然后上传/保存即可。

What other tricks do you use for CSS development in WordPress?

您在WordPress中使用CSS开发其他什么技巧？