Mẹo nhỏ: Để tìm kiếm chính xác các chia sẻ của f4vnn.com, hãy search trên Google với cú pháp: "Từ khóa" + "f4vnn". (Ví dụ: tắt update windows f4vnn). Tìm kiếm ngay

Hướng dẫn cách thêm Menu Bootstrap 5 cho WordPress

Hướng dẫn này sẽ hướng dẫn bạn cách thêm Menu Bootstrap 5 cho WordPress của bạn. Bạn có thể sử dụng nó để làm cho Menu WordPress của bạn Responsive, tức là menu sẽ được thu gọn và có thể chuyển đổi trên màn hình di động, nhưng đối với máy tính bảng và màn hình máy tính (màn hình lớn), nó sẽ vẫn hiển thị đầy đủ.

Hướng dẫn cách thêm Menu Bootstrap 5 cho WordPress

Hướng dẫn cách thêm Menu Bootstrap 5 cho WordPress

Giải pháp mà tôi đang nói đến là WP Bootstrap Navwalker. Nó hoàn toàn tuân thủ tất cả các nguyên tắc Đánh giá chủ đề để gửi wordpress.org. Vậy chúng ta sẽ cài đặt này như thế nào? hãy cùng chúng tôi tìm hiểu chi tiết cách thêm Menu Bootstrap 5 cho WordPress nhé.

Có thể bạn quan tâm: Những đoạn code hay dùng trong lập trình theme Worpdress

Nav-walker là gì?

Cần có trình điều hướng để tạo menu trong WordPress và hiển thị chúng trong giao diện. Để sử dụng các menu với các thành phần thanh điều hướng và thanh điều hướng Bootstrap, WordPress cần một bootstrap-nav-walker tùy chỉnh để xử lý các menu.

Cách sử dụng Nav-walker

  • Sao chép và dán lớp bootstrap_5_wp_nav_menu_walker vào tệp tin functions.php của giao diện
<?php
// bootstrap 5 wp_nav_menu walker
class bootstrap_5_wp_nav_menu_walker extends Walker_Nav_menu
{
  private $current_item;
  private $dropdown_menu_alignment_values = [
    'dropdown-menu-start',
    'dropdown-menu-end',
    'dropdown-menu-sm-start',
    'dropdown-menu-sm-end',
    'dropdown-menu-md-start',
    'dropdown-menu-md-end',
    'dropdown-menu-lg-start',
    'dropdown-menu-lg-end',
    'dropdown-menu-xl-start',
    'dropdown-menu-xl-end',
    'dropdown-menu-xxl-start',
    'dropdown-menu-xxl-end'
  ];

  function start_lvl(&$output, $depth = 0, $args = null)
  {
    $dropdown_menu_class[] = '';
    foreach($this->current_item->classes as $class) {
      if(in_array($class, $this->dropdown_menu_alignment_values)) {
        $dropdown_menu_class[] = $class;
      }
    }
    $indent = str_repeat("\t", $depth);
    $submenu = ($depth > 0) ? ' sub-menu' : '';
    $output .= "\n$indent<ul class=\"dropdown-menu$submenu " . esc_attr(implode(" ",$dropdown_menu_class)) . " depth_$depth\">\n";
  }

  function start_el(&$output, $item, $depth = 0, $args = null, $id = 0)
  {
    $this->current_item = $item;

    $indent = ($depth) ? str_repeat("\t", $depth) : '';

    $li_attributes = '';
    $class_names = $value = '';

    $classes = empty($item->classes) ? array() : (array) $item->classes;

    $classes[] = ($args->walker->has_children) ? 'dropdown' : '';
    $classes[] = 'nav-item';
    $classes[] = 'nav-item-' . $item->ID;
    if ($depth && $args->walker->has_children) {
      $classes[] = 'dropdown-menu dropdown-menu-end';
    }

    $class_names =  join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args));
    $class_names = ' class="' . esc_attr($class_names) . '"';

    $id = apply_filters('nav_menu_item_id', 'menu-item-' . $item->ID, $item, $args);
    $id = strlen($id) ? ' id="' . esc_attr($id) . '"' : '';

    $output .= $indent . '<li ' . $id . $value . $class_names . $li_attributes . '>';

    $attributes = !empty($item->attr_title) ? ' title="' . esc_attr($item->attr_title) . '"' : '';
    $attributes .= !empty($item->target) ? ' target="' . esc_attr($item->target) . '"' : '';
    $attributes .= !empty($item->xfn) ? ' rel="' . esc_attr($item->xfn) . '"' : '';
    $attributes .= !empty($item->url) ? ' href="' . esc_attr($item->url) . '"' : '';

    $active_class = ($item->current || $item->current_item_ancestor || in_array("current_page_parent", $item->classes, true) || in_array("current-post-ancestor", $item->classes, true)) ? 'active' : '';
    $nav_link_class = ( $depth > 0 ) ? 'dropdown-item ' : 'nav-link ';
    $attributes .= ( $args->walker->has_children ) ? ' class="'. $nav_link_class . $active_class . ' dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"' : ' class="'. $nav_link_class . $active_class . '"';

    $item_output = $args->before;
    $item_output .= '<a' . $attributes . '>';
    $item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after;
    $item_output .= '</a>';
    $item_output .= $args->after;

    $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
  }
}
// register a new menu
register_nav_menu('main-menu', 'Main menu');
  • Thêm mã html sau vào tệp header.php của bạn hoặc bất cứ nơi nào bạn muốn đặt menu của mình
<nav class="navbar navbar-expand-md navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-menu" aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        
        <div class="collapse navbar-collapse" id="main-menu">
            <?php
            wp_nav_menu(array(
                'theme_location' => 'main-menu',
                'container' => false,
                'menu_class' => '',
                'fallback_cb' => '__return_false',
                'items_wrap' => '<ul id="%1$s" class="navbar-nav me-auto mb-2 mb-md-0 %2$s">%3$s</ul>',
                'depth' => 2,
                'walker' => new bootstrap_5_wp_nav_menu_walker()
            ));
            ?>
        </div>
    </div>
</nav>

Kết luận

Tất cả chỉ có thế thôi, hy vọng với hướng dẫn cách thêm Menu Bootstrap 5 cho WordPress mà Blog thủ thuật máy tính f4vnn đã chia sẻ sẽ có ích với bạn, chúc bạn thành công.

Theo dõi trên

Logo Google new
5/5 - (1 bình chọn)