提问者:小点点

在Gutenberg编辑器中添加自定义CSS的正确方法是什么


我试图找到正确的方法添加自定义CSS到WordPress古登堡编辑器。目前,我已经在我的child-theme CSS目录中添加了一个自定义的。CSS文件,并在child-theme的function.php文件中添加了以下函数。

    // Custom Editor Styles
    function theme_editor_styles() {
        // Add support for Editor Styles
        add_theme_support('editor-styles');

        // Enqueue Editor Styles
        add_editor_style('style-editor.css');
    }

    add_action('after_setup_theme', 'theme_editor_styles');

然而,当我刷新WordPress编辑器时,什么都没有改变。我在body属性中添加了一个黑色的背景颜色,这样当文件加载时就会很明显了。

是上面的功能不正确,还是我试图用错误的方式来做这件事?

谢了。


共1个答案

匿名用户

当父主题未声明add_theme_support('editor-styles')时,会出现此问题。子主题无法覆盖父主题不包括的选项或样式表(参考:高级主题/子主题)

要解决这个问题,只需在父主题functions.php中找到该函数,该函数链接到add_action('after_setup_theme',...),然后通过子主题删除它,并添加您自己的支持编辑器样式的函数,例如:

子主题:functions.php

// Custom Editor Styles
function theme_editor_styles() {
    // Add support for Editor Styles
    add_theme_support('editor-styles');

    // Enqueue Editor Styles
    add_editor_style('style-editor.css');

   // Also re-add any other add_theme_support() options as needed from Parent Theme
}

// Remove the Parent Themes Editor Styles function
remove_action( 'after_setup_theme', 'name_of_parent_theme_editor_styles' );
// Add your own Editor Styles to add support for Guternberg Editor Styles
add_action( 'after_setup_theme', 'theme_editor_styles' );