Hướng dẫn đa dạng hóa Layout cho genesis

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.