更改WordPress Gutenberg编辑器的宽度

雷石 601 0

要更改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;
}

在主题支持下块编辑器手册中概述,是更改Gutenberg编辑器宽度的官方推荐方法。

发表评论 取消回复
表情 图片 链接 代码

分享