it-swarm.com.de

Anpassen des a-Tags mit der semantischen Benutzeroberfläche

Ich möchte Semantic UI verwenden, um die Entwicklung einer Wordpress-Vorlage für ein Projekt zu unterstützen.

Für ein Untermenü beabsichtige ich, eines der Secondary Submenüs zu verwenden, die sich am unteren Rand des Abschnitts Pointing befinden.

Das Problem, mit dem ich konfrontiert bin, ist, dass WP keine Anpassung des Tags zuzulassen scheint.

In Semantic UIs-Beispiel ist dies der Code, der zum Generieren eines sekundären Untermenüs verwendet wird. Wie würde ich dies mit WP implementieren?

<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>

Bisher habe ich ein Menü mit dem folgenden Code implementiert:

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

Auf diese Weise zeigt WP das Menü ohne Stil an unter den Rest der Menüelemente. Fast so, als würden sie rausgeschoben.

Kann mir jemand dabei helfen?

3
Josh

Sie sind definitiv auf dem richtigen Weg, aber wp_nav_menu gibt ein Menü mit vielen Containern und Klassennamen aus; Wenn Sie die Struktur selbst erstellen, sind Sie in guten Händen, um die Semantik in der Semantik-Benutzeroberfläche beizubehalten.

Ruft den Namen des registrierten Menüs im Menü-Manager ab. Überprüfen Sie register_nav_menu in Ihrem functions.php, wenn Sie sich nicht sicher sind. So sieht es beispielsweise im Twenty Thirteen-Theme aus:

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

(In deinem Fall ist es wahrscheinlich about-menu.)

Sie können das folgende Snippet verwenden, um Ihr benutzerdefiniertes Menü über den Menünamen zu generieren (wir können alle Details (z. B. Speicherort, ID, ...) des registrierten Menüs automatisch abrufen).

<?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;

?>

Schauen Sie sich den obigen Code genauer an. Wir durchlaufen die Menüpunkte des definierten Menüs. Stellen Sie sicher, dass Sie Klassennamen (für die Symbole) im Menü-Manager hinzufügen. Das Einfügen von Klassennamen (mehrere Klassennamen durch ein Leerzeichen trennen) ist optional und standardmäßig ausgeblendet. Sie können das Eingabefeld über die Bildschirmoptionen oben aktivieren.

Update: Sie können das Menü auch mit Links zu den Seiten ausgeben:

<?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