Cách sử dụng WordPress Customizer để thiết lập Hình nền của một phần trong Genesis

Trong phần nhận xét của Cách sử dụng hình nền có chiều rộng đầy đủ trong khu vực tiện ích Trên cùng Trang chủ của hướng dẫn Enterprise Pro, một người dùng đã hỏi:

Điều này hoàn toàn phù hợp với tôi, nhưng khách hàng của tôi muốn có thể thay đổi hình ảnh tại một thời điểm nào đó và cô ấy sẽ không tải hình ảnh lên thư mục hình ảnh của chủ đề và sửa đổi CSS (ví dụ: thay đổi tên hình ảnh thành bất kỳ hình ảnh mới nào mà cô ấy muốn thay thế cái hiện tại tôi đã đặt). Về cơ bản, cô ấy muốn có thể làm tất cả thông qua bảng widget. Ngoài ra, cô ấy không muốn các dấu chấm lửng hiển thị khi giới hạn ký tự nội dung được đặt. Bạn có thể giúp tôi một trong hai vấn đề này được không? Cảm ơn bạn rất nhiều trước!

Phương pháp được đề xuất để cung cấp cài đặt hoặc tùy chọn trong WordPress là sử dụng Customizer. Trong hướng dẫn này, tôi chia sẻ mã mà tôi đã tổng hợp lại dựa trên loạt bài xuất sắc về Customizer của Tom McFarlin và các ví dụ về mã Customizer trên GitHub.

Trong WordPress Customizer, chúng ta sẽ

  • Thêm ‘chủ Top’ Mục
  • Thêm ‘Trang chủ Lên đầu Background Image’ Thiết đến phần trên
  • Thêm Kiểm soát tải lên hình ảnh ‘Trang chủ Hình nền Trên cùng’ cho cài đặt trên
  • Sử dụng postMessage phương thức truyền tải để cập nhật trực tiếp (không tải lại trang)
  • Chèn hình ảnh do người dùng đặt làm nền để sử dụng hook.div.home-top wp_head

Bước 1

Thêm phần sau vào functions.php của chủ đề con :

/**
* Theme Options Customizer Implementation.
*
* @link http://ottopress.com/2012/how-to-leverage-the-theme-customizer-in-your-own-themes/
*
* @param WP_Customize_Manager $wp_customize Object that holds the customizer data.
*/
function sk_register_theme_customizer( $wp_customize ){

/*
* Failsafe is safe
*/
if ( ! isset( $wp_customize ) ) {
return;
}

/**
* Add 'Home Top' Section.
*/
$wp_customize->add_section(
// $id
'sk_section_home_top',
// $args
array(
'title' => __( 'Home Top', 'theme-slug' ),
// 'description' => __( 'Some description for the options in the Home Top section', 'theme-slug' ),
'active_callback' => 'is_front_page',
)
);

/**
* Add 'Home Top Background Image' Setting.
*/
$wp_customize->add_setting(
// $id
'sk_home_top_background_image',
// $args
array(
'default' => get_stylesheet_directory_uri() . '/images/minimography_005_orig.jpg',
'sanitize_callback' => 'esc_url_raw',
'transport' => 'postMessage'
)
);

/**
* Add 'Home Top Background Image' image upload Control.
*/
$wp_customize->add_control(
new WP_Customize_Image_Control(
// $wp_customize object
$wp_customize,
// $id
'sk_home_top_background_image',
// $args
array(
'settings' => 'sk_home_top_background_image',
'section' => 'sk_section_home_top',
'label' => __( 'Home Top Background Image', 'theme-slug' ),
'description' => __( 'Select the image to be used for Home Top Background.', 'theme-slug' )
)
)
);

}

// Settings API options initilization and validation.
add_action( 'customize_register', 'sk_register_theme_customizer' );

/**
* Writes the Home Top background image out to the 'head' element of the document
* by reading the value from the theme mod value in the options table.
*/
function sk_customizer_css() {
?>
<style type="text/css">
<?php
if ( get_theme_mod( 'sk_home_top_background_image' ) ) {
$home_top_background_image_url = get_theme_mod( 'sk_home_top_background_image' );
} else {
$home_top_background_image_url = get_stylesheet_directory_uri() . '/images/minimography_005_orig.jpg';
}

// if ( 0 < count( strlen( ( $home_top_background_image_url = get_theme_mod( 'sk_home_top_background_image', sprintf( '%s/images/minimography_005_orig.jpg', get_stylesheet_directory_uri() ) ) ) ) ) ) { ?>
.home-top {
background-image: url( <?php echo $home_top_background_image_url; ?> );
}
<?php // } // end if ?>
</style>
<?php
} // end sk_customizer_css

add_action( 'wp_head', 'sk_customizer_css');

/**
* Registers the Theme Customizer Preview with WordPress.
*
* @package sk
* @since 0.3.0
* @version 0.3.0
*/
function sk_customizer_live_preview() {
wp_enqueue_script(
'sk-theme-customizer',
get_stylesheet_directory_uri() . '/js/theme-customizer.js',
array( 'customize-preview' ),
'0.1.0',
true
);
} // end sk_customizer_live_preview
add_action( 'customize_preview_init', 'sk_customizer_live_preview' );

Trong dòng 73, thay thế bằng tên của hình nền mặc định bạn muốn tải lên và hiển thị trong thư mục hình ảnh của chủ đề con.minimography_005_orig.jpg

Bước 2

Tạo một tệp có tên theme-customizer.js trong thư mục js của chủ đề con (tạo nếu không tồn tại) có như sau:

(function( $ ) {
	"use strict";

	// Home Top Background Image - Image Control
	wp.customize( 'sk_home_top_background_image', function( value ) {
		value.bind( function( to ) {
			$( '.home-top' ).css( 'background-image', 'url( ' + to + ')' );
		} );
	});


})( jQuery );

Bước 3

Tham khảo mã trong Enterprise Pro để đăng ký và hiển thị khu vực tiện ích Home Top, sau đó áp dụng các thay đổi tại đây.

Sau đó thay đổi

.home-top {
	background: url("images/picjumbo.com_IMG_6424-1600.jpg") no-repeat;
	border-top: 1px solid #333;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

đến

.home-top {
	/*background-image: url("images/minimography_005_orig.jpg");*/
	background-repeat: no-repeat;
	border-top: 1px solid #333;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}