BEM Naming và WordPress filters Đổi Class cho Thanh Điều Hướng

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 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:

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:

CSS được biên dịch sẽ trông giống như sau:

Nhưng làm sao chúng ta thay đổi class Thanh điều hướng trong WordPress

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><ul>. Ví dụ:

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><a> các phần tử:

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:

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:

Theme mẫu đầy đủ bạn có thể xem, chi tiết ví dụ này trong inc/functions-filters.php file.

Hãy thêm class menu__anchor cho phần tử <a> của từng mục menu.

Đô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:

Mở class trong Menu WordPress

Để 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:

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.

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.

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

avatar
  Subscribe  
Notify of
%d bloggers like this: