Cách tạo menu trong WordPress

Trong WordPress nói về tính năng menu trong WordPress phải nói là rất mạnh mẽ và linh hoạt trong việc tạo menu cho website, họ không giới hạn số lượng menu tạo ra và bạn cũng có thể chèn nó vào bất cứ đâu.

Theo mặc định, nhiều Theme WordPress đi kèm với các vị trí và bố cục menu được xác định trước.

Trong bài này mình sẽ chỉ bạn cách viết code để tạo ra một Menu Location (vị trí đặt menu) và cách bạn thêm location này vào bất kỳ chỗ nào trong theme. Và cuối cùng là chỉ việc truy cập vào Appearance -> Menus để thêm menu vào location bạn vừa tạo.

Cách tạo menu trong WordPress

Bước 1. Khởi tạo Menu Location

Điều đầu tiên bạn cần làm là đăng ký menu điều hướng mới của bạn bằng cách thêm mã này vào tệp functions.php của chủ đề của bạn.

function wpb_custom_new_menu() {
  register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );

Ở đoạn trên, chúng ta sẽ tạo ra một menu location mang tên My Custom Menu với slug là my-custom-menu. Cái slug sẽ là tên để chúng ta xác định khi viết code hiển thị ra ngoài.

Bây giờ bạn có thể vào Appearance » Menus page trong admin WordPress của bạn và cố gắng tạo hoặc chỉnh sửa một menu mới. Bạn sẽ thấy ‘My Custom Menu’ làm tùy chọn vị trí chủ đề.

Thế nếu muốn thêm nhiều location thì sao? Đơn giản, chỉ việc thêm nhiều tham số vào hàm bên trên như sau:

function wpb_custom_new_menu() {
  register_nav_menus(
    array(
      'my-custom-menu' => __( 'My Custom Menu' ),
      'extra-menu' => __( 'Extra Menu' )
    )
  );
}
add_action( 'init', 'wpb_custom_new_menu' );

Bước 2. Hiển thị location ra ngoài theme

Tiếp theo, chúng ta cần hiển thị menu điều hướng mới trong chủ đề WordPress của bạn. Địa điểm phổ biến nhất nơi các menu điều hướng thường được đặt nằm trong phần header của trang web.

Để hiển thị location, ta sẽ dùng hàm wp_nav_menu(). Hàm này nó có nhiều tham số hơn là cái hàm tạo location. Bây giờ hãy thử mở theme của bạn lên và chèn hàm này vào vị trí mà bạn thích, như file header.php chẳng hạn.

<?php
wp_nav_menu( array( 
    'theme_location' => 'my-custom-menu', // tên location cần hiển thị
    'container_class' => 'custom-menu-class' ) );  //class của container
?>

Ở trên mình đã lượt bỏ đi khá nhiều tham số không bắt buộc, bạn có thể xem danh sách đầy đủ tại đây.

Bạn có thể sử dụng lớp CSS .custom_menu_class để tạo kiểu cho các menu của mình. Đây là một mẫu CSS để giúp bạn bắt đầu:

div.custom-menu-class ul {
    list-style-type: none;
    list-style: none;
    list-style-image: none;
}
div.custom-menu-class li {
    padding: 20px;
    display: inline;
}

Lời kết

Như vậy là mình đã hoàn thành xong bài viết hướng dẫn tạo menu trong WordPress rồi trong bài viết tới mình sẽ hướng dẫn các bạn tạo menu thân thiện với thiết bị di động trong WordPress.

Tạo menu thân thiện với thiết bị di động trong WordPress

Bạn có thể thêm hiệu ứng trượt (ở trên), hiệu ứng thả xuống cho các menu di động.

Mình có hướng dẫn từng bước chi tiết về cách tạo các menu WordPress đáp ứng cho thiết bị di động.

Leave a Reply

Your email address will not be published. Required fields are marked *

arrow