$content_width in WordPress Theme

WordPress主题中经常出现一个叫做$content_width的变量，这个变量是做什么用的？这个变量有三个用途，本文将一一介绍。

使用方法

通常，在主题的functions.php开头，会有这样一段代码，以默认主题twenty twelve为例

/**
 * Sets up the content width value based on the theme's design and stylesheet.
 */
if ( ! isset( $content_width ) )
	$content_width = 625;

这段代码将$content_width设置为625像素，这个宽度将在三个地方发挥作用

作用一：控制后台编辑器全屏显示时内容区域的宽度

按照twenty twelve的设置，全屏显示编辑器时，宽度应该是645像素，考虑到padding，再增加22像素，总宽度为647像素，如下图所示。

这个区域允许的最大$content_width是800像素，设置超过800的数值是无效的。

作用二：可以覆盖图片尺寸中的large size

如果主题定义了$content_width，且媒体设置中的large size宽度大于$content_width，large size的宽度会被$content_width覆盖掉。上传大图时，large_size会采取$content_width的尺寸。

例如媒体设置中large size宽度设为1024，$content_width定义为625，上传一张宽度超过1000像素的图片，结果如下

作用三： 控制autoembed产生的视频宽度

WordPress的autoembed功能允许用户直接插入视频网站（例如YouTube）的视频url，就可以自动获取embed代码，在post中显示视频播放界面。

通常，autoembed产生的媒体宽度在后台设置->媒体中管理，当然到了WordPress 3.5， embed这一项从媒体管理中移除了，唯一可以控制视频尺寸的方法就是通过定义$content_width。

条件化设置内容宽度

不同的模版内容区域宽度也不同，例如全宽度的模版就比普通模版的内容区域宽一些，需要条件化设置。例如，twentytwelve主题中是这样设置全宽度模版的$content_width的

function twentytwelve_content_width() {
	if ( is_page_template( 'page-templates/full-width.php' ) || is_attachment() || ! is_active_sidebar( 'sidebar-1' ) ) {
		global $content_width;
		$content_width = 960;
	}
}
add_action( 'template_redirect', 'twentytwelve_content_width' );

注意，这个$content_width只能影响autoembed的尺寸，对编辑器和图片上传没有影响。

结语

可见，$content_width并非一个可有可无的东西，它可以更好的将网站内容表现出来（适应主题的图片和视频尺寸），一个完整的主题应该设置一个合适的$content_width