Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. BEM
Webdesign

Mẹo Nhỏ: Đặt Tên theo Phương Thức BEM và WordPress Filter dành cho Điều hướng

by
Difficulty:IntermediateLength:ShortLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Bảo trì CSS là một việc khó khăn, đặc biệt trong những dự án lớn phải làm việc với một nhóm. Việc đặt tên theo quy ước có thể giúp CSS của bạn trở nên dễ đọc và dễ bảo trì hơn. Trong hướng dẫn này chúng ta sẽ khám phá cách sử dụng phương thức đặt tên BEM (Block Element Modifier) trong WordPress.

Các hệ thống quản lý nội dung như WordPress xuất ra các lớp mặc định trong markup của front-end. Trong WordPress có rất nhiều filter để sửa đổi các lớp này.

Nếu bạn muốn tìm hiểu sâu vào code, đây là một theme ví dụ của tôi; các filter có thể được tìm thấy trong tập tin inc/functions-filters.php.

BEM Là Gì?

BEM là viết tắt của Block Element Modifier.

“BEM là một phương pháp giúp bạn tạo ra các thành phần có thể tái sử dụng và chia sẻ code trong phát triển front-end.”

Tôi sẽ sử dụng markup của menu điều hướng làm ví dụ:

  • Block là một thực thể tồn tại độc lập có ý nghĩa riêng của nó.
    • .menu { ... }
  • Element là một phần của một block và được liên kết với block của nó theo một cách có ý nghĩa.
    • .menu__items { ... }
    • .menu__item { ... }
    • .menu__anchor { ... }
  • Modifier thay đổi hình thức hoặc hành vi của block hoặc element.
    • .menu--primary { ... }
    • .menu__anchor--button { ... }

Markup đầy đủ cho menu điều hướng có thể trông giống như sau:

Quy ước đặt tên giống như BEM giữ cho SASS và CSS gọn gàng và thống nhất (đó luôn là một điều tuyệt vời!).

Trong SASS, bạn sẽ style cho ví dụ của chúng ta như sau:

CSS đã được biên dịch sẽ tương tự như sau:

Nhưng chúng ta có thể thay đổi các lớp cho menu điều hướng trong WordPress như thế nào?

Sử Dụng Filter Trong WordPress Để Đổi Tên Lớp

Sử dụng hàm wp_nav_menu() sẵn có của WordPress, bạn có thể sửa đổi các lớp cho phần tử <nav><ul>. Ví dụ:

Lưu ý tham số menu_class để thêm lớp tùy biến vào phần tử <ul>. WordPress còn có những filter hữu ích dành cho các phần tử <li><a>:

Sử Dụng Filter nav_menu_css_class 

Trong ví dụ này chúng ta đặt lại tất cả các lớp mặc định từ phần tử <li> của menu item và thêm vào các lớp tùy biến của chính chúng ta. Hãy thêm lớp ví dụ của chúng ta được gọi là menu__item bằng cách chèn filter này vào functions.php.

Bạn có nhận thấy có bốn tham số không? Hãy thêm một lớp modifier menu__item--primary, trong đó primary là theme location. Đối với điều này, 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:

Code đầy đủ của ví dụ có thể được tìm thấy trong theme ví dụ của tôi trong tập tin inc/functions-filters.php.

Sử Dụng Filter nav_menu_link_attributes 

Hãy thêm lớp ví dụ menu__anchor vào phần tử <a> của mỗi menu item.

Thêm Lớp Thông Qua Menu Builder

Đôi khi chúng ta thêm lớp tùy biến vào phần tử <li> của menu item từ giao diện Menu Builder.

Adding button class for menu item

Để giữ cho CSS được gọn gàn, hãy thêm một lớp menu__anchor--button vào phần tử <a> nơi mà lớp button có mặt:

Bây giờ chúng ta có thể chọn trực tiếp một level của CSS bằng .menu__anchor--button{ ... }. Trong demo của tôi bạn sẽ thấy menu item được style như một button, chọn mà không cần phải đi sâu nhiều cấp.

Navigation with call to action menu item

Điều Hướng Trang Con

Nếu bạn sử dụng wp_list_pages() để lấy danh sách trang con, có sẵn các bộ lọc tương tự:

Trong bản demo ở đây có một hàm bemit_sub_pages_navigation() liệt kê các trang con trong thanh sidebar. Hãy kiểm tra kết quả cuối cùng từ trang demo.

Tóm Tắt

Như bạn thấy đấy, bạn có thể không cần một Custom Walker cho menu đ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 filter để sử dụng.

Nói vậy không có nghĩa là tất cả markup đều dễ sửa đổi. Ví dụ các hàm phân trang như the_posts_pagination() không cung cấp bộ lọc tốt. Nhưng đó là một chủ đề cho hướng dẫn khác.

Tôi hy vọng bạn thấy mẹo nhỏ này hữu ích!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.