AWordPress theme更改您的网站的设计。

When building or selecting a theme, you have many options to choose from. For example, your theme can have a one- or two-column layout. It can specify which devices or user actions make content visible. It can have custom排版and design elements. It can display content, including images and videos, anywhere you want.

但是WordPress主题不仅与布局和版式有关。最好的主题看起来很漂亮,并使您的内容更具吸引力。

To ensure you’redesigning for the user experience, you might need to create a child theme. A child theme allows you to modify the appearance of yourWordPress网站无需直接编辑主题文件。

To understand why that’s valuable, it’s important to first understand the relationship between parent and child themes.

使用HubSpot的WordPress网站来发展业务

WordPress中的父主题是什么?

A parent theme is a complete theme. Meaning, it includes the WordPress template files and assets required for the theme to work.

index.php和style.css文件(分别为主模板和样式文件)是唯一必需的模板文件。但是,大多数主题还将包括PHP文件,本地化文件,图形,JavaScript和/或文本文件。

All themes are considered parent themes — except for child themes. Let’s take a closer look at what a child theme is and the benefits it offers WordPress site owners below.

WordPress中的孩子主题是什么?

子主题是继承父主题外观,感觉和功能的子主题。当您对子主题进行修改时,它们将与父主题的文件分开。

Benefits of Creating a Child Theme

首先,最重要的是,创建子主题可以使您可以更新父主题而不会丢失自定义。没有孩子主题,您就必须直接编辑主题文件,任何时候更新主题时,您的自定义都会丢失。结果,您将面临一个不可能的选择:要么不要让主题保持最新状态,这是一个巨大的安全风险,要么丢失了您的自定义和您投资创建它们的时间。

创建和自定义子主题的其他两个好处与第一个相关。将这些修改与主题单独的文件夹保持在单独的文件夹中,从而易于复制或从一个站点移动到另一个站点。

它还使您能够在低风险环境中开始学习并涉足主题开发。如果您开始自定义孩子主题,并且出现问题或不满意,则可以禁用孩子主题。这将恢复父主题和您的网站。

但是,创建子主题并不总是最好的选择。如果您主要添加自定义CSS,那么创建子主题是理想的选择。但是,如果您要对主题功能进行广泛的自定义,那么最好创建父主题,或者选择具有现有子主题的选项,然后可以立即编辑。

现在,我们了解创建和自定义儿童主题的好处和理想用例的好处,让我们浏览以下过程。

如何在WordPress中创建子主题,一步一步

Creating a child theme in WordPress only takes a few steps. Below we’ll cover each one in depth so you can follow along. This demo will use the default WordPress themeTwenty Twenty-Oneas an example.

步骤1:创建一个子主题文件夹。

First, you’ll want to create a folder where you can place all the template files and assets of your child theme. To create this folder, you’ll useFile Manager在您的控制面板中WordPress托管提供商

用户在WordPress托管提供商的CPanel中单击文件管理器

Image Source

一旦你opened File Manager, click the public_html folder. Then click the wp-content folder.

用户在WordPress托管提供商的CPanel中导航到WP-CONTENT文件夹

Image Source

找到标有“主题”的文件夹。然后单击+Folderfrom the toolbar at the top of the screen.

在WordPress托管提供商的CPanel中创建子主题文件夹

Image Source

使用父主题的名称命名此文件夹,然后将“ -Child”添加到最后。因此,如果您要创建一个二十一岁的孩子主题,则将文件夹命名为“二十一个孩子”。

该文件夹将是您孩子主题的目录。

步骤2:为您的孩子主题创建样式表。

Next, you’ll need to create a stylesheet file to contain all of the CSS rules and declarations for your child theme. To do so, create a new text file and name it “style.css.”

您必须在文件的顶部添加所需的标头注释,以使样式表实际工作。此评论包含有关儿童主题的基本信息,包括它是具有特定父主题的儿童主题。

You really only need to include two things: the theme name and template (ie. the parent theme’s name). You can include other information, including a description, author name, version, and tags. These additional details are important if you’re going to publish or sell your child theme.

这是一个二十一个孩子主题的完整标题评论的示例:


/*

Theme Name: Twenty Twenty-One

Theme URI: https://example.com/twenty-twenty-one-child/

描述:二十二十一个孩子主题

作者:安娜·菲茨杰拉德(Anna Fitzgerald)

作者uri:https://example.com

模板:二十一个

版本:1.0.0

许可证:GNU通用公共许可证V2或更高版本

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Tags: two-column, responsive-layout

文本域:二十一位

*/

注意斜线和星号。这些表示此代码将是“commented out” in CSSso WordPress doesn’t try to execute it.

当您准备开始自定义孩子主题时,您可以稍后添加自定义CSS。现在,单击“保存”,以便将此样式表保存在您的子主题目录中。

