Home / Wordpress / Hướng dẫn thêm breadcrumb vào website wordpress

Hướng dẫn thêm breadcrumb vào website wordpress

Hướng dẫn thêm breadcrumb vào website wordpress
Hướng dẫn thêm breadcrumb vào website wordpress

Hướng dẫn thêm breadcrumb vào website wordpress

  1. Giới Thiệu về thêm breadcrumb

    1. 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
    2. 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.
  2. Cách thêm breadcrumb vào website

    1. 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>';
      }
      
    2. 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à.

    3. 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é!

  3. Đô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é.

About admin

congdongblog.com và congdongshop.com là một nhé mọi người, trang website đều do admin là Nguyễn Trung Thông sở hữu và quản lý, với đam mê CNTT , trang này dùng để chia sẽ kinh nghiệm những gì mình có, những gì mình làm được lên đây cho mọi người cùng học nhé, có gì sai sót mọi người bỏ qua nhé

Bạn Chưa biết ?

Code Thêm Alt Và Title Hình Ảnh Sản Phẩm

Code Thêm Alt Và Title Hình Ảnh Sản Phẩm

Code Thêm Alt Và Title Hình Ảnh Sản Phẩm Chào các bạn, mình hôm nay …

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Đánh giá facebook