wordpress中统一文章内图片格式

发布于 3 天前 建站笔记 527 字 预计阅读时间: 2 分钟


AI 摘要

想要让WordPress文章中的图片统一美观?只需简单几步,轻松掌控图片宽度与格式!揭秘统一图片格式的秘密,让你的文章瞬间提升格调!
内容纲要

有时文章中的图片大小宽度不一会影响美观,研究下怎么统一图片宽度。

步骤 1: 确定你的WordPress主题用于包裹文章正文的CSS选择器

  1. 打开你的WordPress博客,进入任意一篇博客文章页面。
  2. 在浏览器中,右键点击文章正文中的任意一张图片,然后选择“检查”或“检查元素”(根据浏览器不同)。
  3. 在开发者工具中,你会看到HTML结构。向上滚动DOM树,找到一个 div、article 或 section 元素,它清晰地包裹了整篇文章的正文内容(不包括标题、作者信息、评论区等)。
  4. 记下这个元素的 class 属性(例如 class="entry-content" 或 class="post-content")。如果有多个类,通常取最有代表性的那一个。如果没有类,检查父级是否有 id 属性。

步骤2:修改你的CSS代码

  • 通过WordPress自定义器 (Customizer) 添加
  • 登录到你的WordPress后台。
  • 前往 外观 (Appearance) -> 自定义 (Customize)。
  • 在左侧菜单中找到 额外 CSS (Additional CSS)。
  • 将以下CSS代码粘贴到文本框中。
  • 点击 发布 (Publish) 保存更改。

代码

/* 针对WordPress博客正文区域内的未自定义格式的图片生效 */
.entry-content img:not([style]) {
  width: 97%; /* 把图片放大到显示区域的97% */
  display: block; /* 将图片设置为块级元素,以便使用 margin: auto 居中 */
  margin: 0 auto; /* 水平居中图片 */
  border-radius: 10px; /* 添加圆角效果,你可以调整这个值 */
}

注意:不要直接修改父主题的 style.css 文件,因为主题更新会覆盖你的修改。

需要自定义格式的图片请自定义style,如

<img src="示例图片.png" style="width: 15px;height:14px" />

图片题注

<center style="font-size:14px;color:#C0C0C0;text-decoration:underline">题注</center>

图片题注(更新去首行缩进)

<center class="no-indent-block" style="font-size:14px;color:#C0C0C0;text-decoration:underline">题注</center>