VietNetwork.Vn

Bạn có cần thêm kiểu tùy chỉnh vào các mục đầu tiên và cuối cùng của menu điều hướng WordPress của mình không?

Bạn có thể chỉ cần thêm một lớp CSS tùy chỉnh vào các mục menu đầu tiên và cuối cùng, nhưng nếu menu được sắp xếp lại, thì các mục đó sẽ không còn là mục đầu tiên và cuối cùng.

Trong bài viết này, mình sẽ hướng dẫn bạn cách thêm lớp .first và .last sẽ tạo kiểu cho các mục menu đầu tiên và cuối cùng ngay cả khi các mục menu được sắp xếp lại.

Tại sao lại tạo kiểu cho các mục điều hướng đầu tiên và cuối cùng khác nhau?

Trong một dự án thiết kế tùy chỉnh trước đây, mình cần thêm một số kiểu tùy chỉnh vào các mục menu điều hướng của trang web WordPress. Thiết kế này đặc biệt yêu cầu kiểu dáng khác nhau cho mục menu đầu tiên và mục menu cuối cùng.

Bây giờ chúng ta có thể dễ dàng chỉnh sửa menu 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ì mình đang giao dự án cho khách hàng, giải pháp của mình phải hoạt động ngay cả khi họ sắp xếp lại thứ tự của các menu.

Vì vậy, mình quyết định sử dụng bộ lọc để thay thế.

Trong hướng dẫn này, mình sẽ chỉ cho bạn hai cách để tạo kiểu cho các mục đầu tiên và cuối cùng của menu điều hướng của bạn. Bạn có thể chọn phương pháp ưa thích của mình từ danh sách dưới đây:

• Phương pháp 1: Thêm lớp đầu tiên và cuối cùng bằng Filter
• Phương pháp 2: Tạo kiểu cho các mục đầu tiên và cuối cùng bằng cách sử dụng CSS Selectors

1. Phương pháp 1: Thêm lớp đầu tiên và cuối cùng bằng bộ lọc Filter

Cách đầu tiên để tạo kiểu khác nhau cho các mục menu điều hướng đầu tiên và cuối cùng là thêm Filter vào giao diện của bạn.

Bạn sẽ cần thêm mã vào tập tin functions.php của giao diện. Nếu bạn chưa làm điều này trước đây, hãy xem hướng dẫn của mình về cách sao chép và dán mã trong WordPress.

Tất cả những gì bạn phải làm là mở tập tin functions.php của giao diện, 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');
Điều này tạo ra các lớp CSS .first và .last cho các mục menu điều hướng đầu tiên và cuối cùng của bạn tương ứng. Bạn có thể sử dụng các lớp đó để tạo kiểu cho các mục menu.

Để tìm hiểu cách thực hiện việc này một cách chi tiết, hãy tham khảo hướng dẫn của mình về cách tạo kiểu cho các menu điều hướng trong WordPress.

Đối với hướng dẫn này, mình sẽ thêm định dạng CSS cơ bản sau vào biểu định kiểu style.css của theme để chỉ cần in đậm các mục menu đầu tiên và cuối cùng:

.first a {font-weight: bold;}
 
.last a {font-weight: bold;}
Tại đây, bạn có thể xem ảnh chụp màn hình trước và sau khi mình thêm mã vào trang web demo của mình.


2. Phương pháp 2: Tạo kiểu cho các mục đầu tiên và cuối cùng bằng cách sử dụng bộ chọn CSS

Cách thứ hai để tạo kiểu khác nhau cho các mục menu đầu tiên và cuối cùng là sử dụng các bộ chọn CSS. Phương pháp này đơn giản hơn, nhưng nó có thể không hoạt động với một số trình duyệt cũ hơn, chẳng hạn như Internet Explorer.

Để làm theo phương pháp này, bạn sẽ phải thêm mã vào trang định kiểu của giao diện hoặc phần 'Additional CSS' của công cụ tùy chỉnh giao diện WordPress.

Nếu bạn chưa làm điều này trước đây, hãy xem hướng dẫn của mình về cách dễ dàng thêm CSS tùy chỉnh vào trang web WordPress của bạn.

Bạn nên bắt đầu bằng cách chỉnh sửa tập tin style.css của giao diện hoặc bằng cách điều hướng đến Appearance >> Customize và nhấp vào 'Additional CSS'.

Sau đó, bạn cần dán đoạn mã sau rồi lưu hoặc xuất bản các thay đổi của mình.

ul#yourmenuid > li:first-child { }
ul#yourmenuid > li:last-child { }
Lưu ý rằng bạn sẽ cần thay thế 'yourmenuid' bằng ID thực của menu điều hướng. Các bộ chọn 'first-child' và 'last-child' chọn một phần tử nếu nó là phần tử con đầu tiên và cuối cùng của cha mẹ của nó, đó là menu điều hướng.

Ví dụ: mình đã sử dụng mã này để in đậm các mục menu điều hướng đầu tiên và cuối cùng trên trang web demo của mình:

ul#primary-menu-list > li:first-child a {
    font-weight: bold;
}
ul#primary-menu-list > li:last-child a {
    font-weight: bold;
}

Mình hy vọng hướng dẫn này đã giúp bạn tìm hiểu cách thêm lớp .first và .last vào menu điều hướng của WordPress.

Bạn cũng có thể muốn tìm hiểu cách sửa 50 lỗi WordPress phổ biến hoặc xem danh sách các trình tạo trang kéo và thả tốt nhất của mình.