1

编辑3：我想这已经解决了。我刚刚启用了 Gutenberg 编辑器并发现了它的“经典编辑器”部分，即代码编辑器。我唯一需要习惯的是编辑器的行高，我不能轻易修改，这还不错。这对我有用，它比修改functions.php或其他类似的复杂事情（对我来说）更重要。谢谢你。

[免责声明：我不是任何类型的开发人员，但愿意花时间。（可以做一点 CSS。）另外，这个论坛的新手。]

我正在使用 Anders Norén 的海明威主题。

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

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

  1. 使可视化编辑器占据整个屏幕。（我使用经典编辑器。）（完成：折叠左侧的垂直菜单，选择 1 列布局，并禁用“全高编辑器和无干扰功能。”）
  2. 设置文本的宽度（因为当前文本几乎是从屏幕边缘到屏幕边缘）
  3. 将文本放在中心（但“左对齐”，而不是“对齐”）。这是用于帖子编辑器中的“左右边距”。

现在看起来像这样。

#2 和 #3 我该怎么做？

谢谢你。

编辑：澄清一下：我希望改变可视化编辑器的外观——只有可视化编辑器，而不是实时网站将显示的任何输出。

编辑2：

我可以复制 Balázs Varga 展示的内容，但是（我很抱歉我应该早点说过）在我将代码保存在“附加 CSS”上之后它就不起作用了。（在清除所有缓存之后。）我使用了 id #tinymce。

我的浏览器（Firefox 开发人员）在我摆弄 Inspector 时实时显示更改，但在我保存额外的 CSS 之后不会。我认为这很奇怪，而且我认为我可以很好地处理 CSS：我网站上的主题 Hemingway 看起来不再像原来的 Hemingway，但所有更改都是通过 Additional CSS 进行的。

在 Google 上的搜索显示我可能需要编辑“functions.php”（？），但我现在不知道它是如何工作的，我认为 2019 年可能会有另一种方式。我避免编辑“复杂”的东西像那样（对我来说），除非 Wordpress 让我很难破坏事物，例如“附加 CSS”。

在 Inspector 上，我可以通过以下方式解决它：

#tinymce {
    margin-left: 300px;
    margin-right: 300px;
}

我想知道为什么这不是可视化编辑器的“功能”。会非常好。它可以消除对文字处理器或第三方编辑器的需求（至少对于像我这样的“纯文字”作家而言）。

4

1 回答 1

0

您可以在浏览器中检查该元素，因此您可以看到它是一个带有 id 的 tinymce iframe content_ifr。

如果你想以像素为单位设置宽度，你可以这样做：

#content_ifr {
    position: relative;
    max-width: 600px;
    left: 50%;
    transform: translate(-50%, 0);
}

left:50%与 with 一起position:relative将元素水平推到中心。但是它将左侧推到中心，因此您还需要将水平transform设置为-50％，因此将其拉回正确的位置（因为变换中的百分比是从元素本身的大小计算的，而不是从它的父元素喜欢left）

您应该看到如下内容： 在此处输入图像描述

如果你想以百分比设置宽度，你可以简单地应用 amargin-left来使元素居中：

#content_ifr {
    width: 80%;
    margin-left: 10%; // set this value to: (100 - width) / 2
}

编辑

您还可以编辑您functions.php的样式以将样式附加到页面，例如在带有admin_head钩子的标题区域中：

function hook_css() {
?>
    <style>
    #content_ifr {
        position: relative;
        max-width: 600px;
        left: 50%;
        transform: translate(-50%, 0);
    }
    </style>
<?php
}
add_action('admin_head', 'hook_css');
于 2019-05-22T09:50:37.013 回答