要更改WordPress Gutenberg编辑器的宽度,您需要为其加载自定义CSS规则。以下是如何快速更改宽度的概述,包括加载样式表和添加将增加Gutenberg编辑器内容区域宽度的特定规则。
加载Gutenberg编辑器的自定义CSS
在你的主题的functions.php里面添加以下函数和钩子。这将加载editor.css
在主题目录的根目录中调用的CSS文件。如果您愿意,可以从其他位置加载文件,只需相应地调整您看到的位置即editor.css
。
/** * Gutenberg Editor Styles */ function kl_block_editor_styles() { $version = filemtime( get_stylesheet_directory() . '/editor.css' ); wp_enqueue_style( 'editor-css', get_stylesheet_directory_uri() . '/editor.css', [], $version ); } add_action( 'enqueue_block_editor_assets', 'kl_block_editor_styles' );
CSS规则更改宽度
为块编辑器添加规则后,打开editor.css
文件添加以下规则以更改Gutenberg编辑器的内容宽度。
/* Main column width */ .wp-block { max-width: 100%; } /* Width of "wide" blocks */ .wp-block[data-align="wide"] { max-width: 100%; } /* Width of "full-wide" blocks */ .wp-block[data-align="full"] { max-width: none; }
本文作者为雷石,未经作者授权,禁止转载。