内容
- 需要的知识：基本的PHP和CSS
- 需要：WordPress安装，首选文本编辑器
- 项目时间： 10分钟
如果您订阅《 .net》杂志的印刷版（如果没有，为什么不这样做？？），您将看到本月的特刊刊登了一篇出色的文章“使用WordPress进行响应式设计”。
在本文中，作者杰西·弗里德曼（Jesse Friedman）概述了许多真正有用的技术，它们可以充分利用并克服固有的WordPress功能，从而产生一个真正有效的响应式网站。如果您打算使用WordPress创建响应式网站，则绝对应该选择他的文章的副本。这是一本必读的书。
最近使用响应式，移动优先的方法在WordPress上重建了我的个人博客后，我熟悉了本文介绍的一些技术。但是，对我而言真正突出的一项是Jesse通过jQuery启用流畅图像的方法。
WordPress和“流体图像”的问题
我敢肯定，大家都知道“流体图像”-使用最大宽度：100％-要求图像没有固定的宽度或高度，以便它们可以缩放到其容器的大小。不幸的是，WordPress会自动计算从媒体库生成的图像的尺寸，并将相应的width和height属性添加到任何img>标签。
这对于提高页面渲染速度非常有用，但是会引发 大量的 由于图像尺寸不再受其容器尺寸的限制，因此在创建响应式布局时，需要使用扳手。
那是个问题。
非jQuery解决方案
杰西（Jesse）在他的文章中建议，一旦加载，就使用jQuery从页面上所有img>标记中删除width和height属性。这当然可以，但是在构建我的网站时，我不喜欢依靠JavaScript来实现这一点的想法，尤其是当相关页面上有很多图像时。
这就是WordPress过滤器进行救援的地方。
WordPress Codex将过滤器定义为：
“ ...希望WordPress启动后才能修改各种类型的文本，然后再将其添加到数据库或发送到浏览器屏幕。”
事实证明，这正是我们所需要的。通过设置一个筛选器以在所有图像都呈现在页面上之前作为最终动作运行，我们可以使用PHP删除width和height属性，从而避免了通过JavaScript进行（可能）昂贵的DOM操作的需求。
编码
- /**
- *响应式图像功能
- */
- add_filter（‘post_thumbnail_html’，‘remove_thumbnail_dimensions’，10）；
- add_filter（'image_send_to_editor'，'remove_thumbnail_dimensions'，10）;
- 函数remove_thumbnail_dimensions（$ html）
- $ html = preg_replace（’/（width
在上面的代码中，我们使用add_filter函数添加了两个过滤器。第一个参数是我们要挂接到的过滤器，第二个参数指定了在调用过滤器时要运行的函数。
在我们的代码中，我们陷入了两个晦涩的功能：
- post_thumbnail_html –使用 post_thumbnail（）
- image_send_to_editor –将图像添加到编辑器
然后，我们使用正则表达式从图像标签中删除width和height属性。现在，当我们将图像发送到浏览器时，它们可以完全“流畅”，就像Marcotte先生告诉我们的那样。
告白
我不得不承认曾经有过使用 add_filter 删除我一生中无法找到的属性，以找到要插入的正确WordPress过滤器。
经过大量搜索之后，我终于在Nathaniel Taintor的Wordpress Stack Exchange上找到了这篇非常有用的文章，其中提供了有关我需要的两个过滤器的信息。
注意事项
据我所知，这种方法的主要缺点是它不会从您网站上的所有图像中删除width和height属性。我发现这是个问题，尤其是WordPress在评论中使用的Gravatar图片。
如果有人有解决此问题的方法，请务必发表评论，以便我们都能从中受益。
我希望这是有用的，并演示了一种依靠JavaScript在WordPress网站上实现“流体图像”的替代方法。
词：大卫·史密斯
戴夫·史密斯（Dave Smith）是位于英国巴斯市附近的前端设计师。当他不从事新颖有趣的网络项目时，他会在从大乐队爵士乐团到交响乐团的各种乐曲中扮演小号。您可以在Twitter上通过@get_dave跟上Dave。
