在 Wordpress 编辑器中添加 HTML 和 CSS？

Posted 2023-03-06

【中文标题】在 Wordpress 编辑器中添加 HTML 和 CSS？

【英文标题】：Adding HTML and CSS in Wordpress editor?

【发布时间】：2018-02-17 12:32:22

【问题描述】：

我正在使用“freestore”的子主题。 (https://en-gb.wordpress.org/themes/freestore/)

我正在尝试使用简单的 html 和 CSS 向我的一个页面添加一些内容。 我已经成功地通过 style.css 更改了主题中的 CSS 样式，但是我正在尝试添加我自己的 HTML，然后添加 CSS 来设置它的样式。

我已经创建了“主页”页面，通过 wordpress tinymce 文本编辑器，我可以很好地添加我的 HTML。当我尝试通过我的 style.css 添加 CSS 时，它不会应用样式。但是，我可以内联添加样式，但我想在外部添加样式。

例子：

在 wordpress 文本编辑器中，我将添加以下行：

<div id="cssTest">TEXT</div>

在我的 style.css 文件中我会添加：

#cssTest 
    background-color: red;

未应用 CSS 样式。但是，将以下内容添加到 HTML 编辑器中可以正常工作：

<div id="cssTest" style="background-color: red;">TEXT</div>

我的问题是：

如何通过外部样式表应用我的样式？ 我应该为该页面创建自己的模板并在其中添加 HTML 吗？

【问题讨论】：

1) 小心编辑style.css。当主题更新时，它将被重置为默认值。 2）从我在这里看到的，它应该可以工作。因此，问题在别处。您的样式表是否使用 @media 查询或类似查询？如果是这样，您是否在样式表的正确部分输入了您的课程？

style.css 可能会缓存在您的浏览器中。尝试刷新页面以排除这种情况。

谢谢，原来只是 style.css 缓存在我的浏览器中。我还在子主题中创建了自己的 style.css 以防止更新问题。

【参考方案1】：

很可能存在属于您的原始主题的 CSS 规则，它比您尝试应用的规则更“具体”。要检查这一点，请使用浏览器工具检查元素并查看应用于该元素的 CSS 规则。

例如，如果该规则是

.content main .section_1 .gxt1 
  background-color: black;

，您必须添加一个具有更高特异性的规则来覆盖它，例如

.content main .section_1 .gxt1 #cssTest 
  background-color: red;

如果原始规则包含!important，您还必须添加!important。所以要覆盖

.content main .section_1 .gxt1 
  background-color: black !important;

，你需要像

这样的东西

.content main .section_1 .gxt1 #cssTest 
  background-color: red !important;

【讨论】：

谢谢，虽然这最终不是我的问题，但这是非常有用的信息，将来会有所帮助。

【参考方案2】：

检查子主题 style.css 是否有 Text Domain: freestore-child parentthemename-child。您添加的任何 css id/class 元素都将被实现。

最好的方法是创建 custom.css 文件并通过wp_enqueue_style 函数将其加入您的子主题的functions.php。

我认为为特定页面（如主页）创建页面模板是最佳做法。

【讨论】：

谢谢。原来是缓存问题，而不是我做错了什么。不过，我会按照您的建议对新页面模板进行更改。