WordPress 6.2.2+Twenty Twenty-Three主题首字下沉及自定义CSS实现

问题根源 #

Twenty Twenty-Three是块主题，和旧版传统主题的样式优先级、自定义逻辑不同；你之前的代码仅设置了字体，缺少首字下沉必需的浮动、尺寸等核心样式，且未正确引入自定义字体资源；另外直接修改主题文件的方式在块主题中不可靠，主题更新会丢失所有自定义修改。

分步解决方案 #

1. 用官方推荐入口添加自定义CSS #

块主题不建议直接修改主题文件，使用以下入口添加的样式不会因主题更新丢失：

• 登录WordPress后台，进入「外观>自定义>附加CSS」，所有自定义样式都在这里添加。

2. 完整首字下沉CSS代码（含自定义字体） #

根据需求选择以下两种字体加载方式：

方式一：本地加载字体（无外链）

1. 下载「Fredericka the Great」字体的.woff2格式文件（优先选这个格式，兼容性好体积小）；
2. 在你的WordPress站点的wp-content/uploads/目录下新建fonts文件夹，将字体文件上传到该文件夹；
3. 在「附加CSS」中添加以下代码：

/* 本地加载自定义字体 */
@font-face {
  font-family: 'Fredericka the Great';
  src: url('/wp-content/uploads/fonts/FrederickatheGreat-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

/* 首字下沉核心样式 */
p.has-drop-cap:not(:focus)::first-letter {
  font-family: 'Fredericka the Great', cursive;
  font-size: 3.5em; /* 首字大小，可按需调整 */
  line-height: 0.8; /* 避免首字和其他文字重叠 */
  float: left; /* 实现下沉效果的关键属性 */
  margin-right: 8px; /* 首字与后续文字的间距 */
  margin-top: 4px; /* 首字与行顶的间距，可调整 */
}

方式二：使用在线字体

如果允许加载在线资源，可直接引入字体：

/* 引入在线自定义字体 */
@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap');

/* 首字下沉核心样式 */
p.has-drop-cap:not(:focus)::first-letter {
  font-family: 'Fredericka the Great', cursive;
  font-size: 3.5em;
  line-height: 0.8;
  float: left;
  margin-right: 8px;
  margin-top: 4px;
}

3. 在编辑器中启用首字下沉 #

• 打开文章编辑器，选中需要添加首字下沉的段落块；
• 在右侧「块」面板中找到「高级」选项，在「附加CSS类」输入框中填写 has-drop-cap；
• 更新或发布文章，即可看到效果。

补充：自动给所有文章第一段添加首字下沉 #

如果想让所有文章的第一段自动生效，无需手动添加CSS类，可将首字下沉样式代码替换为：

/* 自动给文章内容的第一个段落添加首字下沉 */
.entry-content > p:first-of-type:not(:focus)::first-letter {
  font-family: 'Fredericka the Great', cursive;
  font-size: 3.5em;
  line-height: 0.8;
  float: left;
  margin-right: 8px;
  margin-top: 4px;
}

内容的提问来源于stack exchange，提问作者nedlud