web-dev-qa-db-fra.com

Personnaliser un tag avec une interface sémantique

Je voudrais utiliser Interface utilisateur sémantique pour aider au développement d'un modèle Wordpress pour un projet.

Pour un sous-menu, j'ai l'intention d'utiliser l'un des sous-menus Secondaires situés juste au bas de la section Pointage.

Le problème auquel je suis confronté est que WP ne semble pas autoriser la personnalisation de la balise.

Dans l'exemple des interfaces utilisateur sémantiques, il s'agit du code utilisé pour générer un sous-menu secondaire. Comment puis-je l'implémenter avec WP?

<div class="ui secondary vertical pointing menu">
  <a class="active item">
    <i class="home icon"></i> Home
  </a>
  <a class="item">
    <i class="mail icon"></i> Messages
  </a>
  <a class="item">
    <i class="user icon"></i> Friends
  </a>
</div>

Jusqu'à présent, j'ai implémenté un menu en utilisant le code suivant:

<div class="ui secondary vertical pointing menu">
    <a class="item">
      <?php wp_nav_menu( array( 'theme_location' => 'about-menu' ) ); ?>
    </a>                        
</div>

Cependant, WP affiche alors le menu sans style dessous le reste des éléments du menu. Presque comme s'ils étaient expulsés.

Est-ce que quelqu'un peut m'aider avec ça?

menussub-menu
3
Josh

Vous êtes certainement sur la bonne voie, mais wp_nav_menu affichera un menu contenant de nombreux conteneurs et noms de classe; pour le garder sémantique dans les termes de l'interface utilisateur sémantique, vous serez entre de bonnes mains si vous construisez vous-même la structure.

Obtenez le nom du menu enregistré dans le gestionnaire de menus. Vérifiez register_nav_menu dans votre functions.php si vous n'êtes pas sûr. Voici, par exemple, à quoi cela ressemble dans le thème vingt-treize:

register_nav_menu( 'primary', __( 'Navigation Menu', 'twentythirteen' ) );

(Dans votre cas, il s'agit probablement de about-menu.)

Vous pouvez utiliser l'extrait de code ci-dessous pour générer votre menu personnalisé via le nom du menu (nous pourrons obtenir automatiquement tous les détails (par exemple, emplacement, identifiant, ...) du menu enregistré).

<?php

    $menu_name = 'primary'; // this is the registered menu name

    if ( ( $locations = get_nav_menu_locations() ) && isset( $locations[ $menu_name ] ) ) :
        $menu = wp_get_nav_menu_object( $locations[ $menu_name ] );
        $menu_items = wp_get_nav_menu_items($menu->term_id);
        echo '<div class="ui secondary vertical pointing menu">';
            foreach ( (array) $menu_items as $key => $menu_item ) :
                $title = $menu_item->title;
                $class = $menu_item->classes; // get array with class names
                if ( get_the_ID() == $menu_item->object_id ) { // check for current page
                    echo '<a class="item active">';
                } else {
                    echo '<a class="item">';
                }
                    echo '<i class="item ' . implode(' ', $class) . '"></i>' . $title;
                echo '</a>';
            endforeach;
        echo '</div>';
    else :
        echo '<div class="ui error message"><p>Menu "' . $menu_name . '" not defined.</p></div>';
    endif;

?>

Regardez de plus près le code ci-dessus. Nous parcourons les éléments du menu défini. Assurez-vous d'ajouter des noms de classe (pour les icônes) dans le gestionnaire de menus. L'insertion de noms de classes (séparer plusieurs noms de classes par un espace) est facultative et masquée par défaut. vous pouvez activer le champ de saisie via Options d’écran en haut.

Mise à jour: Vous pouvez également afficher le menu avec des liens vers les pages:

<?php

  $menu_name = 'primary'; // this is the registered menu name

  if ( ( $locations = get_nav_menu_locations() ) && isset( $locations[ $menu_name ] ) ) :
    $menu = wp_get_nav_menu_object( $locations[ $menu_name ] );
    $menu_items = wp_get_nav_menu_items($menu->term_id);
    echo '<div class="ui vertical menu">';
      foreach ( (array) $menu_items as $key => $menu_item ) :
        $title = $menu_item->title;
        $url = $menu_item->url;
        $class = $menu_item->classes; // get array with class names
        if ( get_the_ID() == $menu_item->object_id ) { // check for current page
          echo '<a class="item active" href="' . $url . '">';
        } else {
          echo '<a class="item" href="' . $url . '">';
        }
          echo '<i class="item ' . implode(' ', $class) . '"></i>' . $title;
        echo '</a>';
      endforeach;
    echo '</div>';
  else :
    echo '<div class="ui error message"><p>Menu "' . $menu_name . '" not defined.</p></div>';
  endif;

?>
3
Sven