Cách tự động thêm nhãn mục làm lớp cho các mục menu điều hướng trong WordPress

Giả sử bạn có một menu điều hướng trong trang web WordPress của mình với các mục sau:

  • Nhà
  • Về
  • Blog
  • Cửa hàng
  • Tiếp xúc

Trong WordPress, có thể tự đặt lớp cho các mục menu điều hướng khi chỉnh sửa menu tùy chỉnh.

Sau đó, các lớp tùy chỉnh của bạn có thể được sử dụng để tạo kiểu duy nhất cho các mục menu điều hướng.

Sẽ không tiện lợi nếu các lớp này được tự động tạo và thêm vào các mục menu dựa trên nhãn các mục menu?

Ví dụ,

  • Nhà nhà
  • Giới thiệu - về
  • Blog - blog
  • Shop - cửa hàng
  • Liên hệ - liên hệ

Điều này có thể dễ dàng thực hiện, nhờ vào nav_menu_css_class bộ lọc trong WordPress.

Chỉ cần thêm cái này vào chủ đề con của bạn :functions.php

add_filter( 'nav_menu_css_class', 'custom_add_item_label_as_class', 10, 3 );
/**
 * Automatically adds `<nav-menu-item-label>` class to nav menu items.
 *
 * @param array  $classes Nav menu item classes.
 * @param object $item Nav menu item data object.
 * @param array  $args Nav menu arguments.
 */
function custom_add_item_label_as_class( $classes, $item, $args ) {

    $classes[] = sanitize_title_with_dashes( $item->title );

    return $classes;

}

Nếu bạn thấy các lớp này quá chung chung và muốn tự động thêm các lớp như thế , hãy sử dụng cái này để thay thế:menu-item-blog

add_filter( 'nav_menu_css_class', 'custom_add_item_label_as_class', 10, 3 );
/**
 * Automatically adds `menu-item-<label>` class to nav menu items.
 *
 * @param array  $classes Nav menu item classes.
 * @param object $item Nav menu item data object.
 * @param array  $args Nav menu arguments.
 */
function custom_add_item_label_as_class( $classes, $item, $args ) {

    if ( 'Home' !== $item->title ) {
        $classes[] = 'menu-item-' . sanitize_title_with_dashes( $item->title );
    }

    return $classes;

}

Lưu ý rằng chúng tôi đang loại trừ mục menu Trang chủ vì WordPress tự động thêm lớp cho liên kết Trang chủ được tích hợp sẵn.menu-item-home

Cách sử dụng CSS mẫu:

li.menu-item-home a:before {
    background-image: url(images/home-icon.png);
}

li.menu-item-blog a:before {
    background-image: url(images/blog-icon.png);
}

li.menu-item-about a:before {
    background-image: url(images/about-icon.png);
}