Tạo Breadcrumbs cho trang WordPress mà không dùng Plugin
Breadcrumbs là một thành phần không thể thiếu cho những trang có hệ thống menu đồ sộ. Nó giúp người dùng dễ dàng di chuyển đến những trang mà họ muốn. Đồng thời cũng là một công cụ để SEO, giúp bạn tăng khả năng tìm kiếm trên Google. Bài viết này sẽ nhằm vào những bạn có đam mê lập trình, muốn tự tay tạo cho mình những chức năng cho web của mình. Còn nếu bạn nào muốn sử dụng plugin thì có thể tham khảo BreadCrumb NavXT.
Chúng ta sẽ tiến hành chèn breadcrumbs vào trang WordPress của mình theo các bước sau đây:
Bước 1 : Mở file functions.php nằm trong folder theme của bạn. Sau đó copy và dán đoạn code sau vào bên trong nó :
<?php
function wp_bac_breadcrumb()
{
$delimiter = '<span> » </span>';
$delimiter1 = '<span> • </span>';
$main = 'Home';
$maxLength= 30;
$arc_year = get_the_time('Y');
$arc_month = get_the_time('F');
$arc_day = get_the_time('d');
$arc_day_full = get_the_time('l');
$url_year = get_year_link($arc_year);
$url_month = get_month_link($arc_year,$arc_month);
if (!is_front_page())
{
echo '<div>';
global $post, $cat;
echo 'You are here: <a href="' . $homeLink . '">' . $main . '</a>' . $delimiter;
if (is_single())
{
$category = get_the_category();
$num_cat = count($category);
if ($num_cat <=1)
{
echo get_category_parents($category[0], true,' ' . $delimiter . ' ');
echo ' ' . get_the_title();
}
else
{
echo the_category( $delimiter1, multiple);
if (strlen(get_the_title()) >= $maxLength)
{
echo ' ' . $delimiter . trim(substr(get_the_title(), 0, $maxLength)) . ' ...';
}
else
{
echo ' ' . $delimiter . get_the_title();
}
}
}
elseif (is_category())
{
echo 'Archive Category: "' . get_category_parents($cat, true,' ' . $delimiter . ' ') . '"' ;
}
elseif ( is_tag() )
{
echo 'Posts Tagged: "' . single_tag_title("", false) . '"';
}
elseif ( is_day())
{
echo '<a href="' . $url_year . '">' . $arc_year . '</a> ' . $delimiter . ' ';
echo '<a href="' . $url_month . '">' . $arc_month . '</a> ' . $delimiter . $arc_day . ' (' . $arc_day_full . ')';
}
elseif ( is_month() )
{
echo '<a href="' . $url_year . '">' . $arc_year . '</a> ' . $delimiter . $arc_month;
}
elseif ( is_year() )
{
echo $arc_year;
}
elseif ( is_search() )
{
echo 'Search Results for: "' . get_search_query() . '"';
}
elseif ( is_page() && !$post->post_parent )
{
echo get_the_title();
}
elseif ( is_page() && $post->post_parent )
{
$post_array = get_post_ancestors($post);
krsort($post_array);
foreach($post_array as $key=>$postid)
{
$post_ids = get_post($postid);
$title = $post_ids->post_title;
echo '<a href="' . get_permalink($post_ids) . '">' . $title . '</a>' . $delimiter;
}
the_title();
}
elseif ( is_author() )
{
global $author;
$user_info = get_userdata($author);
echo 'Archived Article(s) by Author: ' . $user_info->display_name ;
}
elseif ( is_404() )
{
echo 'Error 404 - Not Found.';
}
else
{
}
echo '</div>';
}
}
?>Bước 2 : Các bạn tìm đến file header.php cũng nằm cùng vị trí với file funcitons.php và dán đoạn code sau vào bên trong nó :
<?php
if (function_exists('wp_bac_breadcrumb'))
{
wp_bac_breadcrumb();
}
?>Các bạn chú ý là các bạn có thể dán đoạn code trên nằm ở vị trí nào mà các bạn muốn breadcrumbs được hiển thị.
Bước 3 : Tạo css cho breadcrumbs.
Việc tạo breadcrumbs coi như đã xong, bây giờ chúng ta chỉ cần chèn thêm vài hiệu ứng css cho nó chạy mượt là được. Các bạn có thể copy đoạn code sau vào style.css trong folder theme của bạn.
.breadcrumb{
width:645px;
float:left;
padding:0 0 0 47px;
margin:9px 0 0 0;
font-size:90%;
clear:both;
}
.delimiter{
color:#000;
background-color:inherit;
}
.delimiter1{
color: #627FC3;
background-color:inherit;
}nguồn: thuthuatweb
