Nếu bạn đã sử dụng theme genesis để làm trang web cho việc tối ưu hóa SEO thì đó là điều tuyệt vời, nhưng trong đó theme genesis cũng có một số hạn chế nhất định trong việc tạo một trang landing page nó sẽ không hiển thị được full chiều rộng, điều này gây rất khó chịu, không những thế còn ảnh hưởng đến việc bạn muốn chuyền tải thông điệp đến khách hàng.
Bài viết này tôi sẽ hướng dẫn các bạn cách làm thế nào để tạo một trang landing page full chiều rộng màn hình, khắc phục lỗi không hiển thị hết chiều rộng trong theme genesis.
Rất nhiều trang web tôi thiết kế đều có giao diện full màn hình.
Trong khi đó mặc định của genesis theme rất nhiều thẻ div không cần thiết cho việc xây dựng một trang đích (landing page) như .site-inner .wrap, .content-sidebar-wrap, .content, .entry….
Chúng ta có thể loại bỏ các thẻ div để chúng không chiếm bất kỳ không gian nào trên trang landing page và sau đó chép tất cả nội dung trang web trước hoặc sau nó.
Hướng dẫn tạo landing page Full Width cho theme genesis
Bước 1: Tạo một file mới landing-page.php
Nếu có rồi thì thôi.genesis() chức năng đó thực sự làm gì? Nếu bạn nhìn vào /genesis/lib/framework.php, bạn sẽ thấy điều này. Để tóm tắt, nó gọi get_header(), sau đó xây dựng khu vực nội dung chính, sau đó gọi get_footer().
Trên các trang như những mô tả ở trên, tôi chỉ muốn tiêu đề và chân trang và sau đó tôi sẽ chăm sóc của khu vực nội dung chính. Vì vậy, tôi bắt đầu với một tệp khuôn mẫu trông như sau:
/**
* EA Genesis Child.
*
* @package EAGenesisChild
* @since 1.0.0
* @copyright Copyright (c) 2014, Contributors to EA Genesis Child project
* @license GPL-2.0+
*/
// Remove 'site-inner' from structural wrap
add_theme_support( 'genesis-structural-wraps', array( 'header', 'footer-widgets', 'footer' ) );
/**
* Add the attributes from 'entry', since this replaces the main entry
*
* @author Bill Erickson
* @link http://www.billerickson.net/full-width-landing-pages-in-genesis/
*
* @param array $attributes Existing attributes.
* @return array Amended attributes.
*/
function be_site_inner_attr( $attributes ) {
// Add a class of 'full' for styling this .site-inner differently
$attributes['class'] .= ' full';
// Add an id of 'genesis-content' for accessible skip links
$attributes['id'] = 'genesis-content';
// Add the attributes from .entry, since this replaces the main entry
$attributes = wp_parse_args( $attributes, genesis_attributes_entry( array() ) );
return $attributes;
}
add_filter( 'genesis_attr_site-inner', 'be_site_inner_attr' );
// Build the page
get_header();
do_action( 'be_content_area' );
get_footer();Tôi đang xoá ‘Nội dung bên trong trang web‘ khỏi lớp div bọc kết cấu không cần thiết vì nội dung của tôi bên trong .site-inner và các phần tử đó sẽ có khu vực của riêng .wrap.
Bạn chỉ phải làm điều này nếu bạn đã xác định các kết cấu kết hợp bạn muốn genesis theme của bạn và bao gồm ‘Nội dung bên trong trang web‘.
Nếu bạn không có hàm add_theme_support( ‘structural-wraps’ ); trong child theme của mình, Genesis sẽ xóa tất cả mọi thứ loại trừ .site-inner (xem trong /genesis/lib/init.php, dòng 63). Vì vậy, bạn có thể để lại phần này, nhưng có thể bạn sẽ muốn điều chỉnh cách hiển thị của thẻ .site-inner.
Trong theme Genesis, họ đã loại trừ việc bọc cấu trúc thẻ .site-inner nhưng áp dụng một chiều rộng tối đa trên .site-inner. Bạn muốn trang này có chiều rộng 100%, do đó, chỉnh sửa các div của bạn cho phù hợp.
Toàn bộ code Full Width trong theme genesis
Chép toàn bộ code dán vào landing-page.php trong thư mục child theme./**
* EA Genesis Child.
*
* @package EAGenesisChild
* @since 1.0.0
* @copyright Copyright (c) 2014, Contributors to EA Genesis Child project
* @license GPL-2.0+
*/
/**
* Home Rotator
*
*/
function be_home_rotator() {
$slides = get_post_meta( get_the_ID(), 'be_slide', true );
if( $slides ) {
echo '<div class="home-rotator"><div class="wrap"><div class="flexslider"><ul class="slides">';
for( $i = 0; $i < $slides; $i++ ) {
$image = wp_get_attachment_image( get_post_meta( get_the_ID(), 'be_slide_' . $i . '_image', true ), 'be_slide' );
$title = esc_attr( get_post_meta( get_the_ID(), 'be_slide_' . $i . '_title', true ) );
$button_link = esc_url( get_post_meta( get_the_ID(), 'be_slide_' . $i . '_button_link', true ) );
if( $title ) {
if( $button_link )
$title = '<a href="' . $button_link . '">' . $title . '</a>';
$title = '<h2>' . $title . '</h2>';
}
$content = get_post_meta( get_the_ID(), 'be_slide_' . $i . '_content', true );
$button_text = esc_attr( get_post_meta( get_the_ID(), 'be_slide_' . $i . '_button_text', true ) );
$button = $button_text && $button_link ? '<p><a href="' . $button_link . '" class="button">' . $button_text . '</a></p>' : '';
$bg = get_post_meta( get_the_ID(), 'be_slide_' . $i . '_bg', true );
$class = $bg ? 'slide-caption white-bg' : 'slide-caption';
echo '<li>' . $image . '<span class="caption-wrapper"><span class="' . $class . '">' . $title . wpautop( $content ) . $button . '</span></span></li>';
}
echo '</ul></div></div></div>';
}
}
add_action( 'be_content_area', 'be_home_rotator' );
// Remove 'site-inner' from structural wrap
add_theme_support( 'genesis-structural-wraps', array( 'header', 'footer-widgets', 'footer' ) );
/**
* Add attributes for site-inner element, since we're removing 'content'.
*
* @param array $attributes Existing attributes.
* @return array Amended attributes.
*/
function be_site_inner_attr( $attributes ) {
// Add a class of 'full' for styling this .site-inner differently
$attributes['class'] .= ' full';
// Add the attributes from .entry, since this replaces the main entry
$attributes = wp_parse_args( $attributes, genesis_attributes_entry( array() ) );
return $attributes;
}
add_filter( 'genesis_attr_site-inner', 'be_site_inner_attr' );
// Build the page
get_header();
do_action( 'be_content_area' );
get_footer();