Hiển thị thanh vị trí breadcrumbs trong WordPress

Với các bạn thiết kế web thì quá là quen với thanh vị trí breadcrumbs đúng không nào. Breadcrumbs là tập hợp các links cho thấy được vị trí của trang đang xem. Breadcrumbs rất tốt cho người sử dụng cũng như SEO. Làm cho người dùng đang ở đâu trong website bạn.

Bất kỳ một website nào cũng cần có thanh vị trí breadcrumbs này, bậy giờ mình sẽ hướng dẫn các bạn triển khai nó trên WordPress.

Mình xin giới thịu hai cách để bạn thực hiện điều này:

Hiển thị thanh breadcrumbs bằng plugin

WordPress hỗ trợ cho chúng ta cài đặt plugin, và cộng đồng cho ta một kho tàng plugin thì không có lý gì k có plugin chức năng cần thiết này. Bạn vào http://wordpress.org/extend/plugins/breadcrumb-navxt/ để download về cài đặt và sử dụng.

Viết hàm hiển thị breadcrumbs trong WordPress

Cách này không bít hay hơn dùng plugin không tuy nhiên mình viết code chắc sướng hơn nhìu so với xài của người khác.

Bạn vào file functions.php trong theme đang sử dụng copy đoạn code sau vào:

<!--
<?php
if ( ! function_exists( 'bcdonline_breadcrumbs' ) ) :
	/**
	 * Prints HTML.
	 */
	function bcdonline_breadcrumbs() {
		$delimiter = '';
		$name = 'Trang chủ'; //text for the 'Home' link
		$currentBefore = '<span class="current">';
		$currentAfter = '</span>';
		echo '<span class="tip">.:BCDOnline:</span>';
	 
		global $post;
		$home = get_bloginfo('url');
	   
		if(is_home() && get_query_var('paged') == 0) 
			echo '<span class="home">' . $name . '</span>';
		else
			echo '<a class="home" href="' . $home . '">' . $name . '</a> '. $delimiter . ' ';
	 
		if ( is_category() ) {
			global $wp_query;
			$cat_obj = $wp_query->get_queried_object();
			$thisCat = $cat_obj->term_id;
			$thisCat = get_category($thisCat);
			$parentCat = get_category($thisCat->parent);
			if ($thisCat->parent != 0) echo(get_category_parents($parentCat, TRUE, ' ' . $delimiter . ' '));
			echo $currentBefore;
			single_cat_title();
			echo $currentAfter;
	 
		} elseif ( is_single() ) {
		  $cat = get_the_category(); $cat = $cat[0];
		  echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
		  echo $currentBefore;
		  the_title();
		  echo $currentAfter;
	 
		} elseif ( is_page() && !$post->post_parent ) {
		  echo $currentBefore;
		  the_title();
		  echo $currentAfter;
	 
		} elseif ( is_page() && $post->post_parent ) {
		  $parent_id  = $post->post_parent;
		  $breadcrumbs = array();
		  while ($parent_id) {
			$page = get_page($parent_id);
			$breadcrumbs[] = '<a href="' . get_permalink($page->ID) . '">' . get_the_title($page->ID) . '</a>';
			$parent_id  = $page->post_parent;
		  }
		  $breadcrumbs = array_reverse($breadcrumbs);
		  foreach ($breadcrumbs as $crumb) echo $crumb . ' ' . $delimiter . ' ';
		  echo $currentBefore;
		  the_title();
		  echo $currentAfter;
	 
		} elseif ( is_search() ) {
		  echo $currentBefore . 'Search for ' . get_search_query() . $currentAfter;
	 
		} elseif ( is_tag() ) {
		  echo $currentBefore;
		  single_tag_title();
		  echo $currentAfter;
	 
		} elseif ( is_author() ) {
		   global $author;
		  $userdata = get_userdata($author);
		  echo $currentBefore. $userdata->display_name . $currentAfter;
	 
		} elseif ( is_404() ) {
		  echo $currentBefore . 'Error 404' . $currentAfter;
		}
	 
		if ( get_query_var('paged') )
		  echo $currentBefore . __('Page') . ' ' . get_query_var('paged') . $currentAfter;
	}
endif;
?>
-->

Sau đó lưu lại bây giờ sẽ gọi hàm hiển thị breadcrumbs lên. Thường thì chúng sẽ có trong tất cả các trang trừ trang chủ ra, nếu bạn hiển thị lun ở trang chủ thì sẽ để nó vào file header.php. Nếu trừ trang chủ ra thì bạn phải để vào từng trang thôi hii… xem bài sơ lược về theme wordpress để hệ thống các file nên để vào.

Code gọi hàm như sau:

<!--
<div id="breadcrumb" class="container_12 breadcrumb">
    <?php bcdonline_breadcrumbs(); ?>
</div> 
-->

Sau đó chỉ cần style css lại cho đẹp là OK. Đây là kết quả.

Breadcrumbs trong wordpress

Breadcrumbs trong wordpress

Kết luận: Để hiển thị thanh breadcrumbs trong wordpress có nhiều cách viết, cách viết trên chưa hẳn đã tối ưu các bạn có thể tự mò theme nha! Chúc thành công.

VN:F [1.9.22_1171]
Rating: 10.0/10 (3 votes cast)
Hiển thị thanh vị trí breadcrumbs trong WordPress, 10.0 out of 10 based on 3 ratings
Share This