Bạn muốn thêm kiểu tùy chỉnh cho các mục đầu tiên và cuối cùng của menu WordPress của bạn? Một lựa chọn khá dễ thực hiện là thêm lớp CSS đầu tiên và cuối cùng vào mục menu WordPress. Tuy nhiên, nếu bạn sắp xếp lại menu bất kỳ lúc nào, thì những mục đó có thể không còn là mục đầu tiên và cuối cùng nữa. Trong bài viết này, Vietnix sẽ chỉ cho bạn cách thêm một lớp .first và .last sẽ tạo kiểu cho các mục đầu tiên và cuối cùng ngay cả khi bạn sắp xếp lại menu sau này.
Tại sao nên thêm lớp CSS tùy chỉnh vào menu điều hướng WordPress?
Đôi khi, bạn có thể cần thêm lớp CSS tùy chỉnh vào menu điều hướng WordPress. Điều này có thể làm cho các liên kết quan trọng nổi bật, như liên kết đến biểu mẫu liên hệ của trang web của bạn hoặc trang giỏ hàng WooCommerce.
Trong trường hợp này, bạn có thể đơn giản là thêm một lớp CSS tùy chỉnhvào menu điều hướng WordPress. Tuy nhiên, nếu bạn thay đổi thứ tự menu bất kỳ lúc nào, điều này có thể làm hỏng hoàn toàn kiểu tùy chỉnh.
Vì lý do này, Vietnix khuyến nghị sử dụng bộ lọc (filters) thay vì cách thức này.
Trong hướng dẫn này, Vietnix sẽ chỉ cho bạn cách tạo kiểu cho các mục đầu tiên và cuối cùng trong menu điều hướng của bạn, để bạn có thể sắp xếp lại menu mà không làm hỏng tùy chỉnh trước đó. Chỉ cần sử dụng các liên kết nhanh dưới đây để chuyển đến phương pháp bạn muốn sử dụng:
Chương trình khuyến mãi Mua Hosting Rinh Tên Miền
Phương pháp 1: Thêm lớp CSS tùy chỉnh vào menu điều hướng WordPress bằng cách sử dụng một bộ lọc (Filter)
Đây là phương pháp mà Vietnix khuyến nghị khuyên dùng cho bạn. Phương pháp này là dễ nhất để thêm lớp CSS tùy chỉnh vào menu điều hướng WordPress là thêm một bộ lọc (filter) vào theme của bạn.
Thông thường, bạn sẽ tìm thấy các đoạn code trong hướng dẫn WordPress kèm theo hướng dẫn cách thêm chúng vào file functions.php của theme.
Vấn đề lớn nhất là ngay cả một lỗi nhỏ trong đoạn code tùy chỉnh có thể làm hỏng trang web WordPress của bạn và khi bạn cập nhật theme WordPress, bạn có thể mất tất cả các tùy chỉnh của mình.
Đó là lý do plugin WPCode ra đời.
Plugin miễn phí này giúp bạn dễ dàng thêm CSS tùy chỉnh, PHP, HTML và nhiều hơn nữa vào WordPress mà không đặt trang web của bạn vào rủi ro.
Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin WPCode miễn phí. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của Vietnix về cách cài đặt plugin WordPress.
Sau khi kích hoạt, hãy vào Code Snippets > Add Snippet.
Ở đây, chỉ cần di chuột qua “Add Your Custom Code”.
Khi nó xuất hiện, nhấp vào “Use snippet.”
Để bắt đầu, gõ tiêu đề cho đoạn code tùy chỉnh của bạn. Điều này có thể là bất kỳ thứ gì giúp bạn xác định đoạn code trong WordPress dashboard.
Sau đó, mở danh sách thả xuống “Code Type” và chọn “PHP Snippet.”
Sau đó, bạn có thể thêm code PHP sau vào hộp mã:
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");
Sau đó, bạn sẽ sẵn sàng cuộn lên đầu màn hình và nhấp vào công tắc “Inactive” để nó chuyển thành “Active.”
Cuối cùng, nhấp vào “Save Snippet” để làm cho đoạn code PHP trở nên hoạt động.
Đ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. Bây giờ bạn có thể sử dụng các lớp này để áp dụng kiểu tùy chỉnh cho các mục này.
Để làm điều này, bạn sẽ cần thêm lớp CSS tùy chỉnh vào menu điều hướng WordPress. Để bắt đầu, tạo một đoạn code tùy chỉnh mới bằng cách tuân theo quy trình tương tự mô tả ở trên.
Sau đó, gõ tiêu đề cho đoạn code tùy chỉnh của bạn.
Tiếp theo, mở danh sách thả xuống “Code Type”, nhưng lần này chọn “CSS Snippet.”
Đối với hướng dẫn này, Vietnix sẽ đơn giản là làm đậm các mục đầu tiên và cuối cùng bằng cách thêm đoạn CSS sau:
.first a {font-weight: bold;}
.last a {font-weight: bold;}
Sau đó hãy nhấp vào công tắc “Inactive” để nó chuyển thành “Active.” Cuối cùng, nhấp vào “Save Snippet” để làm cho đoạn code CSS trở nên hoạt động.
Bây giờ, nếu bạn truy cập trang web của mình, bạn sẽ thấy menu đã được cập nhật.
Phương pháp 2: Thêm lớp CSS tùy chỉnh vào menu điều hướng WordPress (Không cần plugin)
Nếu bạn không muốn sử dụng plugin, bạn có thể tạo kiểu cho các mục đầu tiên và cuối cùng bằng các bộ chọn CSS. Tuy nhiên, phương pháp này có thể không hoạt động với một số trình duyệt cũ, như Internet Explorer.
Do đó, nên kiểm tra trang web WordPress của bạn trên các trình duyệt khác nhau.
Để thực hiện phương pháp này, bạn cần thêm code vào file style.css của theme hoặc vào phần “Additional CSS” của WordPress Theme Customizer.
Nếu bạn chưa làm điều này trước đây, hãy xem hướng dẫn của Vietnix về cách dễ dàng thêm CSS tùy chỉnh vào trang web WordPress của bạn.
Bước đầu tiên là chỉnh sửa tệp style.css của theme hoặc điều hướng đến Appearance > Customize và sau đó nhấp vào “Additional CSS.”
Sau đó, hãy thêm đoạn code sau vào trang web của bạn:
ul#yourmenuid > li:first-child { }
ul#yourmenuid > li:last-child { }Lưu ý rằng bạn cần thay thế “yourmenuid” bằng ID của menu điều hướng của bạn.
Các bộ chọn “first-child” và “last-child” chọn mục đầu tiên và cuối cùng của phần tử cha của nó, đó là các mục đầu tiên và cuối cùng trong menu điều hướng.
Ví dụ, Vietnix đã sử dụng code này để làm đậm các mục đầu tiên và cuối cùng trong menu điều hướng trên blog WordPress của Vietnix:
ul#primary-menu-list > li:first-child a {
font-weight: bold;
}
ul#primary-menu-list > li:last-child a {
font-weight: bold;
}
Lời kết
Vietnix hy vọng hướng dẫn này đã giúp bạn tìm hiểu cách thêm lớp CSS tùy chỉnh vào menu điều hướng WordPress. Bạn cũng có thể muốn xem hướng dẫn của Vietnix về cách tạo landing page bằng WordPress hoặc kiểm tra danh sách page builder WordPress kéo và thả tốt nhất hiện nay. Chúc bạn thành công và đừng ngần ngại để lại bình luận bên dưới để đội ngũ admin của Vietnix có thể hỗ trợ bạn nhé!
