Cách thêm hỗ trợ cho nền tùy chỉnh trong CPTs

Thủ thuật WordPress
#1

Nếu bạn muốn thêm hỗ trợ cho Nền tùy chỉnh mở rộng trong các mục nhập đơn lẻ của Loại bài đăng tùy chỉnh, giả sử các sản phẩm WooCommerce thêm phần sau vào functions.php của chủ đề con của bạn :

// add support for custom background to single WooCommerce product pages
add_post_type_support( 'product', 'custom-background' );

Lưu ý: Nếu bạn đang sử dụng chủ đề như Agency Pro sử dụng Backstretch để hiển thị hình ảnh nền (giống nhau) trên toàn trang web, bạn có hai tùy chọn để hiển thị nền cụ thể CPT duy nhất:

  1. Để loại trừ các mục nhập sản phẩm WooCommerce sử dụng hình nền trên toàn trang web thông qua Backstretch, trong functions.php thay thế
	//* Load scripts only if custom backstretch image is being used
	if ( ! empty( $image ) ) {

		wp_enqueue_script( 'agency-pro-backstretch', get_bloginfo( 'stylesheet_directory' ) . '/js/backstretch.js', array( 'jquery' ), '1.0.0' );
		wp_enqueue_script( 'agency-pro-backstretch-set', get_bloginfo( 'stylesheet_directory' ).'/js/backstretch-set.js' , array( 'jquery', 'agency-pro-backstretch' ), '1.0.0' );

		wp_localize_script( 'agency-pro-backstretch-set', 'BackStretchImg', array( 'src' => str_replace( 'http:', '', $image ) ) );
	
	}

với

	//* Load scripts only if custom backstretch image is being used
	if ( ! empty( $image ) ) {

		if ( is_singular( 'product' ) ) {
			return;
		}

		wp_enqueue_script( 'agency-pro-backstretch', get_bloginfo( 'stylesheet_directory' ) . '/js/backstretch.js', array( 'jquery' ), '1.0.0' );
		wp_enqueue_script( 'agency-pro-backstretch-set', get_bloginfo( 'stylesheet_directory' ).'/js/backstretch-set.js' , array( 'jquery', 'agency-pro-backstretch' ), '1.0.0' );

		wp_localize_script( 'agency-pro-backstretch-set', 'BackStretchImg', array( 'src' => str_replace( 'http:', '', $image ) ) );

	}

Giờ đây, bạn có thể đặt hình nền dành riêng cho sản phẩm và cài đặt trong hộp meta ‘Nền tùy chỉnh’ sẽ hoạt động trên các trang sản phẩm.

hoặc,

  1. Để chuyển hình nền tùy chỉnh vào Backstretch, trong functions.php thêm
if ( is_singular( 'product' ) ) {
	$image = get_background_image();
}

phía dưới

$image = get_option( 'agency-backstretch-image', sprintf( '%s/images/bg.jpg', get_stylesheet_directory_uri() ) );

Giờ đây, hình ảnh nền dành riêng cho sản phẩm có thể được đặt nhưng cài đặt trong hộp meta ‘Nền tùy chỉnh’ sẽ KHÔNG hoạt động trên các trang sản phẩm. Thay vào đó, hình ảnh sẽ được hiển thị toàn màn hình / kéo dài qua Backstretch.