如何调整文本宽度并将其置于POST(可视)编辑器的中心?

时间:2019-05-22 作者:myniuat

[免责声明:我不是任何类型的开发人员,但愿意花时间。(不过我可以做一些CSS。)也是本论坛的新成员。]

我用的是安德斯·诺恩的海明威主题。

我还没有尝试创建子主题,我不确定解决方案是否需要。

简而言之,我的目标是使整个“编辑帖子”网页看起来像一个离线文字处理器:

使可视化编辑器占据整个屏幕。(我使用经典编辑器。)(完成:折叠左侧的垂直菜单,选择单列布局,并禁用“全高编辑器和无干扰功能”)

  • 将文本放在中间(但“左对齐”,而不是“对齐”)。这是用于post editor中的“左右边距”

    enter image description here

    如何执行#2和#3?

    非常感谢。

    编辑:我只是想澄清一下:我想改变可视化编辑器的外观——只有可视化编辑器,而不是live网站将显示的任何输出。

  • 3 个回复
    最合适的回答,由SO网友:WebElaine 整理而成

    一个选项:切换到块编辑器而不是经典编辑器。块编辑器附带任何版本的WordPress 5.0或更高版本,因此请更新您的安装,如果您启用了经典编辑器插件,请将其禁用。

    如果您有多个帖子类型,您可能需要查看Gutenberg Ramp插件,该插件允许您选择使用块编辑器的帖子类型。您可以尝试一种帖子类型,看看它对您的效果如何。

    在任何情况下,块编辑器都有一个“全屏模式”,完全隐藏顶部、左侧和右侧工具栏,并且所有内容都有一个固定宽度的中间列。这与您试图在经典编辑器中实现的目标非常相似。

    SO网友:John Swaringen

    WordPress使用TinyMCE的JavaScript库(https://www.tiny.cloud/) 经过一些修改。为了完成您想要做的事情,您必须修改JavaScript呈现编辑器的方式。

    WordPress codex显示有一个钩子可以将自定义样式表应用到编辑器。

    mce\\U css过滤器提供了一种将自定义样式表添加到TinyMCE编辑器窗口的方法

    你可以找到here

    我以前从来没有试过,所以你得试一下。您还可以查看TinyMCE Advanced Plugin 它是开源的,可以修改。

    现在是一个大问题。为了进行修改,您是否觉得学习一些JavaScript和PHP足够舒服。如果不是,你可能想看看UpWork 寻求帮助。

    SO网友:Antti Koskinen

    我希望更改可视化编辑器的外观

    我认为您应该能够通过添加一些custom editor styles 具有add_editor_style() 作用

    下面是从WP代码参考示例复制的一个基本示例。

    将以下内容添加到函数中。您的php文件(child) 主题

    /**
     * Registers an editor stylesheet for the theme.
     */
    function wpdocs_theme_add_editor_styles() {
        add_editor_style( \'custom-editor-style.css\' );
    }
    add_action( \'admin_init\', \'wpdocs_theme_add_editor_styles\' );
    
    接下来,创建一个名为“自定义编辑器样式”的文件。css位于(子主题根目录中。添加到该文件的任何CSS规则都将反映在TinyMCE可视化编辑器中。文件的内容可能如下所示:

    body#tinymce.wp-editor { 
        font-family: Arial, Helvetica, sans-serif; 
        margin: 10px; 
    }
    
    body#tinymce.wp-editor a {
        color: #4CA6CF;
    }
    
    如何执行#2和#3?

    我没有检查css选择器,但我认为通过在body#tinymce.wp-editor 你应该得到你想要的左右空白。

    相关推荐

    Change image using only CSS

    我用的是215主题。我有一个标志设置使用可湿性粉剂定制。我想在mobile或tablet view上更改图像。断点小于59.6875em。我正在使用以下代码:@media only screen and (max-width: 59.6875em) { .custom-logo { content: url(\"https://www.example.com/example/wp-content/uploads/Logo_Wide_2x.png\");