步骤3:招募父母主题的样式表。

现在是时候招募您的父母和孩子主题的样式表了。这将确保两件事:首先,孩子主题继承了其父主题的样式,因此当您激活孩子主题时,您不仅在查看一堆未风格的文本。

Second, that the child theme’s stylesheet is loaded before the parent theme’s — without overriding it. That way, once you add custom CSS and otherwise modify your child theme, these modifications will augment or replace certain styles and functions of the parent theme.

To do so, create another file in your child theme’s directory. Name it “functions.php” and add the following code:



add_action('wp_enqueue_scripts','enqueue_parent_styles');

函数enqueue_parent_styles(){

wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );

}

?>

步骤4:安装并激活您的孩子主题。

您以安装任何主题相同的方式安装子主题。您有两个选项:您可以使用FTP将文件夹复制到网站,或创建和上传儿童主题文件夹的zip文件。

To upload the file, go to your WordPress dashboard and click on外貌>主题>上传。然后,选择您的孩子主题的目录

在WordPress仪表板上上传主题按钮

Once it’s uploaded, clickActivate

好消息:您raybetapp的孩子主题现在已经存在了!唯一的问题是它看起来完全像您的父母主题。是时候自定义了。

第五步:定制你的孩子的主题。

To customize your child theme, you’ll likely start by adding CSS to the style.css file in your child theme’s directory. It’s one of the easiest ways to make changes to your theme. Whether you want to customize the配色方案,填充,排版或父主题的其他基本设计元素,只需在标题评论下方的孩子主题的样式表中添加代码即可。此代码将覆盖您的父主题样式表中的代码。

To modify the functionality of the parent theme, on the other hand, you need to add functions to the functions.php file in your child theme’s directory.

例如,如果你想让作家和其他r users to format their posts in different ways, then you can use the add_theme_support() function. To allow them to format posts as notes, links, a gallery of images, quotes, a single image, or video, then you’d add the following to your functions.php file in your child theme directory:


add_theme_support('post-formats',array('fater'','gallery',quote','quote','image','video'));

You can put as many or as few functions as you want between the opening and closing PHP tags of your file.

完成的!您的孩子主题很好。测试您的网站WordPress登台环境,然后将您的更改推到现场。

WordPress儿童主题不起作用

您的孩子主题不起作用吗?这是一些要检查的东西。

1. Double-check your functions.php file.

Make sure you’ve enqueued your child theme’s stylesheet in your functions.php file. If you haven’t enqueued it, your child theme won’t load. Your site will stay on the parent theme, so it’ll look all right; the problem is that the changes you make to the child theme won’t appear on the front-end. Refer to step 3 above to add the enqueueing code to your PHP file.

2.确保您命名“ style.css”。

Check to make sure that you’ve named your CSS sheet “style.css,” not “stylesheet.css.” Since “style.css” is the WordPress standard naming convention, using that file name will enable your functions.php file to automatically know that that’s your stylesheet. If you name your stylesheet anything else, the functions.php file won’t be able to retrieve it and render it to the end-user.

3. Clear your cache.

尝试清除WordPress缓存- 您的浏览器可能会向您显示网站的较旧版本。或者,在隐身窗口中打开您的网站,以查看您已发布的更改。如果您安装了缓存插件为了提高网站的速度,请在您创作孩子主题时停用它。

4. Add !important to your CSS code.

如果父主题仍在覆盖您的孩子主题的CSS代码,请添加!对您更改的元素很重要。这将强行覆盖父母主题的CSS表上写的任何内容。您会添加!在半分离之前很重要,这样:

p { background-color: gray !important; }

The !important rule can be used forIDS,CSS classes,以及标准的HTML元素,例如段落,表,标题等。

要了解有关此属性的更多信息,请查看如何在CSS中使用!

5.联系您的主题支持或检查主题论坛。

如果您采取了所有这些步骤,并且CSS仍未加载,那么该是时候与主题的支持团队联系或在WordPress.org上查看主题的论坛了。虽然这应该是您的最后手段,但它的好处是为您提供特定于主题的答案。您的WordPress主题的开发人员可能已经使用了自定义代码或为主题文件实现了不同的命名系统。

创建您的WordPress儿童主题

Installing a WordPress theme is a great first step in creating a WordPress website. To customize it, you can use the built-in Gutenberg editor or your theme builder (if it comes with one). But to go even further and customize not only its design but its functionality, you’ll want to create a child theme.

编者注:该帖子最初于2020年10月发表,并已更新以进行全面性。

使用WordPress网站上的HubSpot工具,并在不处理代码的情况下连接两个平台。点击这里了解更多。

使用WordPress网站上的HubSpot工具,并在不处理代码的情况下连接两个平台。点击这里了解更多。

最初发布于2021年4月8日7:00:00 AM,更新于4月8日2021年

Topics:

WordPress主题