WP笔记

$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像素的图片,结果如下

上传图片,large size受到了$content_width的制约

作用三: 控制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