WEB开发网
开发学院CMS教程其它CMS 让WordPress的发挥 很好的响应图像 阅读

让WordPress的发挥 很好的响应图像

 2012-04-23 08:58:33 来源:WEB开发网   
核心提示: WordPress和“流体图像”的问题 正如我敢肯定,你都知道流体图像 -使用最大宽度:100% -要求图像有没有固定的宽度或高度,让WordPress的发挥 很好的响应图像,他们可以扩展到其容器的大小,不幸的是,所以我们都可以受益, 我希望这是有益的,WordPress会自动计算出从媒体库中

 WordPress和“流体图像”的问题

 
正如我敢肯定,你都知道流体图像 -使用最大宽度:100% -要求图像有没有固定的宽度或高度,他们可以扩展到其容器的大小。不幸的是,WordPress会自动计算出从媒体库中生成的图像的尺寸,并增加了相应的宽度和高度属性的任何<img>标签。
 
这是伟大的网页渲染速度,但它抛出一个庞大的工程扳手,当它来创建响应布局,图像尺寸不再限制其容器的大小。
 
这是一个问题。
 
非jQuery的解决方案
 
杰西在他的文章“使用jQuery删除页面上的所有<img>标签的宽度和高度属性,一旦它已载入。这当然可以,但建立我的网站时,我不喜欢依赖于JavaScript来实现这一想法,尤其是如果发生问题的网页上有很多的图像。
 
这是WordPress的过滤器来救援。
 
WordPress的法典定义一个过滤器:
 
“......挂钩的WordPress推出之前修改各种类型的文本,将它添加到数据库中,或发送到浏览器屏幕。”
 
事实证明,这正是我们需要。通过建立一个过滤器上运行的最后行动之前,他们在页面上呈现所有图片,我们可以使用PHP来删除的宽度和高度属性,从而规避需要(潜在的)昂贵的DOM操纵通过JavaScript。
 
代码
 
查看源代码
复制代码
 
/ **
 *响应的图像功能
 * /
 
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函数( '/(宽度|高度)= \“ \ D * \“ \ S /' ,“” , HTML美元);
        返回 $ HTML ;
}
在上述代码中,我们添加两个滤波器使用add_filter功能。第一个参数是我们要挂钩到过滤器,和我们要运行时,过滤器被称为第二个指定的功能。
 
在我们的代码挂接到两个晦涩的功能:
 
post_thumbnail_html -图像检索post_thumbnail()
 image_send_to_editor -图像添加到编辑器
然后,我们使用正则表达式删除的宽度和高度属性从图像标记。现在,当我们的图像发送到浏览器,它们可以是完全的“流体”,就像先生Marcotte告诉我们,他们应。
 
供认
 
我不得不承认曾使用的概念add_filter移除属性,我不能为我的生活中找到正确的WordPress过滤器挂接到。
 
很多的搜索后,我终于遇到了这个非常有用的职位, 对 Wordpress 堆栈交易所由纳撒尼尔Taintor提供了约两个过滤器,我需要的信息。
 
注意事项
 
据我所知的唯一重大的借鉴这种方法是,它不会删除您的网站上所有图片的宽度和高度属性。我发现这是一个问题,比较特别的gravatar图像WordPress的使用意见。
 
如果任何人有一个解决这个问题,请发表评论,所以我们都可以受益。
 
我希望这是有益的,并表现出依赖于JavaScript来实现在WordPress网站的“流体图像”的替代方法。

Tags:WordPress 发挥 响应

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接