Wenn es um Dropdown-Menüs geht, war ich schon immer ein großer SuperFish-Fan. Das SuperFish jQuery-Plug-in ist nicht nur super einfach zu verwenden und anzupassen, sondern Ihnen wird auch alles gegeben, sodass Sie den Code praktisch nur kopieren und in Ihr Design einfügen müssen.
Das Hinzufügen von SuperFish zu WordPress ist eigentlich eine sehr einfache Aufgabe, aber für diejenigen, die gerade erst anfangen, kann es etwas schwieriger sein oder Sie können es falsch machen (z. B. das Aufrufen des Skripts in Ihrer header.php-Datei). Der folgende Beitrag führt Sie also durch alle Schritte zum Hinzufügen des Dropdown-Menüs zu Ihrem Design.
Schritt 1: Laden Sie das SuperFish-Plugin herunter
Der erste Schritt ist einfach der Besuch der SuperFisch Download-Seite und laden Sie Ihren Code herunter. Ich schlage vor, einfach die .ZIP-Datei herunterzuladen, die alles enthält, was Sie brauchen. Es gibt auch eine Github-Seite, auf der ich Ihnen empfehle, ein Lesezeichen zu setzen, falls Sie zusätzliche Hilfe benötigen oder Probleme mit dem js-Skript haben, die Sie dort posten können.
Schritt 2: Fügen Sie SuperFish CSS & JS zu Ihrem Designordner hinzu
Als nächstes möchten Sie den Inhalt aus dem Zip-Ordner extrahieren und in den Ordner des Themas hochladen, an dem Sie arbeiten.
- Kopieren Sie den Inhalt von superfish.css in Ihre style.css
- Kopieren Sie den Inhalt der superfish-navbar.css-Datei in die style.css-Datei Ihres Themes – dies gibt ihm den Stil, den Sie danach bearbeiten können
- Ziehen Sie die Dateien superfish.js und supersubs.jps auf Ihr Design – ich bevorzuge es, sie in einen Ordner namens „js“ zu legen.
Schritt 3: Starten Sie das SuperFish-Skript
Nachdem Sie nun das gesamte CSS und JS zu Ihrem Design hinzugefügt haben, möchten Sie das JS aufrufen und das Skript starten. Ich zeige Ihnen zunächst, wie Sie Ihre Skripte richtig in Ihrer Datei functions.php aufrufen. Zuletzt gebe ich Ihnen den Code, der in Ihre header.php eingefügt werden sollte, um das Skript zu starten.
Fügen Sie Ihrer Functions.php-Datei hinzu, um die Skripte einzureihen
// Load superfish scripts
function myprefix_load_superfish_scripts() {
// load jquery if it isn't
wp_enqueue_script( 'jquery' );
// SuperFish Scripts
wp_enqueue_script( 'superfish', get_template_directory_uri() . '/js/superfish.js' );
wp_enqueue_script( 'supersubs', get_template_directory_uri() . '/js/supersubs.js' );
}
add_action( 'wp_enqueue_scripts', 'myprefix_load_superfish_scripts' );
Beachten Sie, dass wir get_template_directory_uri() verwenden, das auf Ihr übergeordnetes Design verweist. Wenn Sie ein untergeordnetes Design verwenden, stellen Sie sicher, dass Sie dies stattdessen in get_stylesheet_directory_uri() ändern, was auf Ihr untergeordnetes Design verweist.
Fügen Sie den folgenden Code hinzu, um das SuperFish-Skript zu starten
Sie können entweder den folgenden Code zur Datei functions.php hinzufügen, der das superFish-Skript startet, indem Sie das Javascript vor dem schließenden Body-Tag in die Fußzeile der Website einfügen. Oder Sie können Ihr Javascript natürlich in einer eigenen Datei platzieren und über die vorherige Funktion laden.
function myprefix_start_superfish() { ?>
<script type="text/javascript">
jQuery( function( $ ) {
$( document ).ready( function() {
$('ul.sf-menu').supersubs( {
minWidth : 16, // minimum width of sub-menus in em units
maxWidth : 40, // maximum width of sub-menus in em units
extraWidth : 1 // extra width can ensure lines don't sometimes turn over
} ).superfish();
} );
} );
</script>
<?php }
add_action( 'wp_footer', 'myprefix_start_superfish' );
Schritt 4: Fügen Sie der WP_Nav_Menu-Funktion die sf-menu-Klasse hinzu
Jetzt müssen Sie nur noch das „sf-Menü” Klasse zu Ihrer Navigation Ul. Dies ist die Klasse, die verwendet wird, um Ihr Menü in ein SuperFish-Dropdown-Menü umzuwandeln. Wenn Sie zuvor eine Navigationsleiste in Ihrem Design hatten, sollten Sie alle Stile entfernen und einfach den PHP-Code für das Menü belassen (da Sie in Schritt 2 den gesamten Stil hinzugefügt haben, der für das Dropdown-Menü erforderlich ist).
Irgendwo in der Kopfzeile Ihres Designs oder wenn Sie es nicht finden können, suchen Sie schnell die Designdateien mit dem Texteditor, den Sie verwenden, um den Designcode zu ändern, und suchen Sie die Funktion „wp_nav_menu“ für das Menü, das Sie ändern möchten . Sobald Sie ihn gefunden haben, bearbeiten Sie einfach den Parameter „menu_class“ (oder fügen Sie ihn hinzu, falls er nicht vorhanden ist), damit er die enthält sf-Menü Klasse wie im folgenden Beispiel:
wp_nav_menu( array(
'theme_location' => 'primary',
'sort_column' => 'menu_order',
'menu_class' => 'sf-menu',
'fallback_cb' => 'default_menu'
) );
Wenn Sie jetzt ein Thema von Grund auf neu erstellen und noch keine Menübereiche definiert und zur Website hinzugefügt haben und Sie nicht sicher sind, wie, werfen Sie einen Blick auf die folgenden 2 hilfreichen Dokumentationsseiten im WordPress-Codex: