我的 5 个最喜欢的 WordPress CSS 技巧

1. em strong

我可能比应该做的还要多地使用 WordPress 内部实际的编辑器来撰写文章。我关闭了视觉编辑器，仅仅是因为我喜欢查看我正在做的事情的标签。此外，我真的很讨厌使用视觉编辑器时出现的弹出链接窗口。我猜想很多人都和我一样。

最明显的是缺少任何类型的标题标签。如果你像我一样偶尔会写很长的分段文章，用标题标签来划分部分是理想的。手动写它们并没有太大的问题，但只需一点 CSS 技巧，你就可以使用现有的工具来制作标题。只需在样式表中添加类似下面的内容

em strong {
   font-size: 2.0em;
   font-weight: bold;
   margin-bottom: 0.3em;
}

现在你可以选择一部分文本，然后点击 [b] 按钮添加 <strong> 标签，然后选择所有这些文本并按 [i] 按钮为它添加 <em> 标签，你就得到了一个简易的标题样式。

2. 删除多余的日历样式

WordPress 自己说，当 为公开发布设计主题 时，你应该从默认主题或经典主题开始并对其进行修改。我认为这是一个明智的建议，但结果是，有很多主题包含许多未使用的、不必要的 CSS。主要是日历样式。偶尔你会看到一个博客很好地使用了日历，但它们是凤毛麟角。然而，大多数博客的样式表中都有一大块未使用的代码，专门用于日历。如果你不使用它，就删除它。

3. 使您的标题层次结构清晰

在博客的任何页面上，页面上有很多元素应该作为标题：博客标题、博客描述、文章标题、文章副标题、侧边栏标题等。将这些内容归入语义上合理的层次结构应该是首要任务。以下是如何操作的建议，以及要放入的 WordPress PHP 代码片段

博客标题

<h1><a href="/"><?php bloginfo('name'); ?></a></h1>

博客描述

<h2><?php bloginfo('description'); ?></h2>

文章标题

<h3><a href="<?php the_permalink() ?>" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>

文章副标题

<h4>Holding in a fart only makes things worse later.</h4>

侧边栏部分

<h5>Blogroll</h5>

4. 在段落上设置一个充足的底部边距

WordPress 的一个“特性”是，没有简单的方法可以在编辑器内添加文章中文本块之间的间距。

即使手动添加 <br /> 标签也不起作用，WordPress 会将其删除。那么一个可怜的博主该怎么办？将间距留给你的 CSS 来处理。无论如何，你不应该添加多余的换行符，这是不好的语义。

WordPress 会做的事情是，将这两个文本块分别放在它们自己的 <p> 标签集中。因此，要让文本块之间留出健康的间距，你只需给该选择器设置一个健康的底部边距即可

p {
     margin-bottom: 1.4em;
}

你的评论者也会喜欢它。WordPress 将评论与文章类似地对待，不允许额外的间距。有了段落元素上的底部边距，如果你的评论者硬回车并开始在他们的评论中写一个新段落，它将应用边距，一切看起来都会正确。

5. 使用 &nbsp; 避免孤儿字

这更多的是标记问题，而不是 CSS 问题，但它是一个好技巧，所以我要提一下。许多博客使用大字体作为文章标题。孤儿字在带有大字体的短行文本上看起来特别可笑。要避免这些喜欢单独爬到下面的行的单个单词，在文章标题的最后两个单词（或最后几个单词）之间使用一个不间断空格。例如，“如何告诉客户滚蛋并逍遥法外 &nbsp; 之外 &nbsp; 。”