前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >更改WordPress Gutenberg编辑器的宽度

更改WordPress Gutenberg编辑器的宽度

作者头像
许都博客
修改2021-06-27 15:15:35
7920
修改2021-06-27 15:15:35
举报
文章被收录于专栏:许都博客许都博客

要更改WordPress Gutenberg编辑器的宽度,您需要为其加载自定义CSS规则。以下是如何快速更改宽度的概述,包括加载样式表和添加将增加Gutenberg编辑器内容区域宽度的特定规则。

加载Gutenberg编辑器的自定义CSS

在你的主题的functions.php里面添加以下函数和钩子。这将加载editor.css在主题目录的根目录中调用的CSS文件。如果您愿意,可以从其他位置加载文件,只需相应地调整您看到的位置即editor.css

代码语言:php
复制
/**
 * 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编辑器的内容宽度。

代码语言:javascript
复制
/* 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编辑器宽度的官方推荐方法。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-08-02,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 加载Gutenberg编辑器的自定义CSS
  • CSS规则更改宽度
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档