Hướng dẫn tạo menu icon với ACF

Có rất nhiều cách để bạn có thể tích hợp icon vào danh mục menu, trong bài viết này mình sẽ chia sẻ một cách tạo menu icon bằng Advanced Custom Fields (ACF). Thông thường, các dự án của mình hay sử dụng ACF nên mình tận dụng luôn đỡ phải sử dụng thêm plugin khác.

Đầu tiên, bạn cần phải cài ACF Plugin (chỉ cần cài bản miễn phí là đủ). Nếu bạn muốn mua bản ACF Pro đầy đủ các tính năng nâng cao bạn có thể tham khảo tại theme99k nha.

Advanced Custom Fields Pro (ACF Pro) 89.000 ₫

Okay, bắt đầu thôi!

Tạo Menu icon Field trong ACF

Hoàn thành đầy đủ thông tin 3 trường như này, sau đó bạn nhấn ‘cập nhật’ để lưu.

Sau khi hoàn thành tạo Field Menu icon trong ACF, tiếp tục bạn dán đoạn code sau vào file functions.php (nhớ dán functions.php ở child theme nha).

add_filter('wp_nav_menu_objects', 't99k_wp_nav_menu_objects', 10, 2);
function t99k_wp_nav_menu_objects( $items, $args ) {
  foreach( $items as &$item ) {
    $icon = get_field('menu_icon', $item);  //'menu_icon' là tên field bạn đã tạo trước đó 
    if( $icon ) {
      $item->title = ' <i class="t99_icon '.$icon.'"></i>'.$item->title; //'t99_icon' Style prefix
    }
  }
  return $items;
}

Đây là kết quả sau khi chèn code xong.

Tạo hình ảnh icon

Nếu bạn để ý có một số trang web như dienmayxanh, thegioididong… họ sử dụng kỹ thuật CSS Sprites. Tức là tất cả icon thông thường họ gộp vào 1 bức ảnh duy nhất, việc kết hợp như này sẽ giúp tối ưu việc tải trang bằng cách giảm thiểu số lượng HTTP requests và dung lượng của các tài nguyên (file ảnh, icon…) cần thiết cho website.

Trong phương pháp sử dụng ACF chúng ta cũng sử dụng kỹ thuật CSS Sprites, nó cũng đơn giản không có gì phức tạp kể cả với những người mới bắt đầu.

Bạn cần chuẩn bị các icon cho từng danh mục sản phẩm trước, mình hay vào flaticon.com để tải các icon. Sau đó bạn truy cập vào spritegen.website-performance.org để chúng tạo ra một bức ảnh gộp icon nha.

B1: Nhấn ‘Clear‘ để xóa các icon mẫu có sẵn.

B2: Nhấn ‘Open’ hoặc kéo thả tất cả các icon vào khung.

ở phần Style prefix bạn điền tên prefix giống với phần code đã khai báo ở functions.php. Sau đó nhấn ‘Save‘.

Sau khi hoàn thành, bạn tải xuống hình ảnh đã tạo. Và tải lên thư viện hình ảnh trên trang web của bạn.

Hình ảnh tải xuống tên là spritesheet.png, mình đổi thành icon_menu.png

ở tab ‘CSS’ là có các thông số về background position của từng icon

Tạo menu

Bạn tiến hành tạo menu như bình thường và dán class css tương ứng.

Bước cuối cùng dán đoạn CSS

.t99_icon {
    background-image: url(/wp-content/uploads/2022/03/icon_menu.png); //Change Your Destination URL
    background-repeat: no-repeat;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
}

.t99_icon-dien-thoai {
    background-position: -5px -5px;
}

.t99_icon-dieu-hoa {
    background-position: -31px -5px;
}

.t99_icon-ket-sat {
    background-position: -5px -31px;
}

.t99_icon-may-giat {
    background-position: -31px -31px;
}

.t99_icon-may-loc-khong-khi {
    background-position: -57px -5px;
}

.t99_icon-noi-com-dien {
    background-position: -57px -31px;
}

Và thành quả