Chào các bạn, hôm nay mình sẽ giới thiệu thêm một thủ thuật nữa dành cho các bạn sử dụng Genesis. Như các bạn có thể thấy trong một số childtheme của Genesis có thêm khu vực widget ở phía dưới menu thường gọi là Home Featured Widget. Một số childtheme khác lại không hỗ trợ, chẳng hạn như childtheme mình đang sử dụng. Hôm nay mình sẽ hướng dẫn các bạn bổ sung thêm Home Featured Widget vào các childtheme không hỗ trợ.
Ở đây mình sẽ tạo thêm hai widget area là Home Featured Left và Home Featured Right.
Đăng ký thêm widget area
Để đăng ký hay nói cách khác là tạo thêm hai widget area, ta sẽ theme đoạn code sau vào file functions.php trong childtheme.
|
1 2 3 4 5 6 7 8 9 10 |
genesis_register_sidebar( array( 'id' => 'home-featured-left', 'name' => __( 'Home Featured Left', 'raynoblog' ), 'description' => __( 'Khu vực home featured left.', 'raynoblog' ), ) ); genesis_register_sidebar( array( 'id' => 'home-featured-right', 'name' => __( 'Home Featured Right', 'raynoblog' ), 'description' => __( 'Khu vực home featured right', 'raynoblog' ), ) ); |
Sau khi đã thêm code trên, bạn vào trang quản lý widget sẽ thấy xuất hiện thêm hai khu vực widget có tên là Home Featured Left và Home Featured Right. Bạn có thể thêm các widget bạn muốn vào hai khu vực này.
Hiện Home Featured Widget ra ngoài
Ta tiếp tục theme code sau vào file functions.php trong childtheme:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
add_action( 'genesis_before_content', 'home_featured_widget_area'); function home_featured_widget_area() { if ( is_home() ) { echo '<div id="home-featured">'; echo '<div class="home-featured-left">'; dynamic_sidebar( 'home-featured-left' ); echo '</div><!-- end .home-featured-left -->'; echo '<div class="home-featured-right">'; dynamic_sidebar( 'home-featured-right' ); echo '</div><!-- end .home-featured-right -->'; echo '<div style="clear:both;"></div></div>'; }} |
Với code này thì Home Featured Widget chỉ xuất hiện ở trang chủ. Nếu bạn muốn nó xuất hiện ở nhiều trang khác thì có thể sửa lại điều kiện của hàm if.
Và cuối cùng, để cho đẹp hơn, ta có thể theme một số lớp css vào file style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
#home-featured { margin: 10px; padding: 10px; border: 5px solid #fff; } .home-featured-left { float: left; width: 480px; border: 5px solid #fff; } .home-featured-right { float: right; width: 480px; border: 5px solid #fff; } .home-featured-left h4, .home-featured-right h4 { text-align: center; font-weight: bold; } |
Và như vậy là childtheme của bạn đã được bổ sung thêm Home Featured Widget rồi đấy. Có vấn đề gì thắc mắc bạn hãy để lại comment bên dưới mình sẽ giải đáp nếu có thể.
Chúc bạn thành công!
