Thêm Home Featured Widget cho Genesis Childtheme không hỗ trợ

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ợ.

home featured widget
Ở đây mình sẽ tạo thêm hai widget area là Home Featured LeftHome 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.

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:

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

#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!

Đánh giá bài viết này

Chú ý - WordPress Hosting 1$/tháng - miễn phí tên miền

Bạn có biết GoDaddy đang có khuyến mãi WordPress hosting chỉ còn 1$/tháng kèm theo một tên miền .COM .NET .ORG miễn phí. Hãy đăng ký ngay để tiết kiệm chi phí nhất nhé.
Xem ngay

ĐĂNG KÝ NHẬN TIN QUA EMAIL

Nếu thấy bài viết trên blog có ích cho bạn, hãy đăng ký nhận tin qua email để cập nhật bài viết mới nhanh nhất và thỉnh thoảng nhận quà bất ngờ!

Comments

  1. Mình mới bắt đầu làm quen với wordpress và genesis
    Cảm ơn bài viết của bạn !

  2. Cảm ơn bài viết rất hay của bạn, chúc bạn vui vẻ

  3. Bạn có thể hướng dẫn làm featured dạng ảnh bài mới trượt ngang không nhỉ

Gửi bình luận

Lưu ý: Không sử dụng keyword để thay cho tên của bạn, hãy sử dụng tên thật. Cảm ơn bạn đã tham gia bình luận trên blog!