wp bootstrap navwalker
v4.3.0: Version bump to 4.3.0
Dieser Code im Haupt-Repo-Zweig wird einer großen Umgestaltung unterzogen, um ihn an aktuelle Standards anzupassen und den Rückstand an PRs zusammenzuführen und zu testen, die ich zu lange hinterlassen habe. Bitte verwenden Sie während dieses Vorgangs das Tag „v4.3.0“ für eine stabile Version. https://github.com/wp-bootstrap/wp-bootstrap-navwalker/releases/tag/v4.3.0
Eine benutzerdefinierte WordPress Nav Walker-Klasse zur vollständigen Implementierung des Bootstrap 4-Navigationsstils in einem benutzerdefinierten Design mithilfe des in WordPress integrierten Menümanagers.
Dies ist eine Dienstprogrammklasse, die Ihr WordPress-Theme-Menü mit der richtigen Syntax und CSS-Klassen formatieren soll, um die Bootstrap-Dropdown-Navigation zu nutzen. Die erforderlichen Bootstrap-JS- und CSS-Dateien sind nicht enthalten – Sie müssen sie manuell einbinden.
Dieser Walker entspricht vollständig allen Theme-Review-Richtlinien für die Einreichung von WordPress.org-Themes. Für die Kompatibilität sind keine Änderungen erforderlich. Sie können jedoch optional die Textdomäne wp-bootstrap-navwalker (die in der fallback -Funktion zweimal vorkommt) durch die Textdomäne Ihres Themes ersetzen.
Zwischen Version 3 und Version 4 des Walkers gab es erhebliche Änderungen an der Codebasis. Version 4 des Walkers ist für die Verwendung mit Bootstrap 4 konzipiert und wurde nicht auf Abwärtskompatibilität mit Bootstrap 3 getestet. Ein separater Zweig für Bootstrap 3 wird hier gepflegt: https://github.com/wp-bootstrap/wp-bootstrap- navwalker/tree/v3-branch
Hier ist eine Liste der bemerkenswertesten Änderungen:
class- versehen, um den Namenskonventionen der PHP-Codierungsstandards besser zu entsprechen.class-wp-bootstrap-navwalker.phpwp-bootstrap-navwalker.phpCSS Classes statt über die Eingabe Title .sr-only -Klassennamen möglich. Platzieren Sie class-wp-bootstrap-navwalker.php in Ihrem WordPress-Theme-Ordner /wp-content/themes/your-theme/
Öffnen Sie die Datei „functions.php“ Ihres WordPress-Themes – /wp-content/themes/your-theme/functions.php – und fügen Sie den folgenden Code hinzu:
/**
* Register Custom Navigation Walker
*/
function register_navwalker (){
require_once get_template_directory () . ' /class-wp-bootstrap-navwalker.php ' ;
}
add_action ( ' after_setup_theme ' , ' register_navwalker ' );Wenn beim obigen Code Fehler auftreten, verwenden Sie eine Prüfung wie diese, um saubere Fehler zurückzugeben und die Diagnose des Problems zu erleichtern.
if ( ! file_exists ( get_template_directory () . ' /class-wp-bootstrap-navwalker.php ' ) ) {
// File does not exist... return an error.
return new WP_Error ( ' class-wp-bootstrap-navwalker-missing ' , __ ( ' It appears the class-wp-bootstrap-navwalker.php file may be missing. ' , ' wp-bootstrap-navwalker ' ) );
} else {
// File exists... require it.
require_once get_template_directory () . ' /class-wp-bootstrap-navwalker.php ' ;
} Sie müssen auch ein neues Menü in Ihrer Datei functions.php deklarieren, falls noch keines vorhanden ist.
register_nav_menus ( array (
' primary ' => __ ( ' Primary Menu ' , ' THEMENAME ' ),
) ); Fügen Sie alle wp_nav_menu() -Funktionen in Ihrem Theme hinzu oder aktualisieren Sie sie (oft in header.php zu finden), um den neuen Walker zu verwenden, indem Sie ein 'walker' -Element zum wp_nav_menu args-Array hinzufügen.
wp_nav_menu ( array (
' theme_location ' => ' primary ' ,
' depth ' => 2 , // 1 = no dropdowns, 2 = with dropdowns.
' container ' => ' div ' ,
' container_class ' => ' collapse navbar-collapse ' ,
' container_id ' => ' bs-example-navbar-collapse-1 ' ,
' menu_class ' => ' navbar-nav mr-auto ' ,
' fallback_cb ' => ' WP_Bootstrap_Navwalker::fallback ' ,
' walker ' => new WP_Bootstrap_Navwalker (),
) );Ihr Menü wird nun mit der richtigen Syntax und den richtigen Klassen formatiert, um die Bootstrap-Dropdown-Navigation zu implementieren.
Typischerweise wird das Menü mit zusätzlichem Markup umschlossen. Hier ist ein Beispiel für ein Menü fixed-top das für eine reaktionsfähige Navigation am MD-Haltepunkt minimiert wird.
<nav class="navbar navbar-expand-md navbar-light bg-light" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=" #bs - example - navbar - collapse - 1 " aria-controls= " bs - example - navbar - collapse - 1 " aria-expanded= " false " aria-label= " <? php esc_attr_e ( 'Toggle navigation' , 'your - theme - slug' ) ; ?> ">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<?php
wp_nav_menu ( array (
' theme_location ' => ' primary ' ,
' depth ' => 2 ,
' container ' => ' div ' ,
' container_class ' => ' collapse navbar-collapse ' ,
' container_id ' => ' bs-example-navbar-collapse-1 ' ,
' menu_class ' => ' nav navbar-nav ' ,
' fallback_cb ' => ' WP_Bootstrap_Navwalker::fallback ' ,
' walker ' => new WP_Bootstrap_Navwalker (),
) );
?>
</div>
</nav> Um Ihren Menüstil zu ändern, fügen Sie Bootstrap-Navigationsklassennamen zur menu_class Deklaration hinzu.
Weitere Informationen zu Navigationsklassen finden Sie in den Bootstrap-Dokumenten.
Um das Menü anzuzeigen, müssen Sie Ihr Menü mit Ihrem Themenstandort verknüpfen. Sie können dies tun, indem Sie Ihren Theme-Speicherort in der Liste „Theme-Standorte“ auswählen, während Sie ein Menü im WordPress-Menümanager bearbeiten.
Es besteht ein gewisses Interesse daran, diesen Walker zum Standard-Walker für alle Menüs zu machen. Dies kann zu unerwarteten Situationen führen, kann jedoch durch Hinzufügen dieser Funktion zu Ihrer Datei „functions.php“ erreicht werden.
function prefix_modify_nav_menu_args ( $ args ) {
return array_merge ( $ args , array (
' walker ' => new WP_Bootstrap_Navwalker (),
) );
}
add_filter ( ' wp_nav_menu_args ' , ' prefix_modify_nav_menu_args ' );Das einfache Aktualisieren des Walkers reicht möglicherweise nicht aus, damit die Menüs ordnungsgemäß funktionieren. Möglicherweise müssen Sie Wrapper oder zusätzliche Klassen hinzufügen. Dies können Sie auch über die obige Funktion tun.
Bootstrap 5 verwendet Namespace-Datenattribute. Alle data enthalten jetzt bs als Infix. Die neuen Attribute funktionieren genauso wie die alten. Hier ist die Menüumschaltfläche aus dem obigen Beispiel mit den umbenannten Datenattributen.
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=" #bs - example - navbar - collapse - 1 " aria-controls= " bs - example - navbar - collapse - 1 " aria-expanded= " false " aria-label= " <? php esc_attr_e ( 'Toggle navigation' , 'your - theme - slug' ) ; ?> ">
<span class="navbar-toggler-icon"></span>
</button> Der Walker fügt außerdem über die Methode start_el() ein Datenattribut für Dropdown-Umschaltungen hinzu. Fügen Sie dies in Ihre „functions.php“ ein, damit der Walker das eingefügte Datenattribut verwendet.
add_filter ( ' nav_menu_link_attributes ' , ' prefix_bs5_dropdown_data_attribute ' , 20 , 3 );
/**
* Use namespaced data attribute for Bootstrap's dropdown toggles.
*
* @param array $atts HTML attributes applied to the item's `<a>` element.
* @param WP_Post $item The current menu item.
* @param stdClass $args An object of wp_nav_menu() arguments.
* @return array
*/
function prefix_bs5_dropdown_data_attribute ( $ atts , $ item , $ args ) {
if ( is_a ( $ args -> walker , ' WP_Bootstrap_Navwalker ' ) ) {
if ( array_key_exists ( ' data-toggle ' , $ atts ) ) {
unset( $ atts [ ' data-toggle ' ] );
$ atts [ ' data-bs-toggle ' ] = ' dropdown ' ;
}
}
return $ atts ;
}Auf manchen Websites ist das Generieren eines großen Menüs, das sich selten bei jeder Seitenanforderung ändert, ein Mehraufwand, den Sie vermeiden möchten. In solchen Fällen kann ich Ihnen empfehlen, die Speicherung von Menüergebnissen in einem Übergangsmodus in Betracht zu ziehen.
Der größte Nachteil beim Zwischenspeichern von Navigationsmenüs mit dieser Methode besteht darin, dass die Klasse .current-menu-item oder .active nicht einfach auf das aktuell aktive Element angewendet werden kann, da WP beim Laden der Seite entscheidet, was gerade aktiv ist – und da das Menü zwischengespeichert wird Es kennt nur die aktive Seite, auf der es ursprünglich zwischengespeichert wurde.
Sie können selbst entscheiden, ob Sie diese Nachteile in Kauf nehmen möchten, um die Zeit für die Menüerstellung bei den meisten Seitenladevorgängen einzusparen. Sie können diesem Artikel von Dave Clements folgen, um zu sehen, wie wir Navigationsmenüs zwischengespeichert haben, die von diesem Walker generiert wurden: https://www.doitwithwp.com/use-transients-speed-wordpress-menus/
Stellen Sie dabei sicher, dass Sie das echo -Argument im the wp_nav_menu() -Aufruf auf FALSE setzen, damit die Ergebnisse gespeichert und nicht an die Seite zurückgegeben werden können.
Siehe auch:
Dieses Skript beinhaltete die Möglichkeit, Bootstrap-Navigationslink-Mods in Ihren Menüs über die WordPress-Menü-Benutzeroberfläche zu verwenden. Deaktivierte Links, Dropdown-Header und Dropdown-Trennlinien werden unterstützt. Darüber hinaus ist Symbolunterstützung für Glyphicons und Font Awesome integriert (Hinweis: Sie müssen die Symbol-Stylesheets oder Assets separat einbinden).
Um Ihrem Link ein Symbol hinzuzufügen, geben Sie einfach Glyphicons- oder Font Awesome-Klassennamen in das Feld „Links- CSS-Klassen“ in der Menü-Benutzeroberfläche ein und die Walker-Klasse erledigt den Rest. IE glyphicons glyphicons-bullhorn oder fa fa-arrow-left oder fas fa-arrow-left .
Damit ein Element nur mit dem Symbol angezeigt wird, wenden Sie die Bootstrap-Screenreader-Klasse sr-only neben allen Symbolklassennamen auf das Element an. Dadurch wird nur der Text ausgeblendet, der als Linktext erscheinen würde.
Um einen deaktivierten Link festzulegen, fügen Sie einfach disabled zum Feld „CSS-Klassen“ in der Menü-Benutzeroberfläche hinzu und die Walker-Klasse erledigt den Rest. Hinweis: Zusätzlich zum Hinzufügen der .disabled-Klasse wird dadurch auch die Link- href in # geändert, sodass es sich nicht um einen Link handelt, dem man folgen kann.
Überschriften, Trennlinien und Nur-Text-Elemente können innerhalb von Dropdowns hinzugefügt werden, indem Sie einen benutzerdefinierten Link hinzufügen und entweder dropdown-header , dropdown-divider oder dropdown-item-text in die CSS-Klasseneingabe einfügen. Hinweis: Dadurch wird der href für das Element entfernt und entweder in einen <span> für Kopfzeilen oder einen <div> für Teiler geändert.
Gemäß der Dokumentation für wp_nav_menu() muss man eine Instanz der benutzerdefinierten Walker-Klasse bereitstellen, um den benutzerdefinierten Walker auf das Menü anzuwenden. Da die Instanz nicht JSON-serialisierbar ist, wird die Verknüpfung zum Bearbeiten des Menüs nicht in der Customizer-Vorschau angezeigt. Um dies zu beheben, gehen Sie wie folgt vor:
wp_nav_menu( array(
'theme_location' => 'primary',
'depth' => 2, // 1 = no dropdowns, 2 = with dropdowns.
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'navbar-nav mr-auto',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
- 'walker' => new WP_Bootstrap_Navwalker(),
+ 'walker' => 'WP_Bootstrap_Navwalker',
) );functions.php hinzufügen function slug_provide_walker_instance ( $ args ) {
if ( isset ( $ args [ ' walker ' ] ) && is_string ( $ args [ ' walker ' ] ) && class_exists ( $ args [ ' walker ' ] ) ) {
$ args [ ' walker ' ] = new $ args [ ' walker ' ];
}
return $ args ;
}
add_filter ( ' wp_nav_menu_args ' , ' slug_provide_walker_instance ' , 1001 );Bitte beachten Sie das Changelog.
