让WordPress与响应式图像一起玩得很好

  • 知识需要:基本的PHP和CSS
  • 需要:WordPress安装,首选文本编辑器
  • 项目时间: 10分钟

如果你订阅了.net杂志的印刷版(如果没有,为什么不订购!?),你会看到它这个月的问题有一篇关于“使用WordPress进行响应式设计”的精彩文章。

在文章中,作者杰西弗里德曼概述了一大堆非常有用的技术,可以充分利用和克服固有的WordPress功能,从而生成真正有效的响应式网站。如果你想用WordPress制作一个响应式网站,你一定要拿起他的文章的副本。这是必读的。

最近我使用响应式移动优先方法在WordPress上重建了我的个人博客,我熟悉了本文中介绍的一些技术。然而,真正脱颖而出的一个项目是Jesse通过jQuery启用流体图像的方法。

WordPress和“流畅图像”的问题

因为我相信你们都知道'流体图像' - 使用最大宽度:100% - 要求图像没有固定的宽度或高度,以便它们可以缩放到其容器的大小。不幸的是,WordPress会自动计算从媒体库生成的图像的尺寸,并将相应的宽度和高度属性添加到任何图像标签。

这对于页面渲染速度很有用,但它会抛出一个大规模的扳手在工作中涉及到创建响应式布局,因为图像尺寸不再受限于其容器的大小。

那是个问题。

非jQuery解决方案

在他的文章中,Jesse'建议使用jQuery删除所有的宽度和高度属性加载后页面上的标签。这当然有效,但在构建我的网站时,我不喜欢依靠JavaScript来实现这一点的想法,特别是如果页面上有很多图像。

这是哪里WordPress过滤器来救援。

WordPress Codex将过滤器定义为:

“......在将数据添加到数据库或将其发送到浏览器屏幕之前,WordPress会启动以修改各种类型的文本。”

事实证明这正是我们所需要的。通过设置一个过滤器在所有图像上运行作为最终动作然后在页面上呈现之前,我们可以使用PHP来删除width和height属性,从而避免了通过JavaScript进行(可能)昂贵的DOM操作的需要。

代码

  1. / **
  2. *响应图像功能
  3. * /
  4. add_filter('post_thumbnail_html','remove_thumbnail_dimensions',10);
  5. add_filter('image_send_to_editor','remove_thumbnail_dimensions',10);
  6. function remove_thumbnail_dimensions($ html){
  7. $ html = preg_replace('/(width | height)= \“\ d * \”\ s /',“”,$ html);
  8. Return $ Html;
  9. }

在上面的代码中,我们使用了添加两个过滤器的add_filter功能。第一个参数是我们想要挂钩的过滤器,第二个参数指定我们想要在调用过滤器时运行的函数。

在我们的代码中,我们挂钩了两个不起眼的函数:

  1. Post_thumbnail_html- 用图片检索的图像Post_thumbnail()
  2. image_send_to_editor- 添加到编辑器的图像

然后我们使用正则表达式从图像标签中删除width和height属性。现在,当我们的图像被发送到浏览器时,它们可以像Marcotte先生告诉我们的那样完全“流畅”。

坦白

我必须承认有使用的想法的add_filter删除属性,我不能为我的生活找到正确的WordPress过滤器挂钩。

经过大量的搜索,我终于遇到了这个非常有用的帖子Wordpress堆栈交换通过纳撒尼尔泰恩托它提供了我需要的两个过滤器的信息。

注意事项

据我所知,这种方法的唯一主要缺点是它不会从您网站上的所有图像中删除宽度和高度属性。我发现这是一个问题,特别是WordPress在评论中使用的Gravatar图像。

如果有人对这个问题有解决方案,请留下评论,这样我们都可以受益。

我希望这是有用的,并展示了依赖JavaScript在WordPress网站上实现“流畅图像”的替代方案。

话:大卫史密斯

Dave Smith是位于英国巴斯美丽城市附近的前端设计师。当他没有开展新的令人兴奋的网络项目时,他可以发现从Big Band爵士乐团到Symphony乐团的各种小号。你可以在Twitter上跟上Dave@get_dave

话题



翻译字数超限