分类: WordPress

WordPress 3: Building Child Themes(中文注释)






Course Review From Lynda.com

A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme. (child theme可以在原有的parent theme基础上用进行修改,添加功能)

A child theme resides in its own directory in wp-content/themes. The scheme below shows the location of a child theme along with its parent theme (Twenty Twelve) in a typical WordPress directory structure:

child theme 有自己的文件夹,同样的文件名,会覆盖原有的parent theme 功能 (后面将详细解释)

文件的目录如下:

  • site_root (www)
    • wp-content
      • themes (themes的文件目录)
        • twentytwelve (directory of our example parent theme, Twenty Twelve)(parent theme 目录)
          • style.css (parent theme style sheet)
        • twentytwelve-child (directory of our child theme; can be named anything) (child theme目录)
          • style.css (required file in a child theme; must be named style.css)

This directory can contain as little as a style.css file, and as much as any full-fledged WordPress theme contains:

(可以被覆盖的功能和文件)

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

Here is an example information header of a child theme’s style.css:

(child theme CSS 文件的模板,注意Theme Name (child theme的名字) 和 Template (parent theme 的名字) (大小写都要一致)

/*
Theme Name:     Twenty Twelve Child
Theme URI:      http://example.com/
Description:    Child theme for the Twenty Twelve theme
Author:         Your name here
Author URI:     http://example.com/about/
Template:       twentytwelve
Version:        0.1.0
*/

A quick explanation of each line:

  • Theme Name. (required) Child theme name.
  • Theme URI. (optional) Child theme webpage.
  • Description. (optional) What this theme is. E.g.: My first child theme. Hurrah!
  • Author. (optional) Author name.
  • Author URI. (optional) Author webpage.
  • Template. (required) directory name of parent theme, case-sensitive.
    • NOTE. You have to switch to a different theme and back to the child theme when you modify this line.
  • Version. (optional) Child theme version. E.g.: 0.1, 1.0, etc.

The part after the closing */ of the header works as a regular stylesheet file. It is where you put the styling rules you want WordPress to apply. ( WordPress 会读取注释中的内容进行配置,现在去打开WordPress Theme 选项,你就能看到一个新的Theme –  Child theme,名字为 Theme Name 那里,你所配置的名字)

Note that a child theme’s stylesheet replaces the stylesheet of the parent completely. (The parent’s stylesheet is not loaded at all by WordPress.) So, if you simply want to modify a few small things in the styling and layout of the parent —rather than make something new from scratch— you have to import explicitly the stylesheet of the parent, and then add your modifications. The following example shows how to use the @import rule to do that. [@import url(“../twentytwelve/style.css”);]

child theme’s stylesheet会完全取代parent theme stylesheet,如果你还需要parent stylesheet,

@import url(“../twentytwelve/style.css”); 放在文件的最上面;

<b>Using functions.php</b>

<span style="color: #000000;" data-mce-mark="1">Unlike <i>style.css</i>, the <i>functions.php</i> of a child theme does not override its counterpart from the parent. Instead, it is <b>loaded in addition to the parent’s functions.php</b>. (Specifically, it is loaded right <span style="color: #ff0000;" data-mce-mark="1"><strong><i>before</i></strong></span> the parent’s file.)</span>

functions.php 文件不会被完全取代,它会先读取child them’s functions.php ,然后在读取parent’s functions.php.

In that way, the functions.php of a child theme provides a smart, trouble-free method of modifying the functionality of a parent theme. Say that you want to add a PHP function to your theme. The fastest way would be to open its functions.php file and put the function there. But that’s not smart: The next time your theme is updated, your function will disappear. But there is an alternative way which is the smart way: you can create a child theme, add a functions.php file in it, and add your function to that file. The function will do the exact same job from there too, with the advantage that it will not be affected by future updates of the parent theme.

新的function 可以直接在child theme的function.php文件中加入,不会影响到parent’s theme. 

twentytwelve-child (directory of our child theme; can be named anything) (child theme目录)

  • style.css (required file in a child theme; must be named style.css)
  • function.php (在child theme子目录下新建文件)

The structure of functions.php is simple: An opening PHP tag at the top, a closing PHP tag at the bottom, and, between them, your bits of PHP. In it you can put as many or as few functions as you wish. The example below shows an elementary functions.php file that does one simple thing: Adds a favicon link to the head element of HTML pages.

function favicon_link() {
echo '<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "\n";
}
<span style="color: #ff0000;" data-mce-mark="1">add_action</span>( 'wp_head', 'favicon_link' );

TIP FOR THEME DEVELOPERS. The fact that a child theme’s functions.php is loaded first means that you can make the user functions of your theme pluggable —that is, replaceable by a child theme— by declaring them conditionally. E.g.:

<span style="color: #ff0000;">if ( ! function_exists( 'theme_special_nav' ) ) { </span>

//在parent theme中加入function_exists,如果child theme 有此function,覆盖parent theme的功能)

function theme_special_nav() {
//  Do something.
}

In that way, a child theme can replace a PHP function of the parent by simply declaring it again.

Template files

Templates in a child theme behave just like style.css, in that they override their namesakes from the parent. A child theme can override any parental template by simply using a file with the same name. (NOTE. index.php can be overriden only in WordPress 3.0 and newer.)

在child theme子目录,创建同样名字的文件,就可以做到覆盖 parent theme中原有的一样名字的文件。

Again, this WordPress feature lets you modify the templates of a parent theme without actually editing them, so that your modifications are preserved when the parent theme is updated.

所以对于parent theme的修改,你不需要直接对其文件进行改动。

Here are a few example cases for using template files in a child theme:

  • To add a template that is not offered by the parent theme (e.g., a template for a sitemap page, or for single-column pages, that will be available to select in the Page Edit screen).
  • To add a more specific template (see Template Hierarchy) than what the parent uses (e.g., a tag.php template to use for tag archives instead of the generic archive.php of the parent).
  • To replace a template of the parent (e.g., make your own home.php to override the parent’s home.php).

 




发表评论