web-dev-qa-db-fra.com

Menu de navigation HTML Bootstrap au menu Wordpress en utilisant wp_nav_menu

J'essaie de convertir mon menu HTML Bootstrap existant en menu de thème Wordpress. J'ai déjà créé un menu appelé "Primaire" dans Wordpress, mais je ne peux pas l'obtenir dans le thème exactement comme dans le HTML. Mon code HTML Bootstrap est maintenant comme ceci:

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
    <a class="navbar-brand js-scroll-trigger" href="#page-top">Logo</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive"
      aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link js-scroll-trigger" href="menu-1.html">Menu-1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link js-scroll-trigger" href="menu-2.html">Menu-2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link js-scroll-trigger" href="menu-3.html">Menu-3</a>
        </li>
        <li class="nav-item">
          <a class="nav-link js-scroll-trigger" href="menu-4.html">Menu-4</a>
        </li>
      </ul>
    </div>
  </nav>
</div>

Quelqu'un peut-il s'il vous plaît aider avec cela?

menusnavigationtwitter-bootstrap
1
istoby

Vous devez éditer les fichiers dans:

wordpress/wp-content/themes/twentyseventeen/template-parts/navigation/navigation-top.php

puis créez un lecteur personnalisé, essayez de regarder ici .

Essayez de cette façon:

<?php
/**
 * Displays top navigation
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.2
 */

?>
<div class="container">
  <nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
    <a class="navbar-brand js-scroll-trigger" href="#page-top">Logo</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive"
      aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">

    <?php

  wp_nav_menu( array(
    'container'      => false,
    'menu_id'        => 'istoby-nav',
    'menu_class'     => 'navbar-nav ml-auto',
    'items_wrap'     => '<ul id="%1$s" class="%2$s">%3$s</ul>',
    'theme_location' => 'top',
    'depth'          => 5,
    'fallback_cb'    => false,
    'walker'         => new Bootstrap_Menu_Walker()
  ) );

  class Bootstrap_Menu_Walker extends Walker_Nav_Menu {

    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {

      if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
        $t = '';
        $n = '';
      } else {
        $t = "\t";
        $n = "\n";
      }
      $indent = ( $depth ) ? str_repeat( $t, $depth ) : '';

      $classes = empty( $item->classes ) ? array() : (array) $item->classes;
      $classes[] = 'menu-item-' . $item->ID;

      // Filters the arguments for a single nav menu item
      $args = apply_filters( 'nav_menu_item_args', $args, $item, $depth );

      // Filters the CSS class(es) applied to a menu item's list item element
      $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args, $depth ) );
      $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

      // Filters the ID applied to a menu item's list item element
      $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args, $depth );
      $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

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

      // it would be better to enter the class in Appearance -> Menus -> Screen Options -> CSS classes
      // $output .= $indent . '<li' . $id . $class_names .'>';
      $output .= $indent . '<li class="nav-item">';

      $atts = array();
      $atts['title']  = ! empty( $item->attr_title ) ? $item->attr_title : '';
      $atts['target'] = ! empty( $item->target )     ? $item->target     : '';
      $atts['rel']    = ! empty( $item->xfn )        ? $item->xfn        : '';
      $atts['href']   = ! empty( $item->url )        ? $item->url        : '';

      // Filters the HTML attributes applied to a menu item's anchor element
      $atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args, $depth );

      $attributes = '';
      foreach ( $atts as $attr => $value ) {
        if ( ! empty( $value ) ) {
          $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
          $attributes .= ' ' . $attr . '="' . $value . '"';
        }
      }
      $title = apply_filters( 'the_title', $item->title, $item->ID );

      // Filters a menu item's title
      $title = apply_filters( 'nav_menu_item_title', $title, $item, $args, $depth );

      $item_output = $args->before;
      $item_output .= '<a class="nav-link js-scroll-trigger"'. $attributes .'>';
      $item_output .= $args->link_before . $title . $args->link_after;
      $item_output .= '</a>';
      $item_output .= $args->after;

      $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }
  }

  ?>

    </div>
  </nav>
</div>

Pour plus d'informations, regardez ici:

Vous pouvez également éditer le fichier en:

wordpress/wp-content/themes/twentyseventeen/header.php

Avez-vous déjà pensé à partir d'un thème vierge comme comprenez ?

1
benny-ben