WordPress通过子主题保存主题的个性化修改

子主题允许您更改网站外观的部分细节,但仍保留主题的外观和功能。要了解子主题如何工作,首先要了解父主题和子主题之间的关系。

什么是父主题?

父主题是一个完整的主题,其中包含所有必需的WordPress模板文件和主题的资源。所有主题 – 不包括子主题 – 都被视为父主题。

什么是子主题?

如概述中所示,子主题继承了父主题及其所有功能的外观,但可用于修改主题的任何部分。通过这种方式,自定义修改与父主题的文件保持独立。使用子主题可以升级父主题,而不会影响对站点所做的自定义修改。

子主题:     

  • 使修改变得便携和可复制;     
  • 保持自定义与父主题功能分开;     
  • 允许更新父主题,而不会破坏您的修改;     
  • 允许您利用父主题的功能和测试;     
  • 节省开发时间,因为你没有重新创建轮子;
  • 开始学习开发主题的好方法。

如果要进行大量自定义 – 超出样式和一些主题文件 – 创建父主题可能是比子主题更好的选择。创建父主题可以避免将来弃用代码的问题。这需要根据具体情况来决定。

怎么创建一个子主题?

1.创建子主题文件夹

首先,在主题目录中创建一个新文件夹,位于wp-content / themes。

该目录需要一个名称。最佳做法是为子主题提供与父主题相同的名称,在末尾附加-child。例如,如果您正在制作”twentyfifteen”的儿童主题,那么该目录将被命名为“twentyfifteen-child”。

2.创建样式表:style.css

接下来,需要创建一个名为style.css的样式表文件,该文件将包含控制主题外观的所有CSS规则和声明。样式表必须在文件的最顶部包含以下必需的标题注释。这告诉WordPress有关主题的基本信息,包括它是具有特定父级的子主题。

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twentyfifteenchild
*/

注意:Template指的是主题目录的名称,而不是显示的名称

The following information is required:

  • 主题名称 – 您的主题必须是唯一的     
  • 模板 – 父主题目录的名称。我们示例中的父主题是“Twenty Fifteen”主题,因此模板将是“Twenty Fifteen”。您可能正在使用其他主题,因此请进行相应调整。

添加适用的剩余信息。唯一必需的子主题文件是style.css,但functions.php是正确排列样式所必需的(如下)。

3.排列样式表

最后一步是将父级和子级主题样式表进行排列。

过去,常用的方法是使用@import导入父主题样式表;这不再是推荐的做法,因为它增加了样式表加载所需的时间。此外,父样式表可能被加载两次。

目前将父主题样式表排入队列的推荐方法是添加wp_enqueue_scripts操作,并在子主题的functions.php中使用wp_enqueue_style()。 因此,您需要在子主题目录中创建functions.php。您的子主题的functions.php的第一行将是一个开放的PHP标记(<?php),之后您可以将您的父主题和子主题样式表排入队列。以下示例函数仅在您的父主题仅使用一个主style.css来保存所有css时才起作用。如果您的子主题有多个.css文件(例如ie.css,style.css,main.css),那么您必须确保维护所有父主题依赖项。

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
 
}

如果您的子主题style.css包含实际的CSS代码(通常如此),您还需要将其排入队列。将“父样式”设置为依赖项将确保子主题样式表在其后加载。包括子主题版本号确保您还可以为子主题缓存缓存。完整(推荐)示例为:

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
 
    $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
 
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}

其中parent-style与父主题在注册样式表时使用的$handle相同。

激活子主题

您的子主题现在可以激活了。登录到您站点的管理屏幕,然后转到管理屏幕>外观>主题。您应该看到列出了您的子主题并准备好激活。 (如果您的WordPress安装启用了多站点,那么您可能需要切换到网络管理屏幕以启用主题(在网络管理员主题屏幕选项卡中)。然后您可以切换回特定站点的WordPress管理屏幕激活你的子主题。)

激活子主题后,您可能需要从外观>菜单和主题选项(包括背景和标题图像)重新保存菜单。

添加模板文件

除了functions.php文件(如上所述)之外,您添加到子主题的任何文件都将覆盖父主题中的同一文件。

在大多数情况下,最好创建要从父主题更改的模板文件的副本,然后对复制的文件进行修改,保持父文件不变。例如,如果要更改父主题的header.php文件的代码,则可以将文件复制到子主题文件夹并在那里进行自定义修改。

有几个插件可以让您检测正在查看的页面上使用的特定模板。

有关WordPress如何确定要使用的模板的详细信息,请参阅 Template Hierarchy 页面。

使用functions.php

与style.css不同,子主题的functions.php不会覆盖父对象的对应部分。相反,它除了父代的functions.php之外还会被加载。 (具体来说,它是在父文件之前加载的。)

