如何在 wordpress 中同时设置 blockeditor 和前端的样式?
How to style blockeditor and frontend together in wordpress?
在开发主题时,我从来没有真正关心过 WordPress 编辑器是否与前端看起来相似。随着 5.9 中完整站点编辑的实施,我想改变这一点,并在块编辑器中看到一些更接近前端外观的东西。
你把不同的风格放在哪里?如果我将我的完整前端 css 也加载到后端,它会搞砸很多事情。
示例:
我有一个 drak 主题。所以背景是黑色的,字体颜色
白色的。我应该如何将其应用于后端?通常我给
背景设置直接整和改字体
使用 * {字体大小:fff;}。我需要使用更具体的 classes
从现在开始,例如在仪表板中不再有此更改
出色地? (一般我喜欢直接给html元素设置样式,可惜总是要写很长的class名字)
到目前为止,我还将自定义块样式放入我的主 css 文件中。
他们去哪里最好?
我应该做一些类似后端拦截器的事情吗 css,仅前端
css 和第三个文件,用于我想要两边都有的样式?
我稍微看了一下 theme.json,但是把所有块的完整样式都放在那里看起来有点乱。
我认为方向很明确 ;) 你如何处理样式,对此有什么有效的解决方案?
感谢提示、经验、链接或任何可能有助于消除我的困惑的东西。
干杯,
Piit
经过数周的搜索,现在我的方法是:
- 网站背景、字体类型和颜色的一般样式由 theme.json 处理。
- 页脚、cookienotice、页眉的样式以及我不需要加载到编辑器的所有内容都在正常加载 style.css。
- 我想要两边的样式,我放入一个单独的 editor-style。css 并将其加载到 functions.php 到前面和 back-end。为了不 运行 遇到通用 wordpress 界面的问题,我总是直接处理这些块。因此,我不只是在 css 中写
table
,而是写 .wp-block-table table
.
- 之前我大量使用 ACF 插件来创建自定义块。 (非常强大,但在编辑器中看起来很杂乱)多亏了新的块模式功能,我可以非常容易地替换几乎所有的 ACF 块。
让编辑器看起来或多或少与最终网站完全一样,这是一个非常小的额外工作量,而且非常迷人。
在开发主题时,我从来没有真正关心过 WordPress 编辑器是否与前端看起来相似。随着 5.9 中完整站点编辑的实施,我想改变这一点,并在块编辑器中看到一些更接近前端外观的东西。
你把不同的风格放在哪里?如果我将我的完整前端 css 也加载到后端,它会搞砸很多事情。
示例:
我有一个 drak 主题。所以背景是黑色的,字体颜色 白色的。我应该如何将其应用于后端?通常我给 背景设置直接整和改字体 使用 * {字体大小:fff;}。我需要使用更具体的 classes 从现在开始,例如在仪表板中不再有此更改 出色地? (一般我喜欢直接给html元素设置样式,可惜总是要写很长的class名字)
到目前为止,我还将自定义块样式放入我的主 css 文件中。 他们去哪里最好?
我应该做一些类似后端拦截器的事情吗 css,仅前端 css 和第三个文件,用于我想要两边都有的样式?
我稍微看了一下 theme.json,但是把所有块的完整样式都放在那里看起来有点乱。
我认为方向很明确 ;) 你如何处理样式,对此有什么有效的解决方案?
感谢提示、经验、链接或任何可能有助于消除我的困惑的东西。
干杯, Piit
经过数周的搜索,现在我的方法是:
- 网站背景、字体类型和颜色的一般样式由 theme.json 处理。
- 页脚、cookienotice、页眉的样式以及我不需要加载到编辑器的所有内容都在正常加载 style.css。
- 我想要两边的样式,我放入一个单独的 editor-style。css 并将其加载到 functions.php 到前面和 back-end。为了不 运行 遇到通用 wordpress 界面的问题,我总是直接处理这些块。因此,我不只是在 css 中写
table
,而是写.wp-block-table table
. - 之前我大量使用 ACF 插件来创建自定义块。 (非常强大,但在编辑器中看起来很杂乱)多亏了新的块模式功能,我可以非常容易地替换几乎所有的 ACF 块。
让编辑器看起来或多或少与最终网站完全一样,这是一个非常小的额外工作量,而且非常迷人。