Wordpress

Hướng dẫn Lấy menu và sidebar trong wordpress

Lấy menu và sidebar trong wordpress, Đây là 2 thành phần khá quan trọng của website sử dụng wordpress. Nó làm cho website đang dạ về chức năng. Cũng như giúp đở rất nhiều trong việc quản trị website một cách hiệu quả, vì thế tiếp tục trong loạt bài hướng dẫn lập trình wordpress mình xin giới thiệu cho các bạn cách lấy menu và sidebar (get menu, get sidebar).

1. Lấy menu trong wordpress, get menu trong wordpress.

Trong website wordpress thông thường thì menu được quản lý trong phần Giao diện -> menu. Nhưng đối với theme wordpress mới khởi tạo lần đầu thì sẽ không xuất hiện menu, vì thế chúng ta cần phải viết code để khởi tạo phần menu này.

Không có phần menu khi mới khởi tạo theme

Cú pháp khởi tạo menu (Đăng ký 1 menu mới).

Để khởi tạo một menu mới chúng ta thêm đoạn code sau vào file functions.php.

function register_my_menu() {
    register_nav_menu('header-menu',__( 'Menu chính' ));
}
add_action( 'init', 'register_my_menu' );

Trong đó register_nav_menu là hàm đăng ký 1 menu mới, header-menu là id của menu do lập trình viên đặt, ‘Menu chính’ là mô ta chỏ menu đó nó sẽ được hiện trong phần admin.

Thêm nội dung cho menu.

Sau khi khởi tạo menu, trong phần giao diện của admin xuất hiện thêm phần mới tên là menu 

Xuất hiện phần menu khi đã khởi tạo

Chúng ta bắt đầu thêm nội dung cho menu bằng cách.

  • Điền tên menu (Sao cho dễ quản lý)
  • Thêm 1 số menu từ thanh tùy chỉnh phía tay trái.
  • Sau đó bấm tạo trình đơn.

Sau khi bấm tạo trình đơn, trong khu vực tùy chỉnh của trình đơn các bạn sẽ thấy xuất hiện các vị trí trình đơn trong chủ đề, đây là vị trí mà chũng ta đã khai báo trong phần khởi tạo trình đơn.

Sau đó bạn click chọn vị trí và lưu lại là chúng ta đã thêm nội dung cho menu thành công!!

Hiện thị menu ra ngoài giao diện:

Để hiện thị menu ra ngoài giao diện chúng ta sử dụng đoạn code sau. Đoạn code này có thể chèn bất cứ nơi nào mà bạn muối hiển thị

<?php wp_nav_menu( 
  array( 
      'theme_location' => 'header-menu', 
      'container' => 'false', 
      'menu_id' => 'header-menu', 
      'menu_class' => 'menu'
   ) 
); ?>

Menu sẽ được hiển thị ra ngoài theo định dạng danh sách (ul, li).

Trong đó

  • wp_nav_menu là hàm get menu.
  • ‘theme_location’ là id menu mà bạn muốn lấy, ở trường họp này mình lấy id mình vừa khởi tạo ở trên
  • ‘container’ là thẻ div bao bọc bên ngoài menu, (có hoặc không).
  • ‘menu_id’ là id của thẻ ul khi hiển thị menu.
  • ‘menu_class’ là class của thẻ ul khi hiển thị menu.

Menu đã được lấy thành công! 

Ngoài ra còn nhiều chức năng khác của menu các bạn có thể xem tại đây

2. Lấy sidebar trong wordpress. (get sidebar).

Cũng giống như menu muốn hiển thị sidebar trong phần quản lý chúng ta cần phải khởi tạo 1 sidebar mới.

Khởi tại sidebar.

Để khởi tạo sidebar chúng ta copy đoạn code này vào file functions.php

if (function_exists('register_sidebar')){
    register_sidebar(array(
    'name'=> 'Cột bên',
    'id' => 'sidebar',
));
}

Trong đó: register_sidebar làm hàm khởi tạo nó sẽ có các thuộc tính truyền vào là id và name.

Thêm nội dung vài sidebar.

Sau khi khởi tạo vào admin -> giao diện các bạn sẽ thấy phần widget được hiển thị. Đây là phần chưa các widget và sidebar.

Để thêm nội dung cho sidebar, rất đơn giản các bạn kéo thả từ bên trái qua bên phải (sidebar) và điền các nội dung tùy chỉnh và sau đó lưu thay đổi. Các widget bên phải là những widget mặt định mà wordpress cung cấp cho chúng ta.

Hiển thị nội dung sidebar ra ngoài giao diện.

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar') ) : ?><?php endif; ?>

Trong đó dynamic_sidebar(‘sidebar’) ) là hàm get sidebar còn tham số ‘sidebar’id của sidebar được đặt khi khởi tạo 1 sidebar mới.

Tổng kết vềLấy menu và sidebar trong wordpress:

