对于很多主题,比如我目前所使用的DUX是不提供网站整体背景设置的,而默认的灰色背景显然不能满足很多站长想要折腾的那颗心,针对这一问题网上有各种各样的教程教给大家如何为网站更换背景,其实并没有那么麻烦,WordPress默认隐藏了很多功能,很多主题的开发也大都是通过引用这些功能函数来精简代码的,这次给大家介绍的自定义背景功能就是其中一个。

开启自定义背景

开启自定义背景功能的方式很简单,我们只需要在主题的functions.php文件夹中加入下面的代码即可在WordPress后台“外观”选项卡下看到一个“背景”的选项,通过点击该选项我们即可进入自定义界面定义我们自己的网站背景,你可以自定义背景颜色也可以选择一张背景图片作为网站的整体背景,需要注意的是WordPress默认会以平铺的方式显示图片,这就需要我们选择的图片具有可重复性。

//WordPress添加自定义背景功能 
add_custom_background();

为了方便大家对这个短代码的理解,这里贴上WordPress对 add_custom_background(); 函数的定义,函数的位置位于WordPress程序 /wp-includes/deprecated.php 文件中,大家可自行查看。

/**
 * Add callbacks for background image display.
 *
 * @since 3.0.0
 * @deprecated 3.4.0 Use add_theme_support()
 * @see add_theme_support()
 *
 * @param callable $wp_head_callback Call on the {@see 'wp_head'} action.
 * @param callable $admin_head_callback Call on custom background administration screen.
 * @param callable $admin_preview_callback Output a custom background image div on the custom background administration screen. Optional.
 */
function add_custom_background( $wp_head_callback = '', $admin_head_callback = '', $admin_preview_callback = '' ) {
	_deprecated_function( __FUNCTION__, '3.4.0', 'add_theme_support( \'custom-background\', $args )' );
	$args = array();
	if ( $wp_head_callback )
		$args['wp-head-callback'] = $wp_head_callback;
	if ( $admin_head_callback )
		$args['admin-head-callback'] = $admin_head_callback;
	if ( $admin_preview_callback )
		$args['admin-preview-callback'] = $admin_preview_callback;
	return add_theme_support( 'custom-background', $args );
}

/**
 * Remove custom background support.
 *
 * @since 3.1.0
 * @deprecated 3.4.0 Use add_custom_background()
 * @see add_custom_background()
 *
 * @return null|bool Whether support was removed.
 */
function remove_custom_background() {
	_deprecated_function( __FUNCTION__, '3.4.0', 'remove_theme_support( \'custom-background\' )' );
	return remove_theme_support( 'custom-background' );
}

设置背景图片

使用上述代码添加上自定义背景的功能后我们即可在“外观”选项卡下看到“背景”这一选项,点击该按钮即可跳转至自定义设置面板,我们可以选择设置一个背景色或者一个背景图片,对于背景色的设置只需要选择一个颜色即可,没有什么需要特别说明的,主要来说一下背景图片的设置。

背景图像:选择移除或更换图像按钮即可更改背景图像。

预设:包含默认,填满屏幕、适合屏幕、重复以及自定义5个选项,大家可自行选择体验下各种预设的效果。

图片位置:确定图片中心与网页中心的相对位置。

图片尺寸:包含原始、填满屏幕、适合屏幕3个选项。自定义模式下还需要确定图片是否重复以及图片是否随网页上下滚动。