ví dụ code nhúng menu vào theme wordpress

ví dụ code nhúng menu vào theme wordpress là vấn đề được nhiều lập trình viên quan tâm, bởi những kiến thức trên trường lớp là không đủ, vì vậy bài ví dụ code nhúng menu vào theme wordpress sẽ chia sẻ tới bạn nhiều thông tin hữu ích

Mọi người vẫn hỏi tôi về việc học lập trình nói chung và Wordpress nói riêng có cần năng khiếu hay quá khó để tiếp cận hay không. Thì tôi có thể trả lời rằng, học lập trình cũng như việc bạn học tiếng Anh hay bất kỳ một ngôn ngữ khác, bởi lập trình...là ngôn ngữ của máy tính, để máy tính đọc và máy tính thực hiện theo yêu cầu của mình, bạn thích là học được.

Đáng lẽ ra bài này mình đã nên viết lâu rồi nhưng do thời gian qua mình tập trung vào nhiều cái quá nên mãi hôm nay mới có thể viết đầy đủ được. Sở dĩ mình viết bây giờ là do sắp tới mình có làm một tutorial làm việc với một starter theme cơ bản nên chắc chắn sẽ cần đến phần này, do đó mình cũng hy vọng là các bạn có thể nắm bắt được tốt nhất.

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ọ cũng 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.

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ần xem trước khi đọc bài này

  • Hướng dẫn Menu trong WordPress.
  • Tìm hiểu cấu trúc theme WordPress.

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

Để tạo một menu location không có gì là khó khăn, chỉ với một vài dòng đặt vào file functions.php là bạn tạo được. Nhưng trước khi tạo menu location, hãy chắc chắn là theme của bạn đã hỗ trợ tính năng menu bằng cách kiểm tra xem có đoạn dưới trong file function của theme chưa, nếu chưa thì thêm vào.

  add_theme_support( 'menus' );     

Xong rồi, bây giờ ta sẽ có một hàm tên là register_nav_menus()  với một tham số duy nhất là tên location như sau:

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

Ở đoạn trên, chúng ta sẽ tạo ra một menu location mang tên Menu chính với slug là main-nav. Cái slug sẽ là tên để chúng ta xác định khi viết code hiển thị ra ngoài, không khoảng trắng, không dấu và không in hoa.

Bây giờ hãy save lại và vào phần Appearance -> Menus -> Locations thì bạn sẽ thấy tên location mà ta vừa tạo.

ví dụ code nhúng menu vào theme wordpress

Location vừa tạo

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:

register_nav_menus(
        array(
                'main-nav' => 'Menu chính',
                'footer-nav' => 'Footer menu'
        )
); 

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

Bạn cứ hiểu là location được chỉ định hiển thị ở đâu thì menu sẽ xuất hiện ở đó khi bạn thêm vào trong Dashboard.

Để 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' => 'main-nav', // tên location cần hiển thị
     'container' => 'nav', // thẻ container của menu
     'container_class' => 'main-nav', //class của container
     'menu_class' => 'menu clearfix' // class của menu bên trong
) ); ?> 

Ở 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ước 3. Thêm menu

Sau khi chèn xong, hãy vào trang quản lý thêm menu vào location để nó hiển thị ra.

Bây giờ ra ngoài theme và dùng Firebug xem cấu trúc menu ta sẽ thấy tương tự như sau:

ví dụ code nhúng menu vào theme wordpress

Cấu trúc menu

Hãy tham chiếu cấu trúc đó với code hiển thị location mà bạn vừa viết là bạn sẽ hiểu ngay ý nghĩa của nó. Việc bây giờ của bạn chỉ là thêm CSS cho menu để nó hiển thị như một menu thật sự nhé. Ở dưới là CSS mẫu của một menu dropdown đơn giản nếu bạn làm theo ví dụ cấu trúc menu của bài này

.main-nav ul {
 text-align: left;
 margin: 0;
 padding: 15px 4px 17px 0;
 list-style: none;
}
.main-nav ul li {
 font: bold 12px/18px sans-serif;
 display: inline-block;
 margin-right: -4px;
 position: relative;
 padding: 15px 20px;
 background: #fff;
 cursor: pointer;
 -webkit-transition: all 0.2s;
 -moz-transition: all 0.2s;
 -ms-transition: all 0.2s;
 -o-transition: all 0.2s;
 transition: all 0.2s;
}
.main-nav ul li:hover {
 background: #555;
 color: #fff;
}
.main-nav ul li ul {
 padding: 0;
 position: absolute;
 top: 48px;
 left: 0;
 width: 150px;
 -webkit-box-shadow: none;
 -moz-box-shadow: none;
 box-shadow: none;
 display: none;
 opacity: 0;
 visibility: hidden;
 -webkit-transiton: opacity 0.2s;
 -moz-transition: opacity 0.2s;
 -ms-transition: opacity 0.2s;
 -o-transition: opacity 0.2s;
 -transition: opacity 0.2s;
}
.main-nav ul li ul li {
 background: #555;
 display: block;
 color: #fff;
 text-shadow: 0 -1px 0 #000;
}
.main-nav ul li ul li:hover { background: #666; }
.main-nav ul li:hover ul {
 display: block;
 opacity: 1;
 visibility: visible;
} 

Kết quả ta tạm có

ví dụ code nhúng menu vào theme wordpress

Hoàn thành menu

Mình muốn nói gì ở bài này?

Trong bài này mình không hướng dẫn bạn làm thế nào để có một menu đẹp và lộng lẫy như các trang khác, mà mình chỉ muốn cho các bạn biết cách tạo một menu trong WordPress như thế nào. Từ đó bạn có thể tự mình chuyển các mẫu menu từ HTML, CSS sang menu của WordPress một cách dễ dàng.

Do đó, nếu bạn cần làm menu thêm đẹp mắt và lộng lẫy thì nên học vững CSS và jQuery vì nói thật là thật khó để hướng dẫn tạo một menu theo đúng ý tất cả mọi người.

Hy vọng với bài viết về ví dụ code nhúng menu vào theme wordpress đã giải đáp giúp bạn phần nào về kiến thức lập trình Wordpress. Như tôi đã nói, ngôn ngữ lập trình không quan trọng bằng tư duy giải thuật, tư duy logic để giải quyết vấn đề.

Với những năm trước đây, lập trình viên là một cái nghề khó và kén chọn người học, đồng nghĩa với việc thu nhập hàng tháng của các lập trình viên luôn cao. Còn những năm gần đây, thì lập trình là môn học phổ thông, và ai cũng nên học một ngôn ngữ lập trình nào đó.

Nếu bạn còn bất kỳ câu hỏi nào trong việc học lập trình online, hãy gửi yêu cầu cho tôi qua email hoidapcode.com@gmail.com hoặc để lại comment bên dưới, tôi sẽ giải đáp trong vòng 24 giờ!

Blog hoidapcode.com là blog được tổng hợp tự động các bài học, thông tin về lập trình trên mạng internet. Nếu bạn có ý kiến hoặc đóng góp về bài viết này, hãy liên hệ với tôi!