通过这种方式,子主题的functions.php提供了一种修改父主题功能的智能的,无故障方法。假设您要为主题添加PHP功能。最快的方法是打开其functions.php文件并将函数放在那里。但这并不聪明:下次更新主题时,您的功能将消失。但是有另一种聪明的方法:你可以创建一个子主题,在其中添加一个functions.php文件,并将你的函数添加到该文件中。该函数也将从那里完成相同的工作,其优点是它不会受到父主题的未来更新的影响。不要将父主题的functions.php的完整内容复制到子主题中的functions.php中。

functions.php的结构很简单:在顶部和下面打开PHP标签,你的PHP位。在其中,您可以根据需要添加任意数量的功能。下面的示例显示了一个基本的functions.php文件,它执行一个简单的操作:将一个favicon链接添加到HTML页面的head元素。

<?php // Opening PHP tag - nothing should be before this, not even whitespace
 
// Custom Function to Include
function my_favicon_link() {
    echo <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "\n";
}
add_action( 'wp_head', 'my_favicon_link' );

首先加载子主题的functions.php意味着您可以通过有条件地声明它们来使主题的用户功能可插入 – 即可由子主题替换。

if ( ! function_exists( 'theme_special_nav' ) ) {
    function theme_special_nav() {
        //  Do something.
    }
}

通过这种方式,子主题可以通过简单地预先声明它来替换父级的PHP函数。

有关要在子主题的functions.php文件中包含的内容的更多信息,请阅读主题功能页面。

引用或包含其他文件

当您需要包含位于子主题目录结构中的文件时,您需要使用get_stylesheet_directory()。由于style.css位于子主题子目录的根目录中,因此get_stylesheet_directory()指向子主题的目录(而不是父主题的目录)。要引用父主题目录,请改用get_template_directory()

下面是一个示例,说明如何在引用存储在子主题目录中的文件时使用get_stylesheet_directory()

<?php require_once( get_stylesheet_directory(). '/my_included_file.php' ); ?>

同时,此示例使用get_stylesheet_directory_uri()显示存储在子主题目录的/ images文件夹中的图像。

<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/my_picture.png" alt="" />

与返回文件路径的get_stylesheet_directory()不同,get_stylesheet_directory_uri()返回一个URL,这对前端很有用。

排队样式和脚本

脚本和样式应该每个都有自己的功能,然后应该包含在一个动作中。有关更多信息,请阅读包含CSS和JavaScript的页面。

WordPress不会自动加载前端的子主题样式表。下面是使用wp_enqueue_scripts()动作挂钩调用将子主题的样式表排入队列的函数的示例。

<?php
add_action( 'wp_enqueue_scripts', 'my_plugin_add_stylesheet' );
function my_plugin_add_stylesheet() {
    wp_enqueue_style( 'my-style', get_stylesheet_directory_uri() . '/style.css', false, '1.0', 'all' );
}

特别注意事项

Post Formats

子主题继承父主题定义的文章格式。但是在创建子主题时,请注意使用add_theme_support(’post-formats’)将覆盖父主题定义的格式,而不是添加到主题。

RTL Support

要支持RTL语言,请在子主题中添加rtl.css文件,其中包含:

/*
Theme Name: Twenty Fifteen Child
Template: twentyfifteen
*/

即使父主题没有rtl.css文件,也建议将rtl.css文件添加到子主题中。仅当is_rtl()为true时,WordPress才会自动加载rtl.css()文件。

Internationalization

可以使用WordPress国际化API准备子主题以便翻译成其他语言。有关子主题国际化的特殊考虑因素。

要使子主题国际化,请按照下列步骤操作:

1.添加语言目录。

  • For example: twentyfifteen-child/languages/

2.添加语言文件。

  • 你的文件名必须是he_IL.po和he_IL.mo(取决于你的语言),不像 domain-he_IL.xx 的插件文件。

3.加载textdomain

4.使用GetText函数为字符串添加i18n支持。

Example: textdomain
<?php
/**
  * Set up My Child Theme's textdomain.
  *
  * Declare textdomain for this child theme.
  * Translations can be added to the /languages/ directory.
  */
function twentyfifteenchild_theme_setup() {
    load_child_theme_textdomain( 'twentyfifteenchild', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'twentyfifteenchild_theme_setup' );

此时,子主题中的字符串已准备好进行翻译。为了确保它们正确地进行国际化翻译,每个字符串都需要有 twentyfifteenchild 子文本域。

Example: gettext functions

Here is an example of echoing the phrase “Code is Poetry”:

<?php
esc_html_e( 'Code is Poetry', 'twentyfifteenchild' );
?>

load_child_theme_textdomain()中定义的文本域应该用于翻译子主题中的所有字符串。如果已包含来自父级的模板文件,则应将textdomain从父主题中定义的文本域更改为子主题定义的文本域。

留下评论