Tùy chỉnh breadcrumbs trong Genesis

Khi website của bạn có nhiều mục, nhiều trang nhỏ thì việc sử dụng breadcrumbs là rất cần thiết. Breadcrumbs sẽ cho người xem biết chính xác vị trí của họ trên website. Nếu bạn đang sử dụng WordPress thì việc tạo một breadcrumbs rất dễ dàng, hầu hết các theme WordPress hiện nay đều hỗ trợ sẵn breadcrumbs. Đặc biệt nếu bạn sử dụng Genesis, bạn có thể cho hiển thị hoặc tắt breadcrumbs rất dễ dàng. Trong bài viết này mình sẽ hướng dẫn các bạn cách kích hoạt hoặc tắt breadcrumbs trong Genesis và một số tùy chỉnh để breadcrumbs đẹp hơn.

Xem thêmTùy chỉnh search form cho Genesis

Breadcrumb trong genesis

Hiển thị breadcrumbs trong Genesis

Để kích hoạt cho breadcrumbs hiển thị ra bên ngoài, ta chỉ cần vào Genesis » Theme Settings, kéo đến mục Breadcrumbs, đánh dấu tick vào các loại trang mà bạn muốn hiển thị breadcrumbs như post, page…rồi click nút Save settings để lưu lại.

kich hoat breadcrumbs

Bây giờ bạn có thể load lại một bài viết để xem breadcrumbs của bạn hiển thị như thế nào. Nếu chưa vừa ý, ta có thể chỉnh sửa lại cho đẹp hơn.

Xem thêmMột số thủ thuật cho Genesis framework

Tùy chỉnh breadcrumbs trong Genesis

Mặc định breadcrumbs của Genesis sẽ có chữ “You are here” ở đầu, ta có thể bỏ chữ này đi hoặc thay bằng chữ khác nếu muốn. Ngoài ra dấu cách ở các tầng mục là dấu “/”, ta có thể thay dấu này bằng dấu “» cho đẹp hơn. Để làm được điều này, bạn chỉ cần thêm đoạn code sau vào file functions.php:

/*Breadcrumbs*/
add_filter( 'genesis_breadcrumb_args', 'raynoblog_breadcrumb' );
function raynoblog_breadcrumb( $args ) {
	$args['home'] = 'Trang chủ ';
	$args['sep'] = ' » ';
	$args['list_sep'] = ', ';
	$args['prefix'] = '<div class="breadcrumb"><div class="wrap">';
	$args['suffix'] = '</div></div>';
	$args['labels']['prefix'] = '<span class="home"></span>';
	return $args;
}

Xem thêmTùy biến post info trong Genesis

Nếu bạn muốn thay đổi màu nền, màu chữ, cở chữ…bạn chỉ cần vào file style.css, chỉnh sửa các thuộc tính của lớp .breadcrumbs, chẳng hạn như:

.breadcrumb {
	background-color: #ffffff;
	font-size: 14px;
	margin: 10px 0px 10px 20px;
	padding: 0px;
}

Xem thêmPrevious post và next post trong genesis

Ngoài ra bạn có thể sáng tạo thêm để breadcrumbs của bạn đẹp hơn. Breadcrumbs không những có thể giúp người xem biết được vị trí của trang để dễ dàng chuyển đổi qua lại mà còn giúp ích cho quá trình SEO website của bạn. Hy vọng bài viết này sẽ giúp bạn tạo được một thanh breadcrumbs đẹp mắt cho website của bạn!

Tùy chỉnh breadcrumbs trong Genesis
5 (100%) 1 vote

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 thấy breadcrumbs mặc định của nó cũng chuẩn rồi, không cần chỉnh sửa gì nhiều

    • Vâng, tùy theo cách nhìn của mỗi người thôi. Nhưng lần sau bác nhớ dùng tên nhé, đừng dùng từ khóa {c27}

  2. Theme Gomedia chỉnh cái này thế nào bác ơi, của em nó toàn là Trang chủ > bài viết luôn, không ra theo thư mucj 🙁

    • Hình như bác dùng theme giống với bác Thachpham phải ko nhỉ? Bác thử hỏi bác ấy xem, em không có dùng theme đó nên cũng không rỏ. Mà lần sau bác nhớ dùng tên khi bình luận nhé {c27}

  3. Mình xài Genesiss nên vào kích hoạt cái là xong

  4. Hoàng :

    Tình hình là mình dùng theme newpaper. Nó có hiện active theme. Bạn cho mình hỏi không active thì có bị sao không ạ.

  5. nam nam :

    Bạn ơi mình thấy bạn tạo cái phần đóng khung xanh trong bài viết của bạn đẹp quá. Cái phần đóng khung thông báo: [Chú ý – WordPress Hosting 1$/tháng – miễn phí tên miền … ] đó. Bạn có thể chia sẽ cách tạo ra cái khung đẹp như của bạn cho mình với được không?

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!