Tạo breadcrumb cho wordpress không cần plugin

Breadcrumb không ảnh hưởng nhiều đến trải nghiệm người dùng trang của trang web, tuy nhiên nó lại chiếm một phận khá quan trọng trong SEO giúp trang web bạn dễ dàng lên top hơn.

Có rất nhiều plugins hỗ trợ tạo breadcrumb cho wordpress và bạn cũng dễ dàng thao tác chỉ trong vài bước đơn giản. Nhưng khi dùng plugin thì bạn cũng phải đánh đổi đến tốc độ tải trang vì plugin luôn kèm theo hàng loạt javascript cũng như css. Đụng đến tốc độ tải trang thì các SEOer sẽ nhảy dựng lên và chã bao giờ thích cả vì điểm SEO bị ảnh hưởng rất nhiều.

Vì vậy ở bài viết dưới đây hanhtinhcongnghe.com sẽ chia sẻ cho bạn một cách tạo breadcrumb cho wordpress mà không cần phải dùng đến plugin.

Function tạo breadcrumb cho wordpress

Bạn cần tạo một php function để có thể gọi chúng tại bất cứ vị trí nào trên trang web mỗi khi bạn cần hiển thị breadcrumb của mình ở đó. Và dưới đây là tất cả những gì bạn cần cho function tạo breadcrumb của wordpress.

function get_breadcrumbs() {
    $breadcrumbs = array();
    $category_count = 0;
    $parent_arrive = 0;
    if (is_single()) {
        $post_data = get_queried_object();
        $breadcrumbs[$category_count]['id'] = $post_data->ID;
        $breadcrumbs[$category_count]['name'] = $post_data->post_title;
        $category_count++;
        $current_category = get_the_category();
        $current_category_id = $current_category[0]->term_id;
        $category = get_category($current_category_id);
    } else {
        $category = get_category(get_query_var('cat'));
    }
    $breadcrumbs[$category_count]['id'] = $category->term_id;
    $breadcrumbs[$category_count]['name'] = $category->name;
    $category_count++;
    while( $parent_arrive == 0 ) {
        if ($category->category_parent == 0) {
          $parent_arrive = 1;
        } else {
          $breadcrumbs[$category_count]['id'] = $category->category_parent;
          $category = get_category($category->category_parent);
          $breadcrumbs[$category_count]['name'] = $category->name;
        }
      $category_count++;
    }
    $breadcrumbs = array_reverse($breadcrumbs);
    return $breadcrumbs;
}

Nếu bạn nào mới lần đầu tập tành viết theme wordpress mà chưa biết bỏ đoạn code trên ở đâu thì hãy an tâm là bạn sẽ biết ngay sau đây.

Bạn mở file function.php trong theme của bạn lên và nhét đoạn code trên vào dưới cuối cùng của nó rồi lưu lại.

Để gọi và sử dụng function tạo breadcrumb trên thì bạn sử dụng đoạn code sau:

<?php get_breadcrumbs(); ?>

Sử dụng breadcrumb trên wordpress

Sau khi đã có được function breadcrumb như trên, chúng ta gọi chúng và đưa vào layout html để có được đường dẫn breadcrumb đúng ý để hiển thị trên giao diện người dùng.

Bạn sao chép và dán đoạn code bên dưới vào vị trí mà bạn muốn hiển thị đường dẫn breadcrumb cho website.

<div class="breadcrumb">
	<div class="container">
		<div class="breadcrumb-trail">
			<?php $breadcrumbs = get_breadcrumbs(); ?>
			<ol class="breadcrumb-list" itemscope itemtype="http://schema.org/BreadcrumbList">
				<li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
				<a itemprop="item" href="<?php echo site_url(); ?>">
					<span itemprop="name">Home</span>
				</a>
					<meta itemprop="position" content="1" />
					</li>
				<?php foreach ($breadcrumbs as $breadcrumb_index => $breadcrumb) { ?>
				<li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
					<a itemprop="item" href="<?php echo get_category_link($breadcrumb['id']); ?>">
					<span itemprop="name"><?php echo $breadcrumb['name']; ?></span>
					</a>
					<meta itemprop="position" content="<?php echo $breadcrumb_index + 2; ?>" />
				</li>  
				<?php } ?>
			</ol>
		</div>
	</div>
</div>

Tiếp theo để cho đường dẫn breadcrumb hiển thị ngay hàng thẳng lối thì bạn và đẹp hơn thì bạn cần đến sự can thiệp của css.

Bạn cần đặt đoạn css sau vào trong tập tin style.css trong thư mục theme của mình.

.breadcrumb{
	border-bottom: 1px solid rgba(0,0,0,0.1);
    background-color: #ffffff;
    padding: 15px 0;
}
.breadcrumb-list{
	margin:0;
	padding: 0;
}
.breadcrumb-list .breadcrumb-item{
	list-style: none;
    display: inline-block;
}

Cuối cùng bạn đã có được đường dẫn breadcrumb wordpress hoàn chỉnh đáp ứng tốt cho yêu cầu SEO mà không cần sự trợ giúp của các plugin.

Bạn có thể biến hóa và tạo ra cho mình một breadcrumb độc đáo riêng dựa trên những gì đã chia sẽ ở trên hoặc nếu bạn có một cách nào tạo breadcrumb hay hơn đẹp hơn và tốt hơn thì cũng có thể chia sẽ trong phần bình luận để mọi người cùng học hỏi.