Thiết kế theme wordpress phần 5

Nếu bạn chưa xem phần 4 thì xem theo link dưới đây:

Chúng ta đi tiếp nhé bạn, hôm nay chúng ta sẽ bắt đầu từ menutop1

Hình menu top 1

Cái này là menus của wordpress, để tạo một menus bạn phải làm 2 việc

  • Đăng ký với admin wordpress
  • Gọi nó ra ngoài theme của chúng ta

Đây là mã lệnh html của phần menu top 1

Html menu top 1

Mã lệnh php:

Mở file funtions.php và gõ mã dưới đây vào:

Đăng ký menu top 1

Hàm register_nav_menus có nhiệm vụ đăng ký với admin wordpress một menu có tên là menu top 1 với id là menutop1, bạn nên nhớ id này để gọi ra theme, bây giờ bạn vào admin sẽ thấy một menu với tên menu top 1 được tạo ra

Menu top 1 trong wordpress admin

Tiếp theo chúng ta sẽ gọi nó ra tại

Hình menu top 1

Mở file header.php lên nhé bạn và gõ các lệnh sau vào:

Mã lệnh tạo menu ngoài theme

Biến mảng $defaults dùng để chứa các tùy biên cho hàm wp_nav_menu (hàm này có nhiệm vụ vạo ra các mã lệnh html của menu)

Html menu top 1

Vùng bôi đỏ đó bạn

  • ‘theme_location’ => ‘menutop1’ : theme_location chính là id lúc chúng ta đăng ký với wordpress admin
  • ‘menu’ => ”:  cái này bạn tự tìm hiểu nha, vì chưa xài nó bao giờ
  • ‘container’ => ‘ul’: container là tham số bắt buộc, đây là khai báo tag html sẽ tạo ở đây là ul
  • ‘container_class’ => ”: class của div nếu container là div, ở đây chúng ta không khai báo gì cà vì là ul
  • ‘container_id’ => ”: tưởng như trên là id của div
  • ‘menu_class’ => ”: class của ul, ở đây ul không có class trực tiêp nên chúng ta cũng không khai báo gì cả
  • ‘menu_id’ => ”: tương tự là id của ul
  • ‘echo’ => true: tham số này là để in menu
  • ‘fallback_cb’ => ‘wp_page_menu’: hàm gọi trở lại là wp_page_menu
  • ‘before’ => ”: các mã lệnh html mà bạn muốn nằm trước ul ví dụ tôi muốn chằn một img vào đây chẳn hạn
  • ‘after’ => ”: tương tự các mã sau </ul>
  • ‘link_before’ => ”: bạn cần chằn một cài gì vào trước anchor text thì điền vào đây
  • ‘link_after’ => ”: tương tự  cần chèn gì sau anchor text
  • ‘items_wrap’ => ‘<ul>%3$s</ul>’: %3$s là để in ra các thẻ li, a
  • ‘depth’ => 0: cấp menu 0 là tất cả cấp
  • ‘walker’ => new add_class_to_ul_li: đây là phần tùy biến cho hàm wp_page_menu

Bạn lại mở file functions.php để khai báo tùy biến này add_class_to_ul_li

Nếu bạn xài walker là rỗng thì sẽ không có class (php) này (cái lớp add_class_to_ul_li ở đây mục đích là cắt bớt các mã css dư thừa của của thẻ li)
Okie vậy là chúng ta đã tạo xong menu top 1 giờ là lúc hưởng thành quả nào, bạn đăng nhập vào admin wordpress để tạo một menu và add nó vào menu top 1 này:
Thêm menus

Tạm dừng tại đây nhé bạn …

(còn tiếp..)

4.7/5 (3 Đánh giá)

Cập nhật bài viết mới qua Email


Bình luận

Đăng ký nhận tin mới
đăng ký nhận tin mới

Hướng dẫn thiết kế theme

Các functions thường dùng

  • Hotline: 0912 889 416

Mọi sự sao chép xin ghi rõ nguồn là fcwordpress.net

Chuyên trang về wordpress: hướng dẫn thiết kế theme, plugin, thủ thuật wordpress