{"id":1859,"date":"2025-05-19T08:25:17","date_gmt":"2025-05-19T07:25:17","guid":{"rendered":"https:\/\/ghanim-solution.de\/?p=1859"},"modified":"2025-05-19T09:21:32","modified_gmt":"2025-05-19T08:21:32","slug":"bootstrap-5-navigation-in-wordpress-block-theme-integrieren-ohne-plugin","status":"publish","type":"post","link":"https:\/\/ghanim-solution.de\/index.php\/2025\/05\/19\/bootstrap-5-navigation-in-wordpress-block-theme-integrieren-ohne-plugin\/","title":{"rendered":"Bootstrap 5 Navigation in WordPress Block-Theme integrieren (ohne Plugin)"},"content":{"rendered":"\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Diese Anleitung zeigt, wie du in einem modernen WordPress Block-Theme (z.\u202fB. Twenty Twenty-Four) ein eigenes responsives Men\u00fc mit <strong>Bootstrap 5<\/strong> erstellst und im Frontend einbindest \u2013 ohne den Full-Site-Editor (FSE) zu nutzen und ohne Plugin.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Voraussetzungen<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ein aktives WordPress Block-Theme (z.\u202fB. TT4)<\/li>\n\n\n\n<li>Bootstrap 5 soll eingebunden sein<\/li>\n\n\n\n<li>Zugriff auf den Theme-Ordner (per FTP oder lokal)<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">1. Men\u00fcposition registrieren<\/h4>\n\n\n\n<p>In die Datei <code>functions.php<\/code> im Child-Theme einf\u00fcgen:<\/p>\n\n\n\n<pre><code class=\"language-php\">\nfunction mytheme_register_menus() {\n    register_nav_menu('main-menu', 'Hauptmen\u00fc');\n}\nadd_action('after_setup_theme', 'mytheme_register_menus');<\/code><\/pre>\n\n\n\n<p>Danach kann im Backend unter <strong>Design > Men\u00fcs<\/strong> das Hauptmen\u00fc erstellt und dieser Position zugewiesen werden.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">2. Bootstrap Navwalker einbinden<\/h4>\n\n\n\n<p>Die Datei <code>class-bootstrap-navwalker.php<\/code> von GitHub herunterladen: \ud83d\udc49 <a href=\"https:\/\/github.com\/wp-bootstrap\/wp-bootstrap-navwalker\">https:\/\/github.com\/wp-bootstrap\/wp-bootstrap-navwalker<\/a><\/p>\n\n\n\n<p>Speichern unter:<\/p>\n\n\n\n<pre><code class=\"language-bash\">\n\/wp-content\/themes\/dein-child-theme\/parts\/class-bootstrap-navwalker.php<\/code><\/pre>\n\n\n\n<p>Dann in <code>functions.php<\/code> einf\u00fcgen:<\/p>\n\n\n\n<pre><code class=\"language-php\">\nrequire_once get_template_directory() . '\/parts\/class-bootstrap-navwalker.php';<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">3. Bootstrap-Navbar als Template-Part erstellen<\/h4>\n\n\n\n<pre><code class=\"language-bash\">\n\/wp-content\/themes\/dein-child-theme\/parts\/php\/bootstrap-nav.php\n<\/code><\/pre>\n\n\n\n<p>Inhalt:<\/p>\n\n\n\n<pre><code class=\"language-html\">&lt;nav class=\"navbar navbar-expand-md navbar-light bg-light\"&gt;\n  &lt;div class=\"container-fluid\"&gt;\n    &lt;a class=\"navbar-brand\" href=\"&lt;?php echo esc_url(home_url('\/')); ?&gt;\"&gt;\n      &lt;?php bloginfo('name'); ?&gt;\n    &lt;\/a&gt;\n    &lt;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\"&gt;\n      &lt;span class=\"navbar-toggler-icon\"&gt;&lt;\/span&gt;\n    &lt;\/button&gt;\n\n    &lt;div class=\"collapse navbar-collapse\" id=\"main-menu\"&gt;\n      &lt;?php\n      wp_nav_menu(array(\n        'theme_location'  =&gt; 'main-menu',\n        'depth'           =&gt; 2,\n        'container'       =&gt; false,\n        'menu_class'      =&gt; 'navbar-nav me-auto mb-2 mb-md-0',\n        'fallback_cb'     =&gt; '__return_false',\n        'walker'          =&gt; new bootstrap_5_wp_nav_menu_walker()\n      ));\n      ?&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/nav&gt;\n<\/code><\/pre>\n\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">4. Navbar einbinden mit <code>wp_body_open<\/code><\/h4>\n\n\n\n<p>Damit die Navbar unabh\u00e4ngig vom Block-Editor geladen wird, folgenden Code in die <code>functions.php<\/code> einf\u00fcgen:<\/p>\n\n\n\n<pre><code class=\"language-php\">\nfunction theme_add_bootstrap_navbar() {\n    get_template_part('parts\/php\/bootstrap-nav');\n}\nadd_action('wp_body_open', 'theme_add_bootstrap_navbar');\n<\/code><\/pre>\n\n\n\n<p>Dadurch wird das Men\u00fc ganz oben im <code>&lt;body><\/code>-Bereich angezeigt.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">5. Bootstrap einbinden (falls nicht vorhanden)<\/h4>\n\n\n\n<p>Falls dein Theme Bootstrap nicht l\u00e4dt, kannst du es z.\u202fB. so in <code>functions.php<\/code> hinzuf\u00fcgen:<\/p>\n\n\n\n<pre><code class=\"language-php\">\nfunction enqueue_bootstrap_assets() {\n    wp_enqueue_style('bootstrap-css', 'https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/css\/bootstrap.min.css');\n    wp_enqueue_script('bootstrap-js', 'https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/js\/bootstrap.bundle.min.js', array(), null, true);\n}\nadd_action('wp_enqueue_scripts', 'enqueue_bootstrap_assets');\n<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">6. CSS anpassen<\/h4>\n\n\n\n<p>Du kannst die Darstellung des Men\u00fcs einfach \u00fcber CSS beeinflussen. Erstelle z.\u202fB. eine Datei <code>style.css<\/code> im Child-Theme oder verwende den Customizer unter <strong>Design > Customizer > Zus\u00e4tzliches CSS<\/strong>.<\/p>\n\n\n\n<p>Beispiel:<\/p>\n\n\n\n<pre><code class=\"language-css\">\n\/* Haupt-Navigationsleiste *\/\n.navbar {\n    background-color: #f8f9fa;\n    border-bottom: 2px solid #ccc;\n}\n\n\/* Men\u00fclinks *\/\n.navbar-nav .nav-link {\n    color: #333;\n    padding: 10px 15px;\n    transition: color 0.3s ease;\n}\n\n\/* Hover-Effekt *\/\n.navbar-nav .nav-link:hover {\n    color: #007bff;\n}\n\n\/* Dropdown-Men\u00fc sofort beim Hover anzeigen *\/\n@media (min-width: 768px) {\n    .navbar-nav li:hover > .dropdown-menu {\n        display: block;\n        margin-top: 0;\n    }\n\n    .dropdown-menu {\n        border: none;\n        background-color: #f0f0f0;\n    }\n}\n\n\/* Men\u00fc nur auf Desktop anzeigen *\/\n.desktop-menu-only {\n    display: none;\n}\n\n@media (min-width: 768px) {\n    .desktop-menu-only {\n        display: block;\n    }\n}\n<\/code><\/pre>\n\n\n\n<p>Diese Regeln sorgen daf\u00fcr, dass:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>das Men\u00fc modern aussieht<\/li>\n\n\n\n<li>Untermen\u00fcs sofort beim Hover angezeigt werden<\/li>\n\n\n\n<li>das Men\u00fc nur auf Desktop sichtbar ist (nicht mobil)<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Hinweise<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Das Men\u00fc ist <strong>nicht im Site-Editor sichtbar<\/strong>, weil es per PHP eingebunden ist<\/li>\n\n\n\n<li>Die Bearbeitung erfolgt klassisch \u00fcber <strong>Design > Men\u00fcs<\/strong><\/li>\n\n\n\n<li>Im Frontend ist das Men\u00fc vollst\u00e4ndig responsive mit Bootstrap-Funktionalit\u00e4t<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Ergebnis<\/h4>\n\n\n\n<p>Ein flexibles, vollst\u00e4ndig anpassbares und modernes Navigationsmen\u00fc mit Bootstrap 5, das mit klassischen WordPress-Funktionen kombiniert wird \u2013 ohne Plugin, ohne auf den Full-Site-Editor angewiesen zu sein.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Diese Anleitung zeigt, wie du in einem modernen WordPress Block-Theme (z.\u202fB. Twenty Twenty-Four) ein eigenes responsives Men\u00fc mit Bootstrap 5 erstellst und im Frontend einbindest \u2013 ohne den Full-Site-Editor (FSE) zu nutzen und ohne Plugin. Voraussetzungen 1. Men\u00fcposition registrieren In die Datei functions.php im Child-Theme einf\u00fcgen: function mytheme_register_menus() { register_nav_menu(&#8216;main-menu&#8217;, &#8216;Hauptmen\u00fc&#8217;); } add_action(&#8216;after_setup_theme&#8217;, &#8216;mytheme_register_menus&#8217;); Danach [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1870,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1859","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorised"],"_links":{"self":[{"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/posts\/1859","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/comments?post=1859"}],"version-history":[{"count":9,"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/posts\/1859\/revisions"}],"predecessor-version":[{"id":1869,"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/posts\/1859\/revisions\/1869"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/media\/1870"}],"wp:attachment":[{"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/media?parent=1859"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/categories?post=1859"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/tags?post=1859"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}