自定义帖子/页面编辑器的css?

时间:2019-04-17 作者:Chris Rogers

正如你从下面截图中看到的,我有一个高清宽屏显示器,我有一个非常窄的编辑框来创建或编辑帖子或网页。

screenshot

我发现标题栏的CSS规则是

.wp-block {
    max-width: 610px;
}
主内容块的CSS规则是

.edit-post-text-editor {
    max-width: 610px;
    margin-left: auto;
    margin-right: auto;
}
我想调整max-width: 属性,所以我尝试使用“外观定制器”的“附加CSS”部分,但没有成功。

如何自定义帖子/页面编辑器屏幕?

1 个回复
SO网友:WebElaine

对,附加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文件进行更改,并且它将始终只应用于块编辑器。(请记住,如果您的帖子类型不使用块编辑器,则这不适用于经典编辑器。)

相关推荐

Jetpack CSS.Screen-Reader-Text Break移动菜单

button.screen-reader-text.font-secondary 在…上https://www.evwe.ch 由于Wordpress Jetpack CSS,不可见.screen-reader-text 释义因此,该菜单在移动设备上不可见。显然,我使用的主题无法处理这个问题。有没有办法关闭Wordpress Jetpack行为或覆盖它?