要更改WordPress Gutenberg编辑器的宽度,您需要为其加载自定义CSS规则。以下是如何快速更改宽度的概述,包括加载样式表和添加将增加Gutenberg编辑器内容区域宽度的特定规则。
在你的主题的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' );
为块编辑器添加规则后,打开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;
}