Theo mặc định Trang chủ có một khu vực tiện ích cho Văn bản Chào mừng. Bài viết này sẽ hướng dẫn cách tạo một vùng widget mới trên trang chủ và hiển thị các đoạn giới thiệu 3 cột trong vùng đó.
Bước 1: Đăng ký khu vực widget mới “Home Top”. Thêm mã sau vào tệp functions.php của bạn:
//* Register home top widget area genesis_register_sidebar( array( 'id' => 'home-top', 'name' => __( 'Home Top', 'whitespace' ), 'description' => __( 'This is the home top section will come below the banner image.', 'whitespace' ), ) );
Bước 2: Điều hướng Trang tổng quan> Giao diện> Tiện ích và 6 Tiện ích Văn bản trong Khu vực Tiện ích Trên cùng Trang chủ. Xem SS:
Bước 3: Kết nối khu vực widget trên cùng trang chủ sau tiêu đề trang web. Mở tệp front-page.php và thêm đoạn mã sau vào trên hàm genesis () .
// Hook home top widget area after site header
add_action( 'genesis_after_header', 'whitespace_home_top_widget_area' );
function whitespace_home_top_widget_area() {
genesis_widget_area( 'home-top', array(
'before' => '<div class="home-top-section" id="home-top-section">',
'after' => '</div>',
) );
}
Bước 4: Đây là bước cuối cùng. Thêm CSS sau vào tệp style.css của bạn:
/* # Home Top Section
---------------------------------------------------------------------- */
.home-top-section {
display: inline-block;
padding: 40px 40px 20px;
}
.home-top-section .widget {
float: left;
margin-left: 2.5641%;
margin-bottom: 10px;
padding: 40px 20px;
text-align: center;
width: 31.6239%;
}
.home-top-section .widget:nth-of-type(3n+1){
clear: left;
margin-left: 0;
}
.home-top-section .widget .widgettitle {
color: #232323;
font-size: 26px;
margin: 0 0 22px;
}
.home-top-section .dashicons, .home-top-section .dashicons-before:before{
font-size: 35px;
line-height: 35px;
height: 35px;
margin-bottom: 25px;
width: 35px;
}
.home-top-section a.button{
background: none;
border: 2px solid #00a99d;
color: #00a99d;
padding: 10px 30px;
}
.home-top-section .widget:hover{
background: #f5f5f5;
}
.home-top-section a.button:hover{
background: #00a99d;
color: #FFF;
}
/* Media Queries
---------------------------------------------------------------------------------------------------- */
@media only screen and (min-width: 681px) and (max-width: 767px) {
.home-top-section .widget {
width: 48.717%;
}
.home-top-section .widget:nth-of-type(3n+1) {
clear: none;
margin-left: 2.5%;
}
.home-top-section .widget:nth-of-type(2n+1) {
clear: left;
margin-left: 0;
}
}
@media only screen and (max-width: 680px) {
.home-top-section .widget {
float: none;
margin-left: 0;
width: 100%;
}
}