Xem thêm: Tùy chỉnh search form cho 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.

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êm: Mộ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êm: Tù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êm: Previous 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!

The post Tùy chỉnh breadcrumbs trong Genesis appeared first on Raynoblog.

Xem thêm: tùy chỉnh header cho Genesis Childthemes

Thay đổi vị trí subnav

Mặc định của theme copyblogger thì subnav nằm ngay bên dưới nav menu như hình bên trên. Nếu bạn không muốn đặt subnav nằm tại vị trí đó mà muốn chuyển nó lên đầu trang, chỉ cần sử dụng đoạn code dưới đây chèn vào file functions.php.

/** Relocate subnav */
remove_action( 'genesis_after_header', 'genesis_do_subnav' );
add_action( 'genesis_before_header', 'genesis_do_subnav' );

Kết quả ta sẽ được như thế này:

Bạn có thể làm tương tự nếu muốn đổi vị trí của nav menu, chỉ cần thay subnav bằng nav trong đoạn code trên.

Xem thêm: Top Navigation cho Genesis Childthemes

Tiếp theo, mình sẽ thực hiện các thay đổi cho nav menu, tất cả việc này sẽ thực hiện trên id #nav trong file style.css của childtheme bạn sử dụng. Nếu bạn muốn tùy chỉnh cho subnav menu, chỉ cần thực hiện tương tự với id #subnav.

Đổi màu nền cho nav menu

Tìm lớp #nav  trong file style.css, thay đổi thuộc tính background của lớp này. Chẳng hạn như dưới đây:

#nav {
	clear: both;
	overflow: hidden;
	margin: 0px;
	background: #222222;
	border-top: 1px solid #000;
	border-bottom: 5px solid #ed440d;
}

Kết quả ta được như thế này:

Đổi màu nền và màu chữ cho từng item trên menu

Để đổi màu cho từng mục trên menu, ta thay đổi thuộc tính background và color của lớp #nav li a.

#nav li a {
	background: #333333;
	color: #FFFF00;
	display: block;
	font-size: 13px;
	padding: 5px 17px 5px 15px;
	position: relative;
	text-decoration: none;
}

Bạn có thể thay đổi các thông số của thuộc tính padding và thêm thuộc tính margin vào lớp css trên để thay đổi khoảng các giữa các mục.

Tiếp theo để thay đổi màu của item khi rê chuột và khi click, ta sẽ sửa đổi thuộc tính background và color của các lớp #nav li a:hover, #nav li a:active, #nav .current_page_item a, #nav .current-cat a, #nav .current-menu-item a.

#nav li a:hover,
#nav li a:active,
#nav .current_page_item a,
#nav .current-cat a,
#nav .current-menu-item a {
	background: #006666;
	color: #fff;
}

Và đầy là kết quả đạt được:

Bạn có thể rê chuột lên từng mục để xem màu sắc thay đổi. Bạn cũng có thể tách ra thành nhiều lớp cssriêng biệt nếu muốn màu menu khi rê chuột và khi click khác nhau.

Ngoài ra, bạn có thể thay đổi thuộc tính của các lớp #nav li li a, #nav li ul…để tùy chỉnh cho sub menu nếu muốn. Hy vọng bài viết này sẽ giúp bạn biết cách tùy chỉnh cho menu trong Genesis childthemes theo ý thích của mình. Nếu gặp khó khăn, hãy để lại comment bên dưới bài viết này nhé. Chúc bạn thành công!

The post Tùy chỉnh menu cho Genesis child themes appeared first on Raynoblog.

Thủ thuật này khá đơn giản, trước tiên bạn cũng cần phải xác định được địa chỉ id của thư mục (category) mà bạn muốn hiễn thị trên trang chủ. Cách xác định địa chỉ id của category bạn có thể xem hướng dẫn ở bài viết trước. Ở đây mình hướng dẫn cho các bạn thêm một cách đơn giản hơn để xác định được id của category. Bạn vào mục Posts –>Categories. Trong danh sách các category, để chuột vào thư mục bạn chọn và xem đường link bên dưới sẽ có dạng như thế này:

/wp-admin/edit-tags.php?action=edit&taxonomy=category&tag_ID=2&post_type=post

Bạn đễ ý con số mà mình tô đỏ. Đó chính là id của category đó.

Chọn category bài viết cho trang chủ

Để thiết lập cho trang chủ chỉ hiển thị bài viết thuộc thư mục bạn đã chọn, ta thêm code sau vào file function.php trong childtheme.

add_action( 'pre_get_posts', 'raynoblog_category_posts' );
function raynoblog_category_posts( $query ) {
	if( $query->is_main_query() && $query->is_home() ) {
		$query->set( 'cat', '1' );
	}
}

Bạn chú ý thay số 1 bằng địa chỉ id của thư mục bạn vừa xác định. Nếu cần hiển thị bài viết trong nhiều thư mục khác nhau, bạn có thể thay số 1 bằng 1,2,3..

Loại bỏ category khỏi trang chủ

Nếu blog của bạn có nhiều category nhưng bạn muốn loại bỏ một vài category không cho hiển thị trên trang chủ. Bạn cũng sẽ sử dụng đoạn code ở trên nhưng ở các id của category muốn loại bỏ, ta sẽ thêm vào dấu “-” phía trước. Nghĩa là như thế này:

add_action( 'pre_get_posts', 'raynoblog_category_posts' );
function raynoblog_category_posts( $query ) {
	if( $query->is_main_query() && $query->is_home() ) {
		$query->set( 'cat', '-1,-2' );
	}
}

Với thủ thuật này, bạn có thể dành vị trí quan trọng nhất trên blog cho các bài viết bạn tâm đắc thuộc chủ đề blog, ẩn đi các bài viết kém quan trọng hơn. Chúc bạn thành công!

The post Chọn thư mục bài viết cho trang chủ trong Genesis appeared first on Raynoblog.