Diese Anleitung zeigt, wie du in einem modernen WordPress Block-Theme (z. B. Twenty Twenty-Four) ein eigenes responsives Menü mit Bootstrap 5 erstellst und im Frontend einbindest – ohne den Full-Site-Editor (FSE) zu nutzen und ohne Plugin.
Voraussetzungen
- Ein aktives WordPress Block-Theme (z. B. TT4)
- Bootstrap 5 soll eingebunden sein
- Zugriff auf den Theme-Ordner (per FTP oder lokal)
1. Menüposition registrieren
In die Datei functions.php im Child-Theme einfügen:
function mytheme_register_menus() {
register_nav_menu('main-menu', 'Hauptmenü');
}
add_action('after_setup_theme', 'mytheme_register_menus');Danach kann im Backend unter Design > Menüs das Hauptmenü erstellt und dieser Position zugewiesen werden.
2. Bootstrap Navwalker einbinden
Die Datei class-bootstrap-navwalker.php von GitHub herunterladen: 👉 https://github.com/wp-bootstrap/wp-bootstrap-navwalker
Speichern unter:
/wp-content/themes/dein-child-theme/parts/class-bootstrap-navwalker.phpDann in functions.php einfügen:
require_once get_template_directory() . '/parts/class-bootstrap-navwalker.php';3. Bootstrap-Navbar als Template-Part erstellen
/wp-content/themes/dein-child-theme/parts/php/bootstrap-nav.php
Inhalt:
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="<?php echo esc_url(home_url('/')); ?>">
<?php bloginfo('name'); ?>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-menu" aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-menu">
<?php
wp_nav_menu(array(
'theme_location' => 'main-menu',
'depth' => 2,
'container' => false,
'menu_class' => 'navbar-nav me-auto mb-2 mb-md-0',
'fallback_cb' => '__return_false',
'walker' => new bootstrap_5_wp_nav_menu_walker()
));
?>
</div>
</div>
</nav>
4. Navbar einbinden mit wp_body_open
Damit die Navbar unabhängig vom Block-Editor geladen wird, folgenden Code in die functions.php einfügen:
function theme_add_bootstrap_navbar() {
get_template_part('parts/php/bootstrap-nav');
}
add_action('wp_body_open', 'theme_add_bootstrap_navbar');
Dadurch wird das Menü ganz oben im <body>-Bereich angezeigt.
5. Bootstrap einbinden (falls nicht vorhanden)
Falls dein Theme Bootstrap nicht lädt, kannst du es z. B. so in functions.php hinzufügen:
function enqueue_bootstrap_assets() {
wp_enqueue_style('bootstrap-css', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css');
wp_enqueue_script('bootstrap-js', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_bootstrap_assets');
6. CSS anpassen
Du kannst die Darstellung des Menüs einfach über CSS beeinflussen. Erstelle z. B. eine Datei style.css im Child-Theme oder verwende den Customizer unter Design > Customizer > Zusätzliches CSS.
Beispiel:
/* Haupt-Navigationsleiste */
.navbar {
background-color: #f8f9fa;
border-bottom: 2px solid #ccc;
}
/* Menülinks */
.navbar-nav .nav-link {
color: #333;
padding: 10px 15px;
transition: color 0.3s ease;
}
/* Hover-Effekt */
.navbar-nav .nav-link:hover {
color: #007bff;
}
/* Dropdown-Menü sofort beim Hover anzeigen */
@media (min-width: 768px) {
.navbar-nav li:hover > .dropdown-menu {
display: block;
margin-top: 0;
}
.dropdown-menu {
border: none;
background-color: #f0f0f0;
}
}
/* Menü nur auf Desktop anzeigen */
.desktop-menu-only {
display: none;
}
@media (min-width: 768px) {
.desktop-menu-only {
display: block;
}
}
Diese Regeln sorgen dafür, dass:
- das Menü modern aussieht
- Untermenüs sofort beim Hover angezeigt werden
- das Menü nur auf Desktop sichtbar ist (nicht mobil)
Hinweise
- Das Menü ist nicht im Site-Editor sichtbar, weil es per PHP eingebunden ist
- Die Bearbeitung erfolgt klassisch über Design > Menüs
- Im Frontend ist das Menü vollständig responsive mit Bootstrap-Funktionalität
Ergebnis
Ein flexibles, vollständig anpassbares und modernes Navigationsmenü mit Bootstrap 5, das mit klassischen WordPress-Funktionen kombiniert wird – ohne Plugin, ohne auf den Full-Site-Editor angewiesen zu sein.
Leave a Reply