zh-cn: Child Themes - WordPress

zh-cn:Child Themes

Languages: English • Themes 日本語 Français • Chinese (Simplified) • (Add your language)

A WordPress child theme is a theme that inherits the functionality of another theme—the parent theme—and lets you modify that functionality or add new features. This article explains how to create a basic child theme and what you can do with it. The examples use Twenty Ten, the default theme in WordPress 3.0, as the parent theme.

Creating a child theme is simple. Create a directory, put a properly formatted style.css file in it, and you have a child theme! With just a basic understanding of HTML and CSS, you can create a very basic child theme to modify and extend a parent theme's styling and layout without changing any of its files. This way, your changes are preserved when the parent theme is updated.

For this reason, we strongly recommend using child themes to modify themes.

If you have a basic understanding of PHP, WordPress Templates, and the WordPress Plugin API, you can theoretically use a child theme to extend every aspect of a parent theme without modifying any of its files.

Contents

• 1 Directory Structure
• 2 The Required style.css File
• 3 A Child Theme Example3.1 A Note on the @import Rule
• 4 Using functions.php
• 5 Template Files
• 6 Other Files
• 7 Resources

Directory Structure

A child theme lives in its own directory under wp-content/themes. The structure below shows where the child theme and its parent theme (Twenty Ten) sit in a typical WordPress directory structure:

• public_htmlwp-contentthemes (the directory containing themes)twentyten (the directory for the parent theme Twenty Ten in this example)twentyten-child (the child theme directory; you can name it anything)style.css (the essential child theme file; it must be named style.css)

This folder can contain as little as a single style.css file or as many files as a complete WordPress theme:

1. style.css (required)
2. functions.php (optional)
3. Template files (optional)
4. Other files (optional)

Let's look at how they work.

The Required style.css File

style.css is the only required file in a child theme. Its header provides the information WordPress needs to identify the child theme, and it overrides the parent theme's style.css file.

For any WordPress theme, the header information must be at the top of the file. The only difference is that a child theme requires a Template: line, which tells WordPress which theme is its parent.

Here is an example header for a style.css file:

/*Theme Name:     Twenty Ten ChildTheme URI:      http: //example.com/Description:    Child theme for the Twenty Ten theme Author:         Your name hereAuthor URI:     http: //example.com/about/Template:       twentytenVersion:        0.1.0*/

Copy code

A brief explanation of each line:

• Theme Name. (Required) The name of the child theme.
• Theme URI. (Optional) The child theme's homepage.
• Description. (Optional) A description of the child theme. For example: My first child theme—awesome!
• Author URI. (Optional) The author's homepage.
• Author. (optional) The author's name.
• Template. (Required) The directory name of the parent theme; case-sensitive. Note: Before changing the child theme's name, switch to another theme.
• Version. (Optional) The child theme's version. For example: 0.1, 1.0, etc.

*/ Everything after this closing marker works like a regular stylesheet. You can add any style rules you want to apply to WordPress after it.

Note that the child theme's stylesheet replaces the parent theme's stylesheet. (In fact, WordPress does not load the parent theme's stylesheet at all.) So if you just want to change some of the parent theme's styling and layout—rather than build a new theme from scratch—you must explicitly import the parent theme's stylesheet and then override it. The example below shows how to do this with the @import rule.

A Child Theme Example

In this example, the parent theme is Twenty Ten. We like almost everything about it except the site title's color, which I want to change from black to green. With a child theme, this takes just three simple steps:

1. Create a new directory under wp-content/themes and name it twentyten-child (or any name you prefer).
2. Save the code below in a file named style.css and place it in the new folder.
3. Go to the WordPress Dashboard>Themes, then activate your new theme: Twenty Ten Child.

/*Theme Name: Twenty Ten ChildDescription: Child theme for the Twenty Ten theme Author: Your name hereTemplate: twentyten*/
@import url("../twentyten/style.css");
#site-title a {    color: #009900;}

Copy code

Here is a step-by-step explanation of what the code above does:

1. /* Begins the child theme's header information.
2. Theme Name: Declares the child theme's name.
3. Description: Describes the theme (optional; can be omitted).
4. Author: Declares the author's name (optional; can be omitted).
5. Template: Declares the child theme's parent theme—in other words, the name of the parent theme's folder. Case-sensitive.
6. */Marks the end of the child theme's header information.
7. Use the @import rule to import the parent theme's stylesheet.
8. #site-title a Defines the site title's color (green), overriding the same style rule in the parent theme.

Note on the @import rule

Make sure there are no other CSS style rules before the @import rule. If you place other rules above it, it will not work, and the parent theme's stylesheet will not be imported.

Using functions.php

Unlike style.css, the child theme's functions.php does not override its counterpart in the parent theme. Instead, it adds new functionality alongside the parent theme's functions.php. (In fact, it is loaded before the parent theme's file.)

This makes the child theme's functions.php a flexible, reliable way to modify the parent theme's functionality. If you want to add PHP functions to your theme, the quickest approach might be to open its functions.php file and add them there. But that approach is not flexible: the next time your theme is updated, your additions will be lost. Instead, if you use a child theme, put a functions.php file in it, and add your functions to that file, they will work just as well, and future parent theme updates will not affect them.

The structure of a functions.php file is very simple: put the opening PHP tag at the top, the closing tag at the bottom, and your own PHP functions between them. Add as much or as little as you need. The following example shows a basic functions.php file that adds a favicon link to the HTML page's head element.

function favicon_link() {    echo '' . "\n";}add_action('wp_head', 'favicon_link');
?>

Copy code

Tip for theme authors: because the child theme's functions.php loads first, you can make your theme's functions pluggable—that is, replaceable by a child theme—by declaring them conditionally. For example:

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

Copy code

Note that the check is performed in the parent theme, using PHP's function_exits. With this approach, a child theme can replace a PHP function in the parent theme simply by declaring it again.

Template Files

Template files in a child theme behave like style.css: they override matching files in the parent theme. A child theme can override any parent theme template file simply by creating a file with the same name. (Note: index.php can only be overridden in WordPress3.0 and later.)

This WordPress feature likewise lets you modify the parent theme's appearance and functionality without editing its files, while preserving your changes after parent theme updates.

Here are some examples of using template files in a child theme:

• Add a template that the parent theme does not provide (for example, a sitemap page template or a single-column page template, available in the template selector when editing a page).
• Add a more specific template than the parent theme provides (see Template Hierarchy). (For example, a new tag.php template for posts archived by tag can replace the parent theme's generic archive.php template.)
• Replace a template in the parent theme. (For example, use your own home.php to override the parent theme's home.php.)

Other Files

Besides style.css, functions.php, index.php, and home.php, a child theme can use any type of file that a regular theme uses, as long as it is linked correctly. For example, you can use icons and images linked from stylesheets or Javascript files, or additional PHP files called from functions.php.

Resources

• Theme Development
• How to Modify WordPress Themes the Smart Way - four-part series on child themes
• How to make a child theme for WordPress: A pictorial introduction for beginners - illustrated introduction to child themes
• Introducing Thirty Ten - guide to creating a Twenty Ten Child Theme

Categories

:

• zh-cn:Design and Layout
• zh-cn:UI Link

Original article: https://codex.wordpress.org/zh-cn:%E5%AD%90%E4%B8%BB%E9%A2%98