Thêm phần hình ảnh mới vào chủ đề Genesis Workstation Pro

Thật dễ dàng để thêm một phần hình nền mới bổ sung vào chủ đề con của Genesis Workstation Pro. Bạn sẽ cần chỉnh sửa một vài tệp, vì vậy hãy làm theo các bước trong hướng dẫn tùy chỉnh chủ đề Genesis này một cách cẩn thận.

Lưu bản sao của các tệp gốc trước khi bạn bắt đầu chỉnh sửa và đảm bảo rằng bạn có quyền truy cập FTP, trong trường hợp xảy ra sự cố.

Bước 1. Chỉnh sửa output.php

Tìm trong /workstation-pro/lib/output.php và tìm dòng 19. Đó là:
$opts = apply_filters( 'workstation_images', array( '1', '2' ) );
Thêm '3', vì vậy dòng 19 là:
$opts = apply_filters( 'workstation_images', array( '1', '2', '3' ) );

Bước 2. Chỉnh sửa tùy chỉnh.php

Tìm trong /workstation-pro/lib/customize.php và tìm dòng 37. Đó là:
$images = apply_filters( 'workstation_images', array( '1', '2' ) );
Thêm '3' một lần nữa, vì vậy dòng 37 là:
$images = apply_filters( 'workstation_images', array( '1', '2', '3' ) );

Bước 3. Chỉnh sửa front-page.php

Bạn sẽ cần thực hiện hai thay đổi đối với front-page.php.

1. Thêm dòng này, gần đầu của hàm.

$image_section_3 = get_option( '3-workstation-image', sprintf( '%s/images/bg-3.jpg', get_stylesheet_directory_uri() ) );

2. Thêm phần hình ảnh 3 sau genesis_widget_area. Tôi đã thêm nó sau trang đầu-1, cho hướng dẫn này.

	if ( ! empty( $image_section_3 ) ) {
		echo '<div class="image-section-3"></div>';
	}

Đây là toàn bộ hàm để thay thế trong front-page.php. Bạn vẫn cần giữ các dòng khác trong front-page.php; điều này chỉ thay thế chức năng.

<?php //Don't add this line

function workstation_front_page_widgets() {

	$image_section_1 = get_option( '1-workstation-image', sprintf( '%s/images/bg-1.jpg', get_stylesheet_directory_uri() ) );

	$image_section_2 = get_option( '2-workstation-image', sprintf( '%s/images/bg-2.jpg', get_stylesheet_directory_uri() ) );

	$image_section_3 = get_option( '3-workstation-image', sprintf( '%s/images/bg-3.jpg', get_stylesheet_directory_uri() ) );

	if ( ! empty( $image_section_1 ) ) {	
		echo '<div class="image-section-1"></div>';	
	}

	genesis_widget_area( 'front-page-1', array(
		'before' => '<div id="front-page-1" class="front-page-1"><div class="flexible-widgets widget-area wrap' . workstation_widget_area_class( 'front-page-1' ) . '">',
		'after'  => '</div></div>',
	) );

	if ( ! empty( $image_section_3 ) ) {
		echo '<div class="image-section-3"></div>';
	}

	genesis_widget_area( 'front-page-2', array(
		'before' => '<div id="front-page-2" class="front-page-2"><div class="flexible-widgets widget-area wrap' . workstation_widget_area_class( 'front-page-2' ) . '">',
		'after'  => '</div></div>',
	) );

	genesis_widget_area( 'front-page-3', array(
		'before' => '<div id="front-page-3" class="front-page-3"><div class="flexible-widgets widget-area wrap' . workstation_widget_area_class( 'front-page-3' ) . '">',
		'after'  => '</div></div>',
	) );

	if ( ! empty( $image_section_2 ) ) {
		echo '<div class="image-section-2"></div>';
	}

	genesis_widget_area( 'front-page-4', array(
		'before' => '<div id="front-page-4" class="front-page-4"><div class="flexible-widgets widget-area wrap' . workstation_widget_area_class( 'front-page-4' ) . '">',
		'after'  => '</div></div>',
	) );

}

Bước 4. Chỉnh sửa style.css

Bạn cần thực hiện ba chỉnh sửa đối với style.css để thêm image-section-3.

Thay vì chỉnh sửa style.css của mình, bạn có thể thêm các kiểu vào Giao diện> Tùy chỉnh> CSS bổ sung.

1. Cái đầu tiên gần dòng 1565; chỉnh sửa, vì vậy nó trông giống như:

.image-section-1,
.image-section-2,
.image-section-3 {
    background-position: top;
    background-size: cover;
    min-height: 500px;
}

2. Thứ hai là để @media only screen and (max-width: 1220px). Tìm và thêm image-section-3.

@media only screen and (max-width: 1220px) {

    .image-section-1,
    .image-section-2,
    .image-section-3 {
        min-height: 400px;
    }
}

3. Thứ ba là để @media only screen and (max-width: 880px). Tìm và thêm image-section-3.

@media only screen and (max-width: 880px) {
    .image-section-1,
    .image-section-2,
    .image-section-3 {
        min-height: 200px;
    }
}

Lưu tất cả những thay đổi đó và tải các tệp đã chỉnh sửa lên thư mục chủ đề của bạn. Đảm bảo thêm output.php và custom.php vào thư mục / lib /.

Bước 5. Thêm hình ảnh mới

Bây giờ bạn có thể tìm trong Quản trị viên WordPress của mình. Nhấp vào Giao diện> Tùy chỉnh và sau đó chọn “Hình nền Trang trước”. Bây giờ bạn sẽ thấy tùy chọn tải lên hình ảnh thứ ba. Thêm nó và nhấp vào nút Lưu & Xuất bản màu xanh lam.

Đây là những gì nó sẽ giống như:

Nếu bạn không nhìn thấy hình ảnh mới 3 hoặc hình ảnh 1 và 2, bạn có thể xóa tất cả hình ảnh, nhấp vào nút Lưu & Xuất bản, sau đó thêm lại hình ảnh và Lưu & Xuất bản.

Nếu bạn thử điều này, xin vui lòng cho tôi biết nó đã diễn ra như thế nào!

Hướng dẫn này dựa trên câu trả lời của tôi cho một câu hỏi trên diễn đàn StudioPress.