对,附加CSS仅适用于网站的前端(访客查看区域)。您可以只将CSS添加到编辑器本身,但请记住,块的设计适合此核心列,因此如果您更改它,可能会出现一些样式上的奇怪之处。当您更改此核心值时,可能会出现其他硬编码宽度或百分比。
考虑到这一点,首先,您需要创建一个插件。这相当简单-您在其中创建一个文件夹/wp-content/plugins/
- 说/wp-content/plugins/custom-editor-css/
- 然后在该文件夹中创建一个PHP文件,比如plugin.php
.
<?php
/**
* Plugin Name: Custom CSS for the Block Editor
*/
您将看到的大多数插件都有更多注释,但只有这一个插件名称注释才能让WP识别出它是一个插件。现在,您可以在wp admin中转到插件页面并激活插件,尽管现在插件没有任何作用。
接下来,在插件文件所在的文件夹中创建自定义样式表,比如/wp-content/plugins/custom-editor-css/editor.css
. 包括您喜欢的任何CSS,即。
。wp块{最大宽度:800px;}。编辑帖子文本编辑器{最大宽度:800px;}
最后,回到你的plugin.php
将CSS归档并排队。钩子enqueue_block_editor_assets
只在wp admin中运行,而不是在网站的前端,因此它只影响编辑器。这就在插件名称注释之后:
// When enqueue block editor assets runs, also run our custom function
add_action(\'enqueue_block_editor_assets\', \'override_max_widths\');
function override_max_widths() {
wp_enqueue_style(
\'override-max-widths\', // a unique handle for your css
plugins_url(\'editor.css\', dirname(__FILE__)), // url of the css file
array(\'wp-edit-blocks\'), // dependency to include CSS after Core CSS
\'1.0\' // version of your CSS
);
}
现在,您可以根据需要对CSS文件进行更改,并且它将始终只应用于块编辑器。(请记住,如果您的帖子类型不使用块编辑器,则这不适用于经典编辑器。)