Cách thêm lớp đầu tiên và cuối cùng vào các mục menu điều hướng …

Gần đây, khi làm việc trong một dự án thiết kế tùy chỉnh, chúng tôi đã phát hiện ra sự cần thiết phải thêm một kiểu tùy chỉnh vào các mục menu điều hướng WordPress của chúng tôi. Thiết kế đặc biệt này đòi hỏi một phong cách khác nhau cho mục menu đầu tiên và mục menu cuối cùng. Bây giờ chúng tôi có thể dễ dàng truy cập quản trị viên WordPress và thêm một lớp css tùy chỉnh vào mục menu đầu tiên và cuối cùng. Nhưng vì chúng tôi đang cung cấp điều này cho khách hàng, rất có khả năng họ sẽ có thể sắp xếp lại thứ tự các menu trong tương lai. Sử dụng cách để thêm các lớp từ bảng quản trị không phải là phương pháp hiệu quả nhất. Vì vậy, chúng tôi quyết định làm điều đó bằng cách sử dụng các bộ lọc. Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách thiết kế mục menu WordPress đầu tiên và cuối cùng của bạn bằng cách thêm một lớp CSS .first và .last.

Tất cả bạn phải làm là mở chủ đề Hàm.php lưu trữ. Sau đó dán đoạn mã sau:

function wpb_first_and_last_menu_class($items) {
    $items[1]->classes[] = 'first';
    $items[count($items)]->classes[] = 'last';
    return $items;
}
add_filter('wp_nav_menu_objects', 'wpb_first_and_last_menu_class');

Một cách khác để thiết kế các mục menu đầu tiên và cuối cùng khác nhau là sử dụng các bộ chọn CSS hoạt động trong hầu hết các trình duyệt hiện đại.

ul#yourmenuid > li:first-child { }
ul#yourmenuid > li:last-child { }

Lưu ý: Nếu bạn có nhiều người dùng trong các trình duyệt cũ (Internet Explorer), thì có lẽ bạn muốn tránh các kỹ thuật sau.

Chúng tôi hy vọng bài viết này đã giúp bạn. Chúng tôi đã tạo một bảng cheat trên các lớp CSS do WordPress tạo mặc định cũng có thể có ích khi thiết kế các mục menu.