除了使用$ content_width进行图像优化之外,还有什么更好的选择?


14

$content_widthWordPress中的GLOBAL通过限制图片大小和嵌入帖子的大小来影响许多主题,甚至影响某些插件,这是将主题提交给wordpress.org的要求。

通过使用以下命令设置:

$content_width = 584; // Twenty Twelve example

如果在帖子中插入大图像(默认为1024x1024),则会导致:

src="../wp-content/uploads/2013/02/IMG_1390-1024x682.jpg" width="584" height="328"

相反,如果您删除此全局设置并插入实际图像大小,则对其进行设置add_image_size将导致:

src="../wp-content/uploads/2013/02/IMG_13901-584x328.jpg" width="584" height="328" 

在包含多个图像的页面中,删除全局图像并插入大图像(这是非常常见的)通常会节省超过2倍的内存,我发现页面加载时节省了数百KB

使用add_image_size和删除插入全尺寸图像的功能不是更好的选择吗?

ps。我在这里用更准确的数据写过


1
这听起来像是出现在wp-hackers邮件列表上的东西。
eddiemoya

Answers:


7

请记住,$content_width全局不仅用于图像,而且还用于视频等嵌入式对象。因此,任何解决方案都将不仅仅是放弃$content_width自身使用/支持的情况。

通常,主题将以几种方式限制内容区域图像:

  1. 图像尺寸:定义$content_width适合主题设计的内容
  2. 原始/完整图像尺寸:定义CSS规则,#content img { max-width: XXX; height: auto; }以确保插入的完整尺寸图像不会破坏布局
  3. 缩略图图像大小:调用set_post_thumbnail_size()以定义“特色图像/张贴缩略图”默认thumbnail大小。(注意:我个人不建议使用此方法。为功能图像定义特定于给定位置的自定义图像尺寸,然后通过调用特定模板位置中的自定义尺寸the_post_thumbnail( $size )。)

正如您所发现的那样,由于WordPress选择中间图像大小以用于任何给定图像请求的方式,该请求可能会导致浏览器缩放图像。

大图像的主题定义值

一种选择是重新定义大图像尺寸的设置。(请谨慎操作。这对您自己的网站来说很好,但是与用户配置设置混淆的公开分发的主题最多是...灰色区域。)

大图像尺寸设置存储为:

$large_image_width = get_option( 'large_size_w' );
$large_image_height = get_option( 'large_size_h' );

因此,您可以根据自己的值设置这些值$content_width

global $content_width;
update_option( 'large_size_w', $content_width );
update_option( 'large_size_h', $content_width );

(当然,您需要对此进行一些故障保护/错误检查。)

删除选项以插入全尺寸图像

如果您只是想阻止用户插入完整尺寸的图像(再次:请谨慎操作;这可能是插件领域),则可以过滤'image_size_names_choose'

function wpse86950_filter_image_size_names_choose( $possible_sizes ) {
    unset( $possible_sizes['full'] );
    return $possible_sizes;
}
add_filter( 'image_size_names_choose', 'wpse86950_filter_image_size_names_choose' );

再说一遍:您可能要在此处添加一些可靠的故障保护,因为此过滤器在多个地方使用。

为全幅图像定义自定义图像尺寸

与上一个选项相关,您可以定义'full-post-width'图像尺寸:

global $content_width;
add_image_size( 'full-post-width', $content_width, $content_width, false );

然后,将其添加到可用选项列表中:

function wpse86950_filter_image_size_names_choose( $possible_sizes ) {
    // Unset full image size
    unset( $possible_sizes['full'] );
    // Add full-post-width image size
    $possible_sizes['full-post-width'] = 'Full Post Width';
    // Return array
    return $possible_sizes;
}
add_filter( 'image_size_names_choose', 'wpse86950_filter_image_size_names_choose' );

感谢Chip提供的全面答案,我没有考虑过设置get_option值。其余部分与我在链接中链接的gist.github.com/wycks/4949242所使用的gist相似。如果更改了主题,它似乎也确实是如何实际缩放的灰色区域。
Wyck

我也忘记提及删除$content_width或不设置它,默认情况下它仍会应用于我认为的嵌入式对象。
Wyck

image_size_names_choose直到现在都没有看到该过滤器!我一直在替换整个字段,直到现在获得自定义尺寸。这是3.5芯片中的新功能吗?
sanchothefat

我认为这是自3.3版本以来的事,我一直在使用它制作add_image_size多语言标签,然后我认为将其用于此图像尺寸问题也将是一件好事。如果不需要本地化,则可以将其涂抹到数组中,而不必对其进行硬编码。
Wyck

@sanchothefat我不确定何时添加它。好像Wyck说的是3.3吗?当我需要扩展/修改某些内容时,我总是喜欢查看源代码,并发现已为该特定内容添加了过滤器。:)
Chip Bennett

2

是的,我想是这样。为了解决$content_width提交给仓库的主题问题,我使用选项过滤器来强制选择我为设计选择的大小。

add_filter( 'option_large_size_w', function( $opt ) { return 1024; } );
add_filter( 'option_large_size_h', function( $opt ) { return 0; } );
add_filter( 'option_embed_size_w', function( $opt ) { return 1024; } );
add_filter( 'option_embed_size_h', function( $opt ) { return 0; } );
// ...etc...
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.