So erstellen Sie ein Theme-Navigationsmenü in WordPress (1)

Wie erstelle ich ein Theme-Navigationsmenü in WordPress? Der folgende Artikel stellt Ihnen verschiedene Methoden zur Erstellung eines WordPress-Theme-Navigationsmenüs vor. Ich hoffe, er wird Ihnen hilfreich sein!

Bei der WordPress-Theme-Erstellung ist die Erstellung des Navigationsmenüs ein wichtiger Punkt. Der HTML-Code des Navigationsmenüs wurde geschrieben. Dieser Artikel stellt Ihnen verschiedene Methoden zum Schreiben von PHP-Code zur dynamischen Implementierung der Navigation vor. Dieser Artikel konzentriert sich nur auf die Entwicklung von dynamischem Code und zeigt Ihnen nicht, wie Sie HTML, CSS und Javascript schreiben, um ein wunderschönes Navigationsmenü zu implementieren.

Erstellung eines benutzerdefinierten WP 3.0-Menüs

Versionen nach WordPress 3.0 beginnen, benutzerdefinierte dynamische Menüs zu unterstützen. Das sogenannte dynamische Menü ermöglicht es Benutzern, zu entscheiden, welche Elemente zum Navigationsmenü hinzugefügt werden sollen, und auf das WordPress -Management zuzugreifen. Backend – Erscheinungsbild – In der Menüspalte können Sie Ihr eigenes Menü erstellen, indem Sie die entsprechende Spalte ziehen. Dies ist sowohl für WordPress-Theme-Entwickler als auch für Benutzer eine erfreuliche Sache. Um ein benutzerdefiniertes Menü zu implementieren, müssen Sie die Funktion wp_nav_menu() verwenden. Durch die Übergabe einiger Parameter an diese Funktion kann das benutzerdefinierte Menü ausgegeben werden.

Fügen Sie zunächst den folgenden Menüregistrierungscode zwischen in der Datei „functions.php“ im Theme-Verzeichnis ein, damit Sie die Funktion „wp_nav_menu“ in der Theme-Datei verwenden können:

// This theme uses wp_nav_menu() in one location.
register_nav_menus();

Dann rufen wir wp_nav_menu() in der Navigationsleiste des Themes auf, um den HTML-Code des Navigationsmenüs auszugeben:

<?php 
    // 列出顶部导航菜单，菜单名称为mymenu，只列出一级菜单
    wp_nav_menu( array( &#39;menu&#39; => &#39;mymenu&#39;, &#39;depth&#39; => 1) );
?>

Der vom obigen Code ausgegebene HTML-Code hat die folgende Form:

<div class="menu-menu-container">
    <ul class="menu" id="menu-menu">
        <li class="..." id="menu-item-1"><a href="...">首页</a></li>
        <li class="..." id="menu-item-2"><a href="...">分类A</a></li>
        ...
    </ul>
</div>

Die hier aufgeführten li-Elemente sind für Sie haben eine Spalte in Backstage – Darstellung – Menü hinzugefügt. Wenn Sie im Hintergrund kein Menü hinzugefügt haben, werden in der Navigationsleiste alle Seiten aufgelistet. Darüber hinaus fügt wp_nav_menu jedem Li eine Klasse hinzu. Wenn beispielsweise gerade eine Artikelseite geöffnet ist, ist Kategorie A die Kategorie, zu der dieser Artikel gehört Li befindet sich wie folgt: Durch das Hinzufügen dieser CSS-Attribute zur Klasse kann der Zweck erreicht werden, das aktuelle Navigationsmenü hervorzuheben, z. B. den aktuellen Menülink in Rot zu definieren:

<li class="menu-item menu-item-type-taxonomy current-post-ancestor current-menu-parent current-post-parent menu-item-5" id="menu-item-2"><a href="...">分类A</a></li>

Nun, das Aufrufen des benutzerdefinierten Menüs von WordPress 3.0 ist so einfach. wp_nav_menu verfügt auch über viele Parameter, z. B. benutzerdefinierte UL-Knoten-, ID- und Klassenparameter des übergeordneten UL-Knotens usw.

Kategorien und Seiten als Navigationsleisten verwenden

Vor WordPress 3.0 verwendeten die meisten WordPress-Themes Seiten als Navigationsleisten, und man konnte der Navigation nur Seiten hinzufügen, was nicht kostenlos genug schien. Als ich WordPress 2.7 zum ersten Mal verwendete, machte ich mir Sorgen über dieses Problem. Schließlich habe ich die Dokumentation durchgesehen, einige Informationen überprüft und festgestellt, dass ich Kategorien in der Navigation hinzugefügt habe. Weitere Informationen finden Sie im Artikel, den ich zuvor geschrieben habe:

WordPress-Kategorien erstellen Navigationsleisten und hohe Hervorhebungsanzeige

Erstellung einer unkonventionellen Navigationsleiste

Die beiden oben genannten Methoden werden alle mithilfe der mit WordPress gelieferten Funktionen implementiert. Die von ihnen eingegebenen HTML-Codes sind ebenfalls begrenzt, d. h. mithilfe von ul li So erstellen Sie die Menüliste in der Form:

<li class="menu-item menu-item-type-custom current-menu-item current_page_item menu-item-home menu-item-4" id="menu-item-1"><a href="..">首页</a></li>

Wenn der Front-End-Code des Themes nicht von Ihnen geschrieben wurde und der Navigations-Barcode sehr schlecht geschrieben ist, entspricht dies nicht der oben genannten WordPress-Standard-UL Navigationsleistenformular überhaupt, wie unten gezeigt Code:

.current-post-ancestor a, .current-menu-parent a, .current-menu-item a, .current_page_item a {
    color: red;
}

Den Front-End-Code neu schreiben? Ich glaube nicht, dass irgendjemand dazu bereit ist. Was sollen wir also tun? Was passiert außerdem, wenn die Navigationsleiste keine Kategorien und Seiten verwendet und die Verwendung benutzerdefinierter Menüs nicht zulässt? In tatsächlichen Anwendungen werden wir auch auf verschiedene und seltsame Anforderungen stoßen. Wir werden dieses Problem in der nächsten Ausgabe weiter untersuchen!

Empfohlenes Lernen: „

WordPress-Tutorial

“

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein Theme-Navigationsmenü in WordPress (1). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!