为HTML5 Blank创建子主题

Question

我刚刚在我的WordPress安装上安装了HTML5 Blank主题.

http://html5blank.com/

我试图使用WordPress codex上显示的@import方法为它创建一个子主题.

/*
Theme Name: html5blank-child
Description: Child theme for HTML5 Blank
Template: html5blank-stable
Author: James
*/

@import url("../html5blank-stable/style.css");

它不起作用,我添加到子主题的任何CSS都不会覆盖父级.

救命!

詹姆士

Answer 1

默认情况下,HTML5Blank不是'儿童主题友好'主题.

这是因为它是一个"空白"模板,通常是为了直接编辑,但由于您可能希望在各个网站上保留您的工作以及父主题更新,因此我们必须制作您的HTML5Blank主题成为父主题,因此儿童主题友好.

您会记得,(通过子主题友好的父主题),您可以通过添加名为HTML5Blank-child的文件夹来创建子主题,并添加一个style.css文件,该文件将保存您的自定义项,并且您还要添加一个functions.php,然后保存你想要的任何自定义函数,(注意,你不能只将父主题functions.php文件复制到你的子主题文件夹,因为你要初始化所有的再次运行,这将使您的页面超载).

请注意get_template_directory_uri()函数与get_stylesheet_directory_uri()函数,以查看您正在考虑的主题是否是"儿童主题友好",(在HTML5Blank的情况下,它使用get_template_directory_uri()函数将其排入样式表,意味着它不是),您将要在您的子主题(HTML5Blank-stable-child)中为新创建的functions.php添加一些功能,并包含以下代码:

    <?php
    // De-register HTML5 Blank styles
    function html5blank_styles_make_child_active()
    {
    wp_deregister_style('html5blank'); // Enqueue it!
    }
    add_action('wp_enqueue_scripts', 'html5blank_styles_make_child_active', 100); // Add Theme Child Stylesheet

    // Load HTML5 Blank Child styles
    function html5blank_styles_child()
    {
    wp_register_style('html5blank-child', get_stylesheet_directory_uri() . '/style.css', array(), '1.0', 'all');
    wp_enqueue_style('html5blank-child'); // Enqueue it!
    }
    add_action('wp_enqueue_scripts', 'html5blank_styles_child'); // Add Theme Child Stylesheet
    ?>

然后,您将看到我们已经DE-REGISTERED注册HTML5Blank样式表,然后注册子样式表,以便它可以作为主样式表的覆盖.它仍在使用的主样式表,但子主题现在具有正确的优先级作为覆盖.最后,我们根本没有编辑父主题,以实现这一结果.

完成上述操作后,您应该会在网站源代码中看到与下面类似的行:

    <link rel='stylesheet' id='html5blank-child-css'  href='/3.9.2/wp-content/themes/html5blank-stable-child/style.css?ver=1.0' media='all' />

可以(暂时)向您的子主题style.css文件添加第二个可视化测试的简单CSS规则:

    body {
    font:300 11px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color:#444;
    background:#f00 !important;
    }

然后,您将看到我们已经DE-REGISTERED注册HTML5Blank样式表,然后注册子样式表,以便它可以作为主样式表的覆盖.它仍在使用的主样式表,但子主题现在具有正确的优先级作为覆盖.

最后,我们根本没有编辑父主题,以实现这一结果.

你应该看到一个红色背景.

然后,这将允许您继续在子主题中进行编辑,并且仍然可以在将来更新HTML5Blank主题,这与使用WordPress的最佳方式保持一致.