Nền video cho phần Trang trước 1 của Showcase Pro

Trong phần nhận xét của Nền video trong Infinity Pro, một người dùng đã hỏi:

Xin vui lòng Bạn có thể cho tôi biết làm thế nào để làm điều tương tự trên chủ đề giới thiệu chuyên nghiệp?

Hướng dẫn này cung cấp các bước để hiển thị video nền trong khu vực tiện ích anh hùng (trang đầu 1) của Showcase Pro.

Bước 1

Cài đặt và kích hoạt plugin Video Background.

Bước 2

Tạo một Trang có tiêu đề nói Home ,.

Cuộn xuống phần “Nền video”.

Nhập #front-page-1 cho Vùng chứa.

Tải lên phiên bản mp4 và webm của video và hình ảnh dự phòng (sẽ xuất hiện ở vị trí của video trên máy tính bảng và điện thoại di động).

Bước 3

Tại Setting> Reading, đặt Home làm trang đầu tĩnh.

Bước 4

a) Phiên bản hiện tại của chủ đề xuất ra #front-page-1 và hai lần trên giao diện người dùng..front-page-1

Trong front-page.php :

<div id="front-page-1" class="front-page-1 page-header bg-primary <?php echo $background_image_class; ?>" <?php echo $background_image; ?>>
    <div class="wrap">
        <?php

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

        ?>
    </div>
</div>

Hãy sửa lỗi này. Thay đổi

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

đến

genesis_widget_area( 'front-page-1', array(
    'before' => '<div class="widget-area">',
    'after'  => '</div>',
) );

b) Trong showcase-pro / inc / entry-grid-shortcode.php không được thực thi vì nó xuất hiện sau đó .wp_reset_query(); ob_get_clean()

Điều này sẽ dẫn đến việc toàn cầu $ post không được đặt lại sau khi shortcode được bật lên (được sử dụng trong khu vực widget của Front Page 5 cho mỗi bản demo chủ đề) khiến Video Background và các plugin khác dựa trên siêu dữ liệu tùy chỉnh này không hoạt động.[entry-grid]

Để khắc phục lỗi này và thực hiện các cải tiến mã khác trong tệp đó, hãy thay thế toàn bộ mã của nó bằng

/**
 * Showcase Pro
 *
 * This file adds the entry grid shortcode to the Showcase Pro Theme.
 *
 * @package Showcase
 * @author  Bloom
 * @license GPL-2.0+
 * @link    http://my.studiopress.com/themes/showcase/
 */

// Add Entry Grid Shortcode
add_shortcode( 'entry-grid', 'showcase_entry_grid_shortcode' );
function showcase_entry_grid_shortcode( $atts ) {

    extract( shortcode_atts( array(
        'limit'          => -1,
        'category'       => '',
        'name'           => '',
        'type'           => 'page',
        'id'             => get_the_ID(),
    ), $atts ) );

    $args = array(
        'post_type'      => $type,
        'post_parent'    => ($type === 'post') ? '' : $id,
        'posts_per_page' => $limit,
        'category_name'  => $category,
        'order'          => 'ASC',
        'orderby'        => 'menu_order',
        'paged'          => get_query_var( 'paged' ),
    );

    $loop = new WP_Query( $args );

    ob_start();

    $i = 0;

    while ( $loop->have_posts() ) {

        $loop->the_post();

        $classes = ($i % 4 == 0) ? 'one-fourth first' : ' one-fourth';
        ?>
            <div id="post-<?php the_ID(); ?>" <?php post_class($classes) ?>>
                <a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'showcase' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark">
                    <div class="overlay">
                        <div class="overlay-inner">
                            <div class="overlay-details">
                                <?php the_title( '<h4>', '</h4>' );?>
                            </div>
                        </div>
                    </div>
                    <?php if(has_post_thumbnail()) : the_post_thumbnail( 'showcase_entry_grid' ); endif; ?>
                </a>
            </div>
        <?php

        $i++;

    }

    wp_reset_postdata();

    $output = ob_get_clean();

    if ( $output ) {
        return '<div class="showcase-entry-grid">' . $output . '</div>';
    }

}

Có thể thấy sự khác biệt giữa tệp gốc và tệp đã thay đổi ở trên ở đây.

Bước 5

Đi tới Trình tùy chỉnh> Hình ảnh tiêu đề trang trước.

Đặt hình ảnh thành hình ảnh bìa video của bạn.