WordPress 布局的 10 条基本规则

1. 使用类，而不是标识符

经常使用 WordPress 页面构建器上的布局调整，这使得可以在同一页面上多次应用一个块（例如，滑块）。

如果您在此项目的布局中使用了一个标识符，并且页面上已经存在两个这样的元素，那么这个标识符将不再是唯一的，因此它的主要用途将丢失并且可能会破坏您的代码。因此，请尝试在布局中使用类，而不是 ID。

2. 包装元素

在尝试优化样式时，HTML 开发人员经常为特定类创建组样式。例如，在设置按钮样式时，您可以使用一个类来添加边框、背景、字体、填充、边距等。

但是，如果更改了其中一个块上的设计，其中使用了与其他块上相同的按钮，那么您应该使用包装器来更改此特定按钮的样式，而不会影响其他块中的其余按钮。建议对所有类使用前缀。前缀可能是主题的短标题。例如——“主题横幅包装”。

3.从包装块继承

如果您使用 BEM 方法，那么您就会知道这种布局的所有优点。如果没有，那么掌握这种方法或类似方法是值得的，因为在调整 WordPress 的布局时不可能避免这些必要的技能。

简而言之，元素样式必须继承自包装元素，而不是继承自例如 body。

4. 使用标准的 HTML 模板作为菜单

在设置菜单样式时，您肯定需要使用 WordPress 为该菜单生成的类，这样在 WordPress 上调整布局的过程不会很复杂。

5. 菜单应始终包含两层嵌套

即使您在设计中没有二级和三级菜单，也应始终在布局中预见到它们，因为 WordPress 为其用户提供了这种可能性。

6. 相似的样式，不同的wrap class

尽量不要改变不同菜单或其他项目的结构，而只改变包装类。

7. 脚本初始化——通用

在布局中使用不同的 JS 库，例如滑块，您需要进行通用初始化，因为页面上可能有几个，并且您需要每个都不会破坏彼此的代码。

8. 最好不要对高度和宽度元素使用硬编码

如果您的布局中的文本占了三行，客户端可以添加十行甚至更多的文本。因此，您不能对这种类型的元素高度或宽度进行硬编码。

9. 仅在 HTML 中的背景图像

建议仅在您确定用户不会更改图像的情况下使用 CSS background-image 选项。在所有其他情况下，通过 HTML 使用背景图像功能。