Wellness Pro là một chủ đề của Studiopress.com được xắp xếp theo các kiểu layout đa dạng với những widget được sử dụng khác nhau để hiện thị vào các khu vực tương ứng. Khi ta sử dụng theo cách xắp sếp của Wellness Pro trang web của mình sẽ trở lên linh hoạt, bạn có thể cài đặt tối đa 9 kiểu layout riêng cho từng bạn viết hay pages.
Vậy trong viết này tôi sẽ hướng dẫn các bạn làm như thế nào để có thể tạo ra nhiều layout mới cho một trang web mới với cách sử dụng tương tự như Wellness Pro từ đó bạn có thể đa dạng cho trang web của bạn trên bất kỳ child theme.
Bước 1: Thêm những tính năng chính vào functions.php
Thêm tất cả nội dung code bên dưới vào file functions.php trong thưu mục child theme của bạn.
/** * Setup widget counts. * * @param string $id The widget area ID. * @return int Number of widgets in the widget area. */ function custom_count_widgets( $id ) { global $sidebars_widgets; if ( isset( $sidebars_widgets[ $id ] ) ) { return count( $sidebars_widgets[ $id ] ); } } /** * Set the widget class for flexible widgets. * * @param string $id The widget area ID. * @return Name of column class. */ function custom_widget_area_class( $id ) { $count = custom_count_widgets( $id ); $class = ''; if ( 1 === $count ) { $class .= ' widget-full'; } elseif ( 0 === $count % 3 ) { $class .= ' widget-thirds'; } elseif ( 0 === $count % 4 ) { $class .= ' widget-fourths'; } elseif ( 1 === $count % 2 ) { $class .= ' widget-halves uneven'; } else { $class .= ' widget-halves'; } return $class; }
Bước 2: Chúng ta sẽ xây dựng giao diện cho phụ hợp trang web của bạn
Thêm toàn bộ nội dung CSS vào file style.css
/* Flexible Widgets --------------------------------------------- */ .flexible-widgets .wrap { max-width: 1280px; padding: 80px 0 40px; } .flexible-widgets.widget-area .widget { float: left; padding-left: 20px; padding-right: 20px; margin-bottom: 40px; } .flexible-widgets.widget-full .widget, .flexible-widgets.widget-halves.uneven .widget:last-of-type { float: none; width: 100%; } .flexible-widgets.widget-fourths .widget { width: 25%; } .flexible-widgets.widget-halves .widget { width: 50%; } .flexible-widgets.widget-thirds .widget { width: 33.33%; } .flexible-widgets.widget-halves .widget:nth-child(odd), .flexible-widgets.widget-thirds .widget:nth-child(3n+1), .flexible-widgets.widget-fourths .widget:nth-child(4n+1) { clear: left; } @media only screen and (max-width: 1340px) { .flexible-widgets .wrap { max-width: 1220px; } } @media only screen and (max-width: 1200px) { .flexible-widgets .wrap { max-width: 1040px; } } @media only screen and (max-width: 1023px) { .flexible-widgets.widget-fourths .widget, .flexible-widgets.widget-halves .widget, .flexible-widgets.widget-thirds .widget { float: none; width: 100%; } .flexible-widgets .widget { padding-left: 0; padding-right: 0; } }
Bước 3: Đăng ký khu vực widgets
Chép toàn bộ nội dung vào functions.php
// Register home-featured widget area. genesis_register_widget_area( array( 'id' => 'home-featured', 'name' => __( 'Home Featured', 'my-theme-text-domain' ), 'description' => __( 'This is the home featured section.', 'my-theme-text-domain' ), ) );
Bước 4: Thiết lập các layout vào khu vực setting
Tiếp tục dán vào functions.php
add_action( 'genesis_after_header', 'sk_home_featured' ); /** * Display Home Featured widget area below header. */ function sk_home_featured() { // if we are not on the front page, abort. if ( ! is_front_page() ) { return; } genesis_widget_area( 'home-featured', array( 'before' => '<div class="flexible-widgets widget-area' . custom_widget_area_class( 'home-featured' ) . '"><div class="wrap">', 'after' => '</div></div>', ) ); }
Bước 5: Kéo thả các tiện ích vào widgets
Tại Appearance > Widget bạn có thể kéo tất cả các tiện ít linh hoạt vào các vùng widgets để nó hiển thị.
Đó, là những gì bạn cần làm.
Hãy cho tôi biết ý kiến của bạn.
Theo em Genesis mà custom nhiều layout quá cũng không nên.
Đúng vậy, bài viết chỉ dành cho những ai có nhu cầu muốn đa dạng hóa website thôi.
Đây là blog mà em sử dụng nhiều nhất trong thiết kế lại blog cá nhân của mình, trước tiên cảm ơn ad rất nhiều vì có nhiều bài viết bổ ích và áp dụng thành công, tuy nhiên dang định làm layout cho đẹp mà xem bình luận ngần ngại quá nên tạm thôi . ad ngoài lề chút các anh có plugin fixed toc chia sẻ với, hết tk mua mất rồi. hi…hi
Trước tiên cảm ơn bạn đã ghe thăm blog, hằng ngày mình đều viết 2 bài mới về genesis vì vậy bạn cần truy cập blog nhiều hơn để nhận bài chia sẻ mới.
itidea.org xin tặng bạn plugin Fix TOC bạn có thể tuy cập vào đây để download về máy.
Cảm ơn!
Genesis đưa sản phẩm của woocomerce ra trang chủ rất sấu . không biết theme cái này vào theme đưa ra có đẹp không bác nhi?
Genesis bác custom lại CSS là đẹp nha. Với cả thường dùng xây PBN!