【问题标题】:Creating a child theme for HTML5 Blank为 HTML5 Blank 创建子主题
【发布时间】:2014-10-07 00:54:30
【问题描述】:

我刚刚在我的 WordPress 安装中安装了 HTML5 Blank 主题。

http://html5blank.com/

我尝试使用 WordPress 法典上显示的 @import 方法为其创建子主题。

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

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

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

救命!

詹姆斯

【问题讨论】:

    标签: html wordpress themes


    【解决方案1】:

    默认情况下,HTML5Blank 不是“儿童主题友好”主题。

    这是因为它是一个“空白”模板,通常旨在直接编辑,但由于您都可能希望在您的个人网站上保留您的工作和父主题更新,因此我们必须将您的 HTML5Blank 主题设为父主题,因此对子主题友好。

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

    注意 get_template_directory_uri() 函数与 get_stylesheet_directory_uri() 函数,看看您考虑的主题是否是“儿童主题友好”,(以及在 HTML5Blank 的情况下,它使用 get_template_directory_uri() 函数将其样式表排入队列,这意味着它不是),然后您需要向新创建的 functions.php 添加一些功能strong> 在您的子主题(HTML5Blank-stable-child)中并包含以下代码:

        <?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
        ?>
    

    然后您会看到我们已经取消注册了 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' />
    

    可以(临时)将第二条简单的 CSS 规则添加到您的子主题 style.css 文件中:

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

    然后您会看到我们已经取消注册了 HTML5Blank 样式表的排队,然后注册了子样式表,因此它可以作为主样式表的覆盖工作。它仍在使用的主样式表,但子主题现在具有正确的优先级以作为替代。

    最后,我们根本没有编辑父主题来实现这个结果。

    您应该会看到红色背景。

    这将允许您继续在子主题中进行编辑,并且将来仍然能够更新 HTML5Blank 主题,这 100% 符合如何最好地使用 WordPress。

    【讨论】:

    • 这应该被标记为解决方案。正如 Lee 所说,HTML5Blank 并不是真正的儿童主题友好,但这确实解决了问题并允许优先考虑儿童 css。
    【解决方案2】:

    在模板上,尝试删除“-stable”。这只是一个猜测。 @import url 很好,因为那是主题所在的文件夹。

    【讨论】:

    • 嗨 Bryan,我认为这个问题与父主题 functions.php 将父主题 style.css 排队:
    • // 加载 HTML5 空白样式 function html5blank_styles() { wp_register_style('normalize', get_template_directory_uri() . '/normalize.css', array(), '1.0', 'all'); wp_enqueue_style('标准化'); // 排队! wp_register_style('html5blank', get_template_directory_uri() . '/style.css', array(), '1.0', 'all'); wp_enqueue_style('html5blank'); // 排队! }
    • 这应该不是问题。这就是父主题应该加载其样式的方式。您是否尝试从样式表中删除 -stable
    猜你喜欢
    • 1970-01-01
    • 2018-06-20
    • 2016-03-30
    • 1970-01-01
    • 1970-01-01
    • 2021-07-27
    • 1970-01-01
    • 2021-09-09
    • 2015-03-19
    相关资源
    最近更新 更多