如何将可视化编辑器中的样式与子主题的样式同步?

时间:2021-01-09 作者:akopacsi

我有一个wordpress网站,有一个儿童主题,对其进行了明显的修改。根据子主题中声明的修改,网站的公共可访问表面将正确显示。(例如,背景设置为蓝色,而不是默认的粉红色。)

我的问题是,可视化编辑器仍然以原始模板的样式显示内容,就像根本没有子主题一样。)例如,视觉编辑器中的主背景仍然是默认的粉红色,而不是蓝色。

我想知道是否有一个干净、简单的解决方案可以将子主题中的样式复制、镜像、同步到可视化编辑器中。。。而不会影响可视化编辑器本身的css。

1 个回复
最合适的回答,由SO网友:nightowl 整理而成

父主题的功能。php有两个函数来管理编辑器样式。他们是twentytwenty_classic_editor_styles()twentytwenty_block_editor_styles() 他们都被init钩住了。例如,classic editor函数读取:

function twentytwenty_classic_editor_styles() {

$classic_editor_styles = array(
    \'/assets/css/editor-style-classic.css\',
);

add_editor_style( $classic_editor_styles );

}

add_action( \'init\', \'twentytwenty_classic_editor_styles\' );
要覆盖这些样式,请将这两个函数都复制到子主题的函数中。并将这些函数中指定的文件路径替换为您自己当前CSS样式表的路径。父主题的函数定义不是;“可插拔”;因此,您需要为自己的函数指定一个不同的名称(这样您就不会在已声明的函数中遇到PHP错误)。然后可以删除父主题的样式表以防止样式冲突,如下所示:

function remove_parent_theme_styles(){
    remove_action( \'init\', \'twentytwenty_classic_editor_styles\' );   
}
add_action( \'after_setup_theme\', \'remove_parent_theme_styles\' );
以后对子主题样式表的更改将自动反映在编辑器导入的样式中。

相关推荐

如何通过ACF值强制动态CSS在页面加载时更新?

我正在尝试通过ACF颜色选择器将滚动帖子的背景颜色动态更改为帖子选项中设置的颜色。在本地开发时,我能够提供足够的代码示例使其正常工作(我认为),但现在我已经将其移动到了真正的服务器上,它的功能就不同了。Problem: 颜色的改变在我看到的第一篇文章上起作用,但当我转到另一篇文章时,应该显示(或更改为)的背景色与第一篇文章相同。要使其显示正确的颜色,唯一的方法是进行硬刷新。Test it 通过查看这两个页面。你会注意到,当你滚动时,它们在页面的顶部和底部都有相同的颜色(颜色再次改变)。但做一次艰难的刷新