为什么永远不要在现有的父主题中自定义WordPress ?当您使用的主题更新时,您的自定义设置会发生什么变化?
答案是它们丢失了,您根据品牌和消息传递指南和偏好创建网站的辛勤工作也将丢失。
子主题使您能够创建单独的 CSS 样式表(child theme enables you to create a separate CSS stylesheet)并添加在父主题更新时不会丢失或影响的附加功能。
这可以手动完成,也可以通过安装子主题创建者插件来完成。让我们从手动过程开始。
创建新目录(Create a New Directory)
首先(Start)为您的子主题创建一个新目录。您可以使用FTP 客户端(FTP client)或通过 cPanel访问现有的wp-content/themes
要使用 cPanel,请转到您的主机控制面板。选择文件管理器(file manager)并导航到安装WordPress的目录。
这通常位于名为public_html的目录中。找到并打开wp-content文件夹。单击创建新文件夹(create new folder)并为您的子主题输入名称。一定要给它起一个你以后会认出来的名字。一个很好的例子是nameofparenttheme-child。
不要在文件名中包含任何空格以避免错误。
由于内部处理,文件夹名称必须包含父主题的名称(主题“slug”),如下例所示。
创建 CSS 样式表(Create a CSS Stylesheet)
样式表用于WordPress主题有两个原因。
- 样式的位置会影响您网站的外观。
- 主题的主要样式表是 WordPress 查找主题信息的地方。
您可能不想在子主题中添加任何新样式。但是,样式表仍然需要存在以定义诸如主题名称和父主题名称之类的细节。
因此,您需要为您的子主题创建一个新的样式表。因此,下一步是为CSS样式表创建一个文本文件,该文件将定义控制子主题外观的规则。
子主题CSS文件将优先于父主题。
您需要在文本文件中包含以下信息:
- 您的主题名称。
- 父主题目录的名称。
- 有意义的标题和描述。
请务必在样式表中包含文件顶部的以下标题注释。WordPress将读取此信息并知道正在使用子主题。
您要密切注意模板标签。它告诉WordPress您孩子的父主题是什么。请注意,您的父主题所在的文件夹区分大小写。
从技术上讲,您现在可以激活您的子主题。但是,如果您想创建更复杂的子主题,则需要添加自定义PHP函数。
在子主题中创建一个functions.php文件(与您创建的(functions.php)style.css文件在同一目录中)。这是应该添加其他帖子格式等内容的地方。
与您的CSS文件一样,对(CSS)PHP文件的更改或添加将自动与父函数合并或覆盖。
对于使用add_theme_support()添加的帖子格式等内容,它们充当覆盖而不是合并。
使用add_theme_support()时,您需要采取一些额外的步骤来确保子主题覆盖父主题。
这可能会变得复杂,因此请参阅当前WordPress 主题审查小组(WordPress Theme Review Team)负责人 William Patton关于使用 WordPress 帖子格式( post on using WordPress post formats)的帖子。
添加样式和脚本以覆盖父主题功能(Add Styles & Scripts To Override Parent Theme Functionality)
您的下一步是确保您的子主题继承父主题的功能和样式或反映您要使用的新主题。
样式用于更改网站的外观。脚本(Scripts)增强功能。将样式和脚本添加到WordPress网站的方式与文件内容一样重要。
WordPress 的排队功能是如何实现这一点的。
排队是指将样式和脚本添加到WordPress站点的方式,以便它们可以影响用户在访问您的站点时看到的内容。
使用众多插件来实现相同的结果通常会导致兼容性问题和站点损坏。
wp_enqueue不仅通过减少插件开销来提高您网站的性能,而且还增强了用户体验。
如何使用“wp_enqueue”(How To Use ‘wp_enqueue’)
要为您的子主题输出样式,您需要使用一个名为wp_enqueue_style()的函数。
这个函数需要一些信息,但最重要的是文件的名称(或“句柄”)和位置。
在functions.php文件中添加以下代码。
此代码从父目录添加样式表,然后还为我们之前创建的子目录添加样式表。请注意,父样式(parent-style)文本应与父主题的名称相匹配,并在末尾添加-style 。
激活您的孩子主题(Activate Your Child Theme)
如果您在wp-content/themes/yourthemename文件夹内的服务器上为您的子主题创建了文件,那么它将在您的WordPress仪表板中可供您激活。
- 登录您的仪表板。
- 转到Appearance > Themes。
- 应列出您的子主题。
- 选择预览(Preview)以查看站点在新子主题下的外观。
- 对它的外观感到满意后,单击“激活(Activate )”使其上线。
wp-content/themes/yourthemename文件夹中的服务器以外的其他位置创建了子主题,那么您应该压缩新的子主题文件夹。
- 登录到您的 WordPress 仪表板。
- 转到Appearance > Themes。
- 单击添加新的(Add new)。
- 选择上传主题(Upload Theme)。
- 将(Drag)压缩文件拖到出现的新框中,或单击文件选择器并在计算机上浏览到它。
- 上传后,您可以预览它然后激活它。
添加模板文件(Add Template Files)
要覆盖其他模板,您可以将它们从父主题复制到子主题中。任何在子级中与父级中同名的模板文件都充当覆盖。然后根据需要调整模板的内容。
要添加新模板(To add new templates),只需创建一个具有正确名称的新文件并添加您自己的内容即可。上面的部分解释了手动过程。
现在让我们来看看如何使用WordPress插件创建子主题。
使用 WordPress 插件(Use a WordPress Plugin)
登录(Log)到您的WordPress仪表板。单击(Click)Plugins > Add New的。搜索子主题。(child theme.)
您将看到的第一个插件是Child Theme Configurator。这是一个不错的选择,如上面的屏幕截图所示,因为它:
- 与当前版本的 WP 兼容。
- 有很多安装。
- 最近更新了。
单击Install now > Activate。下一步是导航到工具(Tools),然后选择子主题。(child themes.)
(Find)从下拉菜单中查找并选择您的父主题。选择分析(analyze)以确保您的主题可以用作子主题。
以下是有关如何设置(Below)子主题配置器(Child Theme Configurator)的分步教程。如果您决定使用不同的WordPress插件,您也可以轻松找到有关如何设置它的教程。
如您所知,子主题是不同的主题,它们的某些功能依赖于父主题。
当您使用子主题时,WordPress将在父主题之前查找子主题,并遵循子主题的样式和功能(如果存在)。
当父主题更新时,通过创建一个不受更新影响的子主题,可以为自己节省大量时间、麻烦和未来的麻烦。
How To Create a WordPress Child Theme
Why should you never customize WordPress in the existing parent theme? What happens to your customizatіons when the theme you are using is updated?
The answer is they are lost, and your hard work to create your site according to your brand and messaging guidelines and preferences will also be lost.
A child theme enables you to create a separate CSS stylesheet and add additional functionality that will not be lost or affected when the parent theme is updated.
This can be done manually or by installing a child theme creator plugin. Let’s start with the manual process.
Create a New Directory
Start by creating a new directory for your child theme. You can use an FTP client or access your existing wp-content/themes directory via your cPanel.
To use cPanel, go to your hosting control panel. Select file manager and navigate to the directory where WordPress is installed.
This is usually in a directory named public_html. Locate and open the wp-content folder. Click on create new folder and input a name for your child theme. Be sure to give it a name that you will recognize later. A good example is nameofparenttheme-child.
Do not include any spaces in your file name to avoid errors.
Due to internal handling, the folder name must include the name of the parent theme (theme ‘slug’) as shown in the example below.
Create a CSS Stylesheet
Stylesheets are used in WordPress themes for two reasons.
- It is the location of the styles that affect how your site looks.
- A theme’s main stylesheet is where WordPress looks to find information about the theme.
You may not want to add any new styles in the child theme. However, the stylesheet still needs to exist to define specifics such as your theme name and the parent theme name.
Therefore, you need to create a new stylesheet for your child theme. So, your next step is to create a text file for the CSS stylesheet that will define the rules that control the look of your child theme.
The child theme CSS file will then take precedence over the parent theme.
You need to include the following information in your text file:
- Your theme’s name.
- The name of the parent theme directory.
- Title and description that makes sense.
Be sure to include in the stylesheet the following header comment at the top of the file. WordPress will read this information and know that a child theme is being used.
You want to pay close attention to the template tag. It tells WordPress what the parent theme of your child is. Note that the folder where your parent theme is located is case sensitive.
Technically, you can now activate your child theme. However, if you want to create a more complex child theme, you will need to add custom PHP functions.
Create a functions.php file in the child theme (in the same directory as the style.css file you made). This is where things like additional post formats should be added.
As with your CSS file, the changes or additions to your PHP file will automatically be merged with or override the parent’s functions.
For things like post formats that are added with an add_theme_support(), they act as overrides instead of merges.
When using add_theme_support(), you need to take some additional steps to ensure that the child theme overrides the parent.
This can get complicated, so refer to the current WordPress Theme Review Team lead William Patton’s post on using WordPress post formats.
Add Styles & Scripts To Override Parent Theme Functionality
Your next step is to make sure your child theme either inherits the parent theme’s features and styles or reflects the new ones you want to use.
Styles are used to changing the appearance of your website. Scripts enhance functionality. The way styles and scripts are added to your WordPress site is as essential as the contents of the files.
WordPress’ enqueue functionality is how to get this accomplished.
Enqueueing refers to the way styles and scripts are added to WordPress sites so that they can affect what users see when they visit your site.
Using numerous plugins to achieve the same result often leads to compatibility issues and broken sites.
Wp_enqueue not only improves your website’s performance by way of reducing plugin overhead, but it also enhances the user experience.
How To Use ‘wp_enqueue’
To output the styles for your child theme, you will need to use a function called wp_enqueue_style().
This function takes a few bits of information, but the most important is the name (or ‘handle’) and the location of the file.
Inside the functions.php file add the following code.
This code adds the stylesheet from the parent directory and then also adds the stylesheet for the child which we created earlier. Note that the parent-style text should match the name of the parent theme with -style added to the end.
Activate Your Child Theme
If you created the files for your child theme on the server inside the wp-content/themes/yourthemename folder, it would then be available in your WordPress dashboard for you to activate.
- Log into your dashboard.
- Go to Appearance > Themes.
- Your child theme should be listed.
- Select Preview to see how the site looks with the new child theme.
- Once you are satisfied with how it looks, click Activate to make it go live.
If you created your child theme somewhere other than on the server in the wp-content/themes/yourthemename folder, then you should zip your new child theme folder.
- Log into your WordPress dashboard.
- Go to Appearance > Themes.
- Click Add new.
- Choose Upload Theme.
- Drag your zipped file to the new box that appears or click the file selector and browse to it on your computer.
- Once it has been uploaded, then you can preview it and then activate it.
Add Template Files
To override other templates, you can copy them from the parent theme into the child theme. Any template files that have the same name in the child as in the parent act as overrides. Then adjust the contents of the templates as needed.
To add new templates, it’s just a case of making a new file with the correct name and adding your own content. The above section explains the manual process.
Now let’s go over how to create child themes with a WordPress plugin.
Use a WordPress Plugin
Log into your WordPress dashboard. Click on Plugins > Add New. Search for child theme.
The first plugin you will see is the Child Theme Configurator. This is a good choice, as seen in the screenshot above, because it:
- Is compatible with the current version of WP.
- Has a lot of installations.
- Was recently updated.
Click on Install now > Activate. The next step is to navigate to Tools and then select child themes.
Find and select your parent theme from the drop-down menu. Choose analyze to make sure your theme is ok to use as a child theme.
Below is a step-by-step tutorial on how to set up Child Theme Configurator. If you decide to use a different WordPress plugin, you can easily find a tutorial on how to set it up as well.
As you now know, child themes are distinct themes that rely on their parent theme for some of their functionality.
When you use a child theme, WordPress will look for the child before the parent and follow the styling and functionality of the child if it exists.
Save yourself a lot of time, trouble, and future headaches when the parent theme updates by creating a child that will not be affected by the update.