Tùy biến Breadcrumb cho genesis theme [wordpress]

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Tùy biến Breadcrumb cho genesis theme [wordpress]

Bạn cũng đều có thể thiết lập tùy biến breadcrumb cho genesis hơn là sử dụng mặc định. Cho phép breadcrumbs chỉ hiển thị trên một số page bằng cách truy cập vào Genesis > theme settings.

tùy biến breadcrumb cho genesis

Bạn có thể tùy chỉnh cách thức hiển thị breadcrumbs sử dụng filters. Sử dụng filters trong genesis để sửa đổi cài đặt hoặc template là cách dễ nhất và tốt nhất trong số framework như woocommerce,..bạn không nên sửa trực diện các files trong framework. Nếu như cập nhật framework/plugin sẽ mất toàn bộ các thay đổi mà bạn thiết lập trước đó. Trong bài này mình sử dụng các đoạn code trong theme functions.php

Breadcrumbs được thiết kế ở file breadcrumbs.php chứa trong Genesis framework, bạn sẽ thấy có những tùy chọn cấp phép bạn sửa đổi:

   $this    ->     args     =     array    (     'home'     =>    __  (     'Home'    ,     'genesis'     )    ,     'sep'     =>        'list_sep'     =>      ', '    ,     'prefix'     =>      ' 
'
, 'suffix' => '

' , 'heirarchial_attachments' => true , 'heirarchial_categories' => true , 'labels' => array ( 'prefix' => __ ( 'You are here: ' , 'genesis' ) , 'author' => __ ( 'Archives for ' , 'genesis' ) , 'category' => __ ( 'Archives for ' , 'genesis' ) , 'tag' => __ ( 'Archives for ' , 'genesis' ) , 'date' => __ ( 'Archives for ' , 'genesis' ) , 'search' => __ ( 'Search for ' , 'genesis' ) , 'tax' => __ ( 'Archives for ' , 'genesis' ) , 'post_type' => __ ( 'Archives for ' , 'genesis' ) , '404' => __ ( 'Not found: ' , 'genesis' )

Tất cả những option này sẽ được thay đổi bằng phương pháp sử dụng filter genesis_breadcrumb_args

Mặc định ở đầu breadcrumb có chữ “YOU ARE HERE”, chuỗi này chứa ở phần từ labels-> prefix, bạn cũng có thể thay với chuỗi khác.

Xóa “YOU ARE HERE” ở đầu breadcrumb

 add_filter  (    'genesis_breadcrumb_args'    ,     'remove_breadcrumbs_yourarehere_text'    )    ;     /** * @author Brad Dalton - WP Sites * @example http://wpsites.net/web-design/change-breadcrumbs-in-genesis/ */     function   remove_breadcrumbs_yourarehere_text  (     $args     )     {     $args    [    'labels'    ]    [    'prefix'    ]     =     ''    ;     return     $args    ;     }   

Thay đổi dòng chữ “YOU ARE HERE” ở breadcrumbs

Thay vì xóa đi, bạn cũng có thể đổi lại dòng chữ “you are here” nếu thích.

 add_filter  (    'genesis_breadcrumb_args'    ,     'change_breadcrumbs_text'    )    ;     function   change_breadcrumbs_text  (     $args     )     {     $args    [    'labels'    ]    [    'prefix'    ]     =     'Are You Lost? '    ;     return     $args    ;     }   

Sửa text hiển thị trang chủ “Home”

Sử dụng đoạn code sau:

 add_filter  (    'genesis_breadcrumb_args'    ,     'modify_home_text_breadcrumbs'    )    ;     /** * @author Brad Dalton - WP Sites * @example http://wpsites.net/web-design/change-breadcrumbs-in-genesis/ */     function   modify_home_text_breadcrumbs  (    $args    )     {     $args    [    'home'    ]     =     'Front Page: '    ;     return     $args    ;     }   

Thay thế ký tự ngăn cách trong breadcrumb (Separator)

 add_filter  (    'genesis_breadcrumb_args'    ,     'modify_separator_breadcrumbs'    )    ;     /** * @author Brad Dalton - WP Sites * @example http://wpsites.net/web-design/change-breadcrumbs-in-genesis/ */     function   modify_separator_breadcrumbs  (    $args    )     {     $args    [    'sep'    ]     =     ' > >  '    ;     return     $args    ;     }   

Có thể sửa mọi thứ những cài đặt của breadcrumbs chung vào một filter giống như thế này:

 add_filter  (    'genesis_breadcrumb_args'    ,     'customize_breadcrumbs'    )    ;     /** * @author Brad Dalton - WP Sites * @example http://wpsites.net/web-design/change-breadcrumbs-in-genesis/ */     function   customize_breadcrumbs  (    $args    )     {     $args    [    'labels'    ]    [    'prefix'    ]     =     'This Is Where You Are '    ;     $args    [    'home'    ]     =     'Front Page: '    ;     $args    [    'sep'    ]     =     ' > >  '    ;     return     $args    ;     }   

Đổi địa thế hiển thị breadcrumbs

Trước hết sử dụng hook này để xóa breadcrumb ở địa thế cũ:

 remove_action  (     'genesis_before_loop'    ,     'genesis_do_breadcrumbs'     )    ;   

sau đó gọi lại hàm breadcrumb ở địa thế mới, tỉ dụ chúng ta sẽ cho hiển thị ở trước nội dung sidebar, sử dụng hook genesis_before_content_sidebar_wrap

 add_action  (     'genesis_before_content_sidebar_wrap'    ,     'genesis_do_breadcrumbs'     )    ;   

Các bạn có thể tùy biến cho breadcrumb hiển thị ở rất nhiều trang hay một số page sẽ disable breadcrumb tỳ dụ như không cho hiển thị ở trang chủ. Có thể sử dụng template tag is_page để kiểm tra page slug.

 add_action  (     'genesis_before'    ,     'wpsites_remove_genesis_breadcrumbs'     )    ;     function   wpsites_remove_genesis_breadcrumbs  (    )     {     if     (   is_page  (   page  -  slug   )     )   remove_action  (     'genesis_before_loop'    ,     'genesis_do_breadcrumbs'     )    ;     }   

Một thí dụ khác, chúng ta sẽ thêm class cho thẻ div xung quanh breadcrumb.

 add_filter  (     'genesis_breadcrumb_args'    ,     'child_theme_breadcrumb_modifications'     )    ;     function   child_theme_breadcrumb_modifications  (     $args     )     {     $args    [    'home'    ]     =     'Home'    ;     $args    [    'sep'    ]     =     ' '    ;     $args    [    'list_sep'    ]     =     ', '    ;     $args    [    'prefix'    ]     =     ' 
'
; $args [ 'suffix' ] = '

' ; $args [ 'labels' ] [ 'prefix' ] = '' ; return $args ; }

Làm đẹp cho breadcrumb bằng cách thêm CSS.

   /* Style Breadcrumbs ------------------------------------------------------------ */       .breadcrumb     {     background    :     url    (    images/breadcrumb.png    )    ;     border    :     1px     solid     #53504e    ;     color    :     #fff    ;     font-size    :     12px    ;     padding    :     15px     20px    ;     text-shadow    :     1px     1px     #000    ;     }       .breadcrumb   a   {     background    :     url    (    images/bullet.png    )     no-repeat     right    ;     margin    :     0     15px     0     0    ;     padding    :     0     20px     0     0    ;     }       .breadcrumb     .inner     {     background    :     url    (    images/breadcrumb-home.png    )     no-repeat     left    ;     padding    :     2px     0     0     35px    ;     }   

Kết quả:
làm đẹp cho breadcrumb trong  genesis

Ngoài ra, bạn cũng có thể thay đổi toàn bộ các tùy chỉnh về breadcrumbs thông qua sử dụng plugin “Genesis Simple Breadcrumbs plugin“. Với plugin này bạn không phải sử dụng code như phía trên mình chỉ dẫn nữa.

tùy biến với genesis breadcrumbs plugin

Plugin này phát triển bởi Copyblogger Media’s Nick Croft. Chúc bạn thành công.

Hãy cho mình biết suy nghĩ của bạn trong phần bình luận bên dưới bài viết này. Hãy theo dấu kênh chia sẻ kiến thức WordPress của TopVn trên Twitter và Facebook

Bài viết Tùy biến Breadcrumb cho genesis theme [wordpress] được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang