Hỗ trợ menu tùy chỉnh WordPress cho các chủ đề

Tính năng Menu tùy chỉnh của WordPress, được giới thiệu trong WordPress 3.0, cho phép tạo và duy trì các menu điều hướng trong chủ đề một cách trực quan.Ít nhất, một chủ đề tiêu chuẩn sẽ cần một menu điều hướng chính, có lẽ trong đầu trang và một menu điều hướng phụ ở chân trang. Để đạt được điều này, chúng ta cần đăng ký các menu của mình với một hàm và sau đó gọi hàm đó trên “front-end” / view, ví dụ: trong mẫu.header.php

Đăng ký (các) menu

Chúng tôi sẽ đăng ký hai menu: “Menu chính” và “Menu phụ”. Menu chính sẽ xuất hiện trong đầu trang của chúng ta và menu phụ sẽ xuất hiện ở chân trang.

Trước tiên, hãy crack mở tệp và bao gồm những thứ sau:functions.php

register_nav_menus(
  array(
    'main_menu' => __( 'Main Menu', 'butter' ),
    'secondary_menu' => __( 'Secondary Menu', 'butter' ),
  )
);

Với chức năng đơn giản đó, WordPress giờ đây biết rằng chúng ta có 2 vị trí menu. Xem qua màn hình quản trị - bằng cách điều hướng đến Appearance > Menus - giờ đây chúng ta có thể tạo menu và gán chúng cho một trong hai vị trí menu của chúng ta.

Tuy nhiên, tại thời điểm này, mặc dù chúng tôi có thể thêm, chỉnh sửa và xóa các menu của mình — gán chúng cho một trong hai vị trí của chúng tôi — chúng tôi thực sự không thể nhìn thấy các menu này trong đầu trang hoặc chân trang. Hãy khắc phục điều đó.

Hiển thị (các) menu

Bây giờ các Menu đã được đăng ký, chúng ta cần cho chủ đề biết nơi xuất chúng. Chúng tôi muốn Menu chính xuất hiện trong tiêu đề của chúng tôi, vì vậy, trong tệp header.php của chúng tôi, chúng tôi bao gồm mã sau:
<?php if ( has_nav_menu( 'main_menu' ) ) : ?>
  <nav class="main-nav">
    <?php wp_nav_menu( array( 'theme_location' => 'main_menu' ) ); ?>
  </nav>
<?php endif; ?>
Trước khi chúng tôi xuất ra đánh dấu điều hướng, trước tiên chúng tôi xác định rằng chúng tôi thực sự có một menu được gán cho vị trí main_menu và nếu có, chúng tôi bọc nó trong một

và xuất ra thẻ Không có đối số nào khác được bao gồm trong mảng, các liên kết của chúng ta sẽ được bao bọc trong các thẻ mà bản thân chúng sẽ được bao bọc chung bởi thẻ mẹ [class-less] .wp_nav_menu()wp_nav_menu()nav<li><ul>

Nếu bạn cần kiểm soát chi tiết hơn về cách xuất trình đơn, bạn sẽ muốn sử dụng các tùy chọn có liên quan / chỉ định các tham số do hàm wp_nav_menu () cung cấp cho bạn. Ví dụ: nếu bạn đang sử dụng một cái gì đó như plugin Superfish jQuery để xử lý các menu thả xuống yêu cầu bạn phải có một lớp “ ” để hoạt động bình thường, bạn có thể cần phải làm như sau:<ul>sf-menu

<?php if ( has_nav_menu( 'main_menu' ) ) : ?>
  <?php $defaults = array(
    'theme_location'  => 'main_menu',
    'echo'            => true,
    'items_wrap'      => '<ul id="%1$s" class="sf-menu"> %3$s</ul>',
    'depth'           => 0 );
  wp_nav_menu( $defaults );
  ?>
<?php endif; ?>

Đầu tiên, chúng tôi kiểm tra xem chúng tôi đã main_menuxác định menu " 'chưa và nếu có, chúng tôi chèn nội dung của nó ở đây, nếu không, chúng tôi dự phòng về mặc định mà chúng tôi có thể tùy chỉnh thêm để hiển thị các liên kết khi chúng tôi cần. Một chút quá mức cần thiết nhưng nếu bạn cần kiểm soát như vậy thì nó có sẵn cho bạn.wp_list_pages()

Nếu bạn muốn tùy chỉnh thêm menu, hãy xem trang WordPress codex đang wp_nav_menu() hoạt động.

Chúng tôi muốn menu phụ xuất hiện ở chân trang, vì vậy, theo cách tương tự như chúng tôi đã làm trong đầu trang, chúng tôi mở và bao gồm mã sau:footer.php

<?php if ( has_nav_menu( 'footer_menu' ) ) : ?>
  <nav class="footer-nav">
    <?php wp_nav_menu( array( 'theme_location' => 'footer_menu' ) ); ?>
  </nav>
<?php endif; ?>

Với điều đó, bây giờ chúng ta có thể tạo menu và gán chúng cho hai vị trí.
Việc tạo vị trí thứ ba, thứ tư và thứ năm cũng dễ dàng như việc xác định vị trí đó trong và sau đó hiển thị vị trí đó trong giao diện người dùng / mẫu.functions.php