1BANNER 123
4.9/5 - (113 bình chọn)

Hôm nay mình sẽ hướng dẫn mọi người cách để làm một menu với các icon bắt mắt mà không cần phải cài thêm một plugin nào.

Đây là ví dụ về menu icon
Đây là ví dụ về menu icon

Tạo một shortcode hiển thị menu

Đầu tiền chúng ta vào file function để đăng ký và tạo một shortcode hiển thị menu nhé.

add_theme_support( 'menus' );
register_nav_menus(
   array(
       'main-nav' => 'Menu icon chính' ) );

Function này sẽ giúp bạn có thể tạo được một menu với tên gọi là menu ion chính tại giao diện quản trị. Mọi ng có thể vào phần menu để kiểm tra.

Menu icon chính đã được tạo ở giao diện quản trị

Bây giờ chúng ta sẽ set up các thẻ HTML cho menu icon chính vừa tạo và cho hiển thị ra front-end nhé.

add_shortcode('menu-icon-main','menu-icon');

function menu-icon(){
    ob_start();
         $menuLocations = get_nav_menu_locations();
         $menuID = $menuLocations['main-nav'];
         $primaryNav = wp_get_nav_menu_items($menuID);
        $i=0;
       foreach ( $primaryNav as $navItem ):
          echo '<li><span class="custom-icon" id="icon-'.$i.'"></span><a href="'.$navItem->url.'" title="'.$navItem->title.'">'.$navItem-&gt;title.'</a></li>';
    $i++; endforeach;
$list_post = ob_get_contents();
ob_end_clean();
return $list_post;
}

Function này sẽ tạo ra một shortcode có tên là [menu-icon-main] với các thẻ HTML bên trong. Bây giờ chúng ta chỉ việc dán shortcode này vào vị trí bạn muốn hiển thị thôi là được rồi.

Hiển thị menu icon với shortcode vừa tạo (Đối với theme flatsome)

Ở đây mình sẽ dán shortcode vào header-bottom trong Flatsome nhé. Đầu tiên dán shortcode [menu-icon-main] vào một HTML tùy chỉnh và sau đó để block HTML đó vào vị trí header-botoom là được

Cho shortcode vào block HTML 2 rồi để vào header-bottom.

Như vậy là xong phần tạo menu, bây giờ chúng ta đến phần chèn icon vào menu.

Chèn icon vào menu với CSS.

đầu tiên chèn đoạn css này vào file style.css hoặc vào css bổ sung trong theme của mình.

.custom-icon{
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right:5px;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 5px;
}

Sau đó các bạn xem số thứ tự các trang sẽ hiển thị ở menu của mình để gọi ra khi css.

Ở đây có 5 trang, hiển thị mặc định từ 0-4

Các bạn dùng đoạn code sau để chèn icon mà mình mong muốn vào. Để tối ưu nhất các bạn nên chỉnh icon ở kích thước bằng kích thước hiển thị, đừng dùng crop vì như vậy sẽ làm mất điểm tối ưu. Ở đây mình lấy ảnh 20px 20px. Bạn có thể tăng kích thước này ở đoạn css phía trên nhé.

#icon-0{
   background-image: url(https://pttuan410.com/wp-content/uploads/2020/04/iconWordPress-logotype-wmark.png)
}
#icon-1{
   background-image: url(https://pttuan410.com/wp-content/uploads/2020/04/iconwoocommerce.png)
}
#icon-2{
   background-image: url(https://pttuan410.com/wp-content/uploads/2020/04/iconkhac.png)
}
#icon-3{
   background-image: url(https://pttuan410.com/wp-content/uploads/2020/04/iconmail.png)
}
#icon-4{
    background-image: url(https://pttuan410.com/wp-content/uploads/2020/04/icon-gift-1.png)
}

Và đây là thành quả.

Menu với các icon bắt mắt.

Ngoài ra thì còn rất nhiều các khác nhau như đặt tên class cho các trang hiển thị rồi dùng ::before cũng được.

Mình hướng dẫn cách này để các bạn có thể biết thêm cách đăng ký menu và cho chúng xuất hiện tại các vị trí mình mong muốn.

Có bất kì câu hỏi nào thì hãy gửi về cho mình nhé, mình sẽ cố gắng giải đáp trong thời gian sớm nhất

2 thoughts on “Cách làm menu icon đơn giản không sử dụng plugin.

  1. duy thảo says:

    Cho mình hỏi mình muốn tạo mỗi trang một menu, tính dùng shortcode nav menu của flatsome mà mình không tìm thấy tên shortcode đó, kiểu mình muốn hiển thị shortcode kèm với id menu tự tạo thì làm thế nào nhỉ

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *