Cách thêm thanh trượt trong trang đầu của Minimum Pro

Hướng dẫn này cung cấp các bước để thay thế Backstretch Image trong trang chủ của Minimum Pro bằng thanh trượt Soliloquy (phiên bản thương mại) có chiều rộng đầy đủ.

Bước 1

Cài đặt và kích hoạt Soliloquy.

Tạo một thanh trượt để xuất hiện trên trang chủ và chọn / tải lên các hình ảnh mong muốn của bạn.

Trong tab Cấu hình, đặt Chiều rộng đầy đủ và chỉ định kích thước hình ảnh là 1600 x 512.

Chúng tôi sẽ thiết lập trên các hình ảnh trang chiếu để chúng kéo dài để lấp đầy chiều rộng khung nhìn có sẵn trên các màn hình lớn hơn. Do đó, 1600px là chiều rộng tốt cho hình ảnh.width: 100%

Chiều cao tùy thuộc vào bạn và phụ thuộc vào chiều cao bạn muốn thanh trượt xuất hiện.

Bước 2

Đăng ký khu vực tiện ích con “Thanh trượt Trang chủ” tùy chỉnh.

Thêm phần sau vào cuối functions.php của Minimum Pro :

genesis_register_sidebar( array(
    'id'          => 'home-slider',
    'name'        => __( 'Home Slider', 'minimum' ),
    'description' => __( 'This is the home slider section.', 'minimum' ),
) );

Bước 3

Chỉnh sửa front-page.php của Minimum Pro .

a) Xóa mã tải tập lệnh Backstretch jQuery.

Xóa bỏ:

add_action( 'wp_enqueue_scripts', 'minimum_front_page_enqueue_scripts' );
function minimum_front_page_enqueue_scripts() {

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

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

        //* Enqueue Backstretch scripts
        wp_enqueue_script( 'minimum-backstretch', get_bloginfo( 'stylesheet_directory' ) . '/js/backstretch.js', array( 'jquery' ), '1.0.0' );
        wp_enqueue_script( 'minimum-backstretch-set', get_bloginfo( 'stylesheet_directory' ).'/js/backstretch-set.js' , array( 'jquery', 'minimum-backstretch' ), '1.0.0' );

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

        //* Add custom body class
        add_filter( 'body_class', 'minimum_add_body_class' );

    }

}

Bạn có thể thay phiên chỉ nhận xét add_action dòng như vậy:

// add_action( 'wp_enqueue_scripts', 'minimum_front_page_enqueue_scripts' );

b) Gần cuối tệp,

ngay trên

//* Run the Genesis loop
genesis();

cộng

add_action( 'genesis_after_header', 'add_slider', 7 );
/**
 * Add Home Slider widget area below header.
 */
function add_slider() {
    genesis_widget_area( 'home-slider', array(
        'before'    => '<div class="home-slider widget-area">',
        'after'     => '</div>',
    ) );
}

Bước 4

Thêm phần sau vào style.css của Minimum Pro phía trên phần truy vấn phương tiện:

.home .site-tagline {
    margin-top: 0;
}

@media only screen and (min-width: 1024px) {

    .home-slider {
        margin-top: 60px;
    }

}

.home-slider .soliloquy-container {
    margin-bottom: 0 !important;
}

.home-slider .soliloquy-container .soliloquy-image {
    width: 100%;
}

.soliloquy-container .soliloquy-prev:hover,
.soliloquy-container .soliloquy-next:hover {
    border-bottom: none;
}

Bước 5

Tại Appearance> Widgets, kéo widget Soliloquy vào vùng widget Home Slider.