javascript - 在 WordPress 帖子中为所有图像设置样式

Question

我正在努力创建一个包含谷歌地图的 WordPress 帖子。帖子中每张图片的主题中都有样式，将宽度设置为 540px。这是通过挤压它们来破坏控件。我需要找到一种方法来更改此帖子的样式。

---

我通过使用 JavaScript 创建样式表来设置帖子的样式，并将正确的值设置为重要值以覆盖图像。这有效，但它使它对所有图像应用最大宽度。

<script>
//used to override the default max width style. If this is remove the control image will be squished into the default max-width set in the clf


var sheet = document.createElement('style')
sheet.innerHTML = "img {max-width:1029px !important;}";
document.body.appendChild(sheet);

</script>

我添加了带有自定义字段的样式。

Answer 1

有两种方法。

更合适的方法是使用外部样式表。如果您查看您的帖子，然后在您选择的开发工具中检查它，您会看到您的帖子内容将被包装在一个包含帖子 ID 作为 html id 的 div 中:

<div id="post-153484" ... ></div>

因此您可以在外部样式表中使用如下样式:

#post-153484 img {max-width:1029px !important;}

或者一种快速而肮脏的方法，但可能不是最好的做事方法是在帖子正文中包含样式。在 wordpress 中编辑帖子时，将 View 更改为 html 模式。

然后在那里添加一些样式:

<style>
    img {max-width:1029px !important;}
</style>