Menu và sidebar là 2 thành phần rất hữu ích của wordpress, nắm được 2 thành phần này sẽ giúp website của bạn linh động hơn, và dễ dàng quản lý nội dung của website. Còn khá nhiều chức năng của menu và sidebar mình chưa giới thiệu các bạn có thể lên mạng tìm hiểu thêm, với từ khóa là get menuget sidebar.

Có gì không rõ các bạn có thể CMT bên dưới, mình sẽ hỗ trợ!!

Chào thân ái và quyết thắng!!

Huy Kira

Đam mê hóa học, ưng thi vào trường kinh tế... Đậu vào trường Sư phạm, quyết tâm đi dạy... Ra trường đi làm designer, tự học frontend, chuyển qua làm PHP, được công ty đào tạo laravel... Và hiện tại đang code react native(2015) => Fullstack ... ?? tối về viết blog... (Còn tiếp...)

View Comments

      • Cám ơn Huy đã hồi âm!
        Mình muốn hiện vào trang chủ thì chèn cụ thể ra sao.
        Mong hồi âm.

  • Huy ơi mình ko hiểu sao khi gọi sidebar ra thì nó lại tự sinh các thẻ danh sách li (mỗi 1 widget tương ứng 1 li) cái này xử lý sao vậy bạn?

  • anh Huy ơi , giờ em muốn tạo 1 bài đăng , xong rồi trong bài đăng đó có 1 bài đăng con thì làm như thế nào ạ

      • em có tìm hiểu được qua theme boxtruyen , thì mỗi truyện là 1 post và trong 1 truyện lại có nhiều chap. mỗi chap đó đều có thuộc tính post_parrent là id của post , vậy bây giờ em muốn dựng theme có dạng tương tự thì làm như thế nào ạ , anh có thể giúp em được k?

  • em có tìm hiểu được qua theme boxtruyen , thì mỗi truyện là 1 post và trong 1 truyện lại có nhiều chap. mỗi chap đó đều có thuộc tính post_parrent là id của post , vậy bây giờ em muốn dựng theme có dạng tương tự thì làm như thế nào ạ , anh có thể giúp em được k?

  • Bạn ơi mình lỡ tay xóa code trong Theme Header rồi (trong thmee header ko còn dòng code nào) , giờ lấy lại code mặc định ban đầu thế nào vậy bạn

    • Bạn phải tìm theme đó rồi update lại file header.php thôi, chư ko có cách nào đâu bạn!

      • giờ mình xóa wordpress đi cài lại từ đầu là đc nhỉ, chứ tìm thì ko biết tìm đâu

  • haoem có tìm hiểu được qua theme boxtruyen , thì mỗi truyện là 1 post và trong 1 truyện lại có nhiều chap. mỗi chap đó đều có thuộc tính post_parrent là id của post , vậy bây giờ em muốn dựng theme có dạng tương tự thì làm như thế nào ạ , anh có thể giúp em được k? . Good! cảm ơn bạn đã chia sẻ.

  • anh cho em hỏi giờ em muốn thêm class vào thẻ a ở phần menu thì làm như thế nào ạ. cụ thể là ul li a

  • Chào Huy.
    mình là tuấn và mình đang học đến bài get menu của bạn.
    đây là code của mình khi mình gõ y chang đoạn trên của bạn https://www.upsieutoc.com/images/2020/05/31/erro_wordpress1.png
    và nó đã ko hiện mục menu như bạn đã hướng dẫn:
    https://www.upsieutoc.com/images/2020/05/31/imageabbc556441a5459a.png
    còn đây là phần code header của mình:
    https://www.upsieutoc.com/images/2020/05/31/imageb948af3aae95cf5d.png
    mong nhận được sự phản hồi sớm từ bạn.
    xin cảm ơn.

  • Mình muốn làm một cái menu dọc trên side bar các trang sản phẩm. có plugin nào tạo menu đẹp ko ad

Recent Posts

Cafe với Anh Huy nghe kể chuyện hành trình fonttiengviet.com

Fonttiengviet.com là một dự án website do JKS thực hiện cho khách hàng Huy Academy.…

8 tháng ago

Giới thiệu thiết kế web Quảng Nam Web – quangnamweb.com

Chắc chắn nhiều anh em khi đọc bài viết này sẽ nghĩ tôi đang quảng…

9 tháng ago

Hướng dẫn viết widget bài viết theo chuyên mục trong wordpress

Widget trong WordPress là một công cụ mạnh mẽ cho phép bạn dễ dàng thêm…

11 tháng ago

Tạo website để viết blog với chi phí thấp nhất ai cũng làm được

Hôm nay mình sẽ hướng dẫn cho anh em cách tạo website blog cực kỳ…

11 tháng ago

WordPress có cùi bắp? Có sống tốt với nghề thiết kế website wordpress?

Sống cực tốt anh em ạ :D Sau nhiều năm gắng bó với nghề thiết…

12 tháng ago

Share mẫu website blog cá nhân cực nhẹ, giống hocwordpress.vn

Nhân dịp quay lại viết blog mình share cho anh em code mẫu website blog…

12 tháng ago