Quy ước về CSS tương đối khó khăn, đặc biệt là trong những dự án lớn với một nhóm. Quy ước về tên class giúp CSS của bạn dễ đọc hơn và dễ bảo trì hơn. Trong bài, chúng ta sẽ xem cách sử dụng phương pháp đặt tên BEM (Block Element Modifier) cho Thanh Điều Hướng trong WordPress.
BEM là gì?
BEM viết tắt cho Block Element Modifier – Công cụ sửa đổi phần tử khối.
“BEM là một phương pháp giúp bạn tạo các thành phần có thể tái sử dụng và chia sẻ mã trong phát triển giao diện người dùng.”
Tôi sẽ sử dụng markup thanh điều hướng làm ví dụ:
- Block là một thực thể độc lập có ý nghĩa riêng.
.menu { ... }
- Element là một phần của block và được liên kết ngữ nghĩa với block của nó.
.menu__items { ... }.menu__item { ... }.menu__anchor { ... }
- Modifier thay đổi hình thức hoặc hành vi của khối hoặc phần tử.
.menu--primary { ... }.menu__anchor--button { ... }
Markup thanh điều hướng đầy đủ trông như này:
|
1 2 3 4 5 6 7 8 |
<nav class="menu menu--primary"> <ul class="menu__items menu__items--primary"> <li class="menu__item"><a class="menu__anchor">Link text</a></li> <li class="menu__item"><a class="menu__anchor">Link text</a></li> <li class="menu__item"><a class="menu__anchor">Link text</a></li> <li class="menu__item"><a class="menu__anchor menu__anchor--button">Link text</a></li> </ul> </nav> |
Quy ước đặt tên như BEM giữ cho SASS và CSS luôn luôn đơn dễ hiểu.
Trong SASS, style mẫu của chúng ta sẽ như này:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.menu { ... &__items { ... } &__item { ... } &__anchor { ... } &__anchor--button { ... } } |
CSS được biên dịch sẽ trông giống như sau:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.menu { ... } menu__items { … } menu__item { … } menu__anchor { … } menu__anchor--button { … } |
Nhưng làm sao chúng ta thay đổi class Thanh điều hướng trong WordPress
Sử dụng WordPress Filters để Đổi Class cho Thanh Điều Hướng
Sử dụng hàm wp_nav_menu() của WordPress, bạn có thể quy định class cho các phần tử <nav> và <ul>. Ví dụ:
|
1 2 3 4 5 6 7 8 9 10 11 |
<nav class="menu menu--primary"> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'container' => '', 'menu_class' => 'menu__items menu__items--primary', ) ); ?> </nav> |
Tham số menu_class dùng để thêm các lớp tùy chỉnh vào phần tử <ul>. WordPress cũng có các filters (bộ lọc) tiện dụng cho <li> và <a> các phần tử:
- nav_menu_css_class để áp dụng các lớp vào phần tử
<li>của menu. - nav_menu_link_attributes để áp dụng các thuộc tính cho phần tử
<a>của menu.
Sử dụng nav_menu_css_class Filter
Trong ví dụ này, tôi đặt lại tất cả các class mặc định từ <li> của menu và thêm các class tùy chỉnh của mình. Hãy thêm class ví dụ gọi là menu__item bằng cách chèn filter này vào file functions.php:
|
1 2 3 4 5 6 7 8 9 10 11 |
function bemit_nav_menu_css_class( $classes, $item, $args, $depth ) { // Reset all default classes and start adding custom classes to array. $_classes = [ 'menu__item' ]; // Return custom classes. return $_classes; } add_filter( 'nav_menu_css_class', 'bemit_nav_menu_css_class', 10, 4 ); |
Bạn có nhận thấy có bốn tham số không? Hãy thêm menu__item--primary cho modifer class,, trong đó primary là theme location – “vị trí chủ đề”. Chúng ta có thể sử dụng tham số $args để thêm một theme location. Bây giờ filter của chúng ta trông như sau:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
function bemit_nav_menu_css_class( $classes, $item, $args, $depth ) { // Reset all default classes and start adding custom classes to array. $_classes = [ 'menu__item' ]; // Get theme location, fallback for `default`. $theme_location = $args->theme_location ? $args->theme_location : 'default'; // Add theme location class. $_classes[] = 'menu__item--' . $theme_location; // Return custom classes. return $_classes; } add_filter( 'nav_menu_css_class', 'bemit_nav_menu_css_class', 10, 4 ); |
Theme mẫu đầy đủ bạn có thể xem, chi tiết ví dụ này trong inc/functions-filters.php file.
Sử dụng nav_menu_link_attributes filter
Hãy thêm class menu__anchor cho phần tử <a> của từng mục menu.
|
1 2 3 4 5 6 7 8 9 |
function bemit_nav_menu_link_attributes( $atts, $item, $args, $depth ) { // Start adding custom classes. $atts['class'] = 'menu__anchor'; return $atts; } add_filter( 'nav_menu_link_attributes', 'bemit_nav_menu_link_attributes', 10, 4 ); |
Thêm Classes thông qua Menu Builder
Đôi khi, chúng ta thêm các class tùy chỉnh vào phần tử <li> vào menu thông qua giao diện admin.
Nếu không thấy phần thêm class này, bạn hãy chú ý tick “Lớp Class” như hình dưới đây:
Để giữ cho CSS chuẩn, hãy thêm một class menu__anchor--button vào phần tử <a> nơi có class nút:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
function bemit_nav_menu_link_attributes( $atts, $item, $args, $depth ) { // Start adding custom classes. $atts['class'] = 'menu__anchor'; // Add `menu__anchor--button` when there is `button` class in `<li>` element. if ( in_array( 'button', $item->classes, true ) ) { $atts['class'] .= ' menu__anchor--button'; } return $atts; } add_filter( 'nav_menu_link_attributes', 'bemit_nav_menu_link_attributes', 10, 4 ); |
Bây giờ ta có thể trực tiếp sử dụng class CSS cho nút menu__anchor--button. Trong bản demo này, bạn sẽ thấy một phần tử menu có dạng style giống nút.
Điều Hướng Trang Con
Nếu bạn đang sử dụng wp_list_pages() để tìm nạp trang con, ta có sẵn các filter tương tự:
Trong bản demo có một hàm bemit_sub_pages_navigation() dùng để liệt kê các trong con tại sidebar. Kiểm tra kết quả tại trang demo.
Kết luận
Bạn thấy đấy, bạn có thể không cần một Custom Walker để điều hướng nếu bạn đang thực hiện các thay đổi nhỏ hơn. Có rất nhiều filters xung quanh.
Hy vọng bạn thấy mẹo về WordPress filters Đổi Class cho Thanh Điều Hướng hữu ích!
Leave a Reply