Trước tiên, hãy tải lên tệp backstretch.js và theme-script.js trong thư mục js của chủ đề con của bạn.
Đây là tập lệnh của tệp theme-script.js
jQuery(function( $ ){ $( "main.content .post .entry-image" ).each( function(){ var post_image = $(this).data( "entry-img" ); $(this).backstretch([BackStretchImg]=post_image,{duration:3000,fade:750}); }); });
Thêm mã sau vào tệp functions.php của bạn:
add_action( 'wp_enqueue_scripts', 'enqueue_bs_script' ); function enqueue_bs_script() { wp_enqueue_script( 'backstretch-js', get_bloginfo( 'stylesheet_directory' ) . '/js/backstretch.js', array( 'jquery' ), '1.0.0' ); wp_enqueue_script( 'theme-script-js', get_bloginfo( 'stylesheet_directory' ) . '/js/theme-script.js', array( 'backstretch-js' ), '1.0.0' ); } add_action('get_header', 'backstretch_featured_image'); function backstretch_featured_image(){ // Loading Backstretch Featured image on Home, blog or archive pages if( is_home() || is_page_template('page_blog.php') || is_archive() ) : // Removing Default featured image remove_action( 'genesis_entry_content', 'genesis_do_post_image', 8 ); // Adding Featured image above the Post Title add_action( 'genesis_entry_header', 'genesis_do_bs_post_image', 6 ); endif; } function genesis_do_bs_post_image(){ $img = genesis_get_image( array( 'format' => 'src', 'size' => "full", 'context' => 'archive', 'attr' => array ( 'class' => 'alignnone post-image' ) ) ); if ( $img ) echo '<div class="entry-image" data-entry-img="'. home_url() . $img.'"></div>' . "\n"; }
Thêm một dòng CSS này vào tệp style.css của bạn
div.entry-image{ height: 400px; }