Hướng dẫn thêm breadcrumb vào website wordpress
-
Giới Thiệu về thêm breadcrumb
- Breadcrumbs là gì?
là một đường dẫn anchor text, thường nằm ở đầu trang web . Đường dẫn anchor text này giúp người truy cập website dễ dàng biết được họ đang ở đâu, và các Breadcrumbs này có thể nhấp vào để có thể quay về trang trước cấp cao hơn.
vidu: Home >> tin tức >> blog1 - Cộng dụng khi thêm Breadcrumb vào website .
Breadcrumb là công cụ hỗ trợ SEO góp phần không hề nhỏ giúp thúc đẩy tăng trưởng của website. Nó không chỉ giúp người truy cập biết họ đang ở nơi nào của website mà còn giúp Google nhanh chóng hiểu rõ cấu trúc website.
- Breadcrumbs là gì?
-
Cách thêm breadcrumb vào website
- Bạn vào function của theme bạn thêm đoạn code phí dưới vào website
function the_breadcrumb() { echo '<ul id="crumbs">'; if (!is_home()) { echo '<li><a href="'; echo get_option('home'); echo '">'; echo 'Trang chủ'; echo "</a></li>"; if (is_category() || is_single()) { echo '<span>›</span><li>'; the_category (' </li><li> '); if (is_single()) { echo "</li><span>›</span><li>"; the_title(); echo '</li>'; } } elseif (is_page()) { echo '<span>›</span><li>'; echo the_title(); echo '</li>'; } } elseif (is_tag()) {single_tag_title();} elseif (is_day()) {echo"<li>Archive for "; the_time('F jS, Y'); echo'</li>';} elseif (is_month()) {echo"<li>Archive for "; the_time('F, Y'); echo'</li>';} elseif (is_year()) {echo"<li>Archive for "; the_time('Y'); echo'</li>';} elseif (is_author()) {echo"<li>Author Archive"; echo'</li>';} elseif (isset($_GET['paged']) && !empty($_GET['paged'])) {echo "<li>Blog Archives"; echo'</li>';} elseif (is_search()) {echo"<li>Search Results"; echo'</li>';} echo '</ul>'; }
- Bạn vào nhét vào thêm đoạn code này vào vị trí bạn muốn hiện Breadcrumb.
<div class="duong_dan_breadcrumb"><?php the_breadcrumb(); ?></div>
Vậy là bạn có thể hoàn thành xong bài Hướng dẫn thêm breadcrumb vào website wordpress này rồi. cũng khá đơn giản mà.
- Các bạn cần css lại nhé, chứ nội dung của nó chỉ hiện lên cho các bạn thấy thôi, chứ nó không có hiện chuẩn cho các bạn đâu,Đối với bạn không biết code có thể lấy css của mình add vào style css theme của ban nhé
.duong_dan_breadcrumb { display: block; overflow: hidden; margin: 0; background: #dedede; margin-bottom: 5px; padding-top: 5px; padding-left: 20px; } .duong_dan_breadcrumb li a{ display: inline-block; white-space: nowrap; font-size: 16px; color: #288ad6; padding: 0 10px 0 0; } .duong_dan_breadcrumb li{ display: inline-block; vertical-align: middle; overflow: hidden; font-size:16px } ul#crumbs{ margin-bottom: 0px; } .duong_dan_breadcrumb span{ display: inline-block; font-size: 17px; color: #999; line-height: 1; padding-right: 7px; } header.archive-page-header { display: none; }
Lưu lại và chiêm ngưỡng kết quả nhé!
- Bạn vào function của theme bạn thêm đoạn code phí dưới vào website
-
Đôi lời cuối của admin
– Các bạn có thắc mắc gì thì liên hệ mình nhé thông qua website: congdongblog.com của mình nhé, mình sẽ hỗ trợ hết mình. hoặc liên hệ qua congdongshop.com
– Các bạn có thể vào like panfage facebook của mình, hoặc click theo giõi trang của mình để có thêm nhiều thông tin hơn nhé, cảm ơn các bạn . Chào các bạn nhé!
– Hãy để lại bình luận phía dưới mình sẽ hỗ trợ bạn nhiều hơn nhé.