{"id":9436,"date":"2015-11-18T18:27:52","date_gmt":"2015-11-18T17:27:52","guid":{"rendered":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/?p=9436"},"modified":"2022-04-11T13:38:49","modified_gmt":"2022-04-11T11:38:49","slug":"bootstrap-navigation-wordpress","status":"publish","type":"post","link":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/bootstrap-navigation-wordpress\/","title":{"rendered":"Bootstrap-Navigation in WordPress implementieren"},"content":{"rendered":"\n

Bootstrap ist ein beliebter Baukasten f\u00fcr responsive Webdesigns. Wir zeigen Dir am Beispiel einer Navigationsleiste, wie Du Komponenten in WordPress einf\u00fcgst. <\/p>\n\n\n\n\n\n\n\n

Bootstrap ist ein Open-Source-Framework f\u00fcr Webdesigner mit fertigen Buttons, Navigationsleisten, Grid-Systemen, Tabellen und vielem mehr. Als Basis dienen vorformatierte CSS-Komponenten, typografische Elemente und JavaScript. Die ben\u00f6tigten Dateien und Code-Bl\u00f6cke werden auf GitHub ver\u00f6ffentlicht und k\u00f6nnen frei verwendet werden.<\/p>\n\n\n\n

In diesem Beitrag<\/a> haben wir beschrieben, wie Du ein Basis-Theme generierst und Bootstrap in WordPress grunds\u00e4tzlich einbindest. Dieses Vorgehen funktioniert nat\u00fcrlich auch ohne lokale Testumgebung (was aber empfehlenswert ist) und mit anderen Themes. Darauf aufbauend zeigen wir Dir im Folgenden am Beispiel einer Navigationsleiste, wie Du Komponenten in WordPress einf\u00fcgst. Voraussetzung ist eine WordPress-Installation sowie WordPress- und PHP-Kenntnisse<\/strong>.<\/p>\n\n\n\n

Wichtig: aus Sicherheitsgr\u00fcnden sollte mindestens ein alternatives Theme aktiviert sein, auf welches WordPress im Notfall zur\u00fcckgreifen kann. <\/p>\n\n\n\n

1. Vorbereitung<\/h2>\n\n\n\n

Zusammenfassend nochmal die hier gezeigten Schritte<\/a>:<\/p>\n\n\n\n

  1. Bootstrap in der aktuellen Version herunterladen und entpacken<\/li>
  2. Unterordner \u00bbbootstrap\u00ab in das Hauptverzeichnis des Themes laden<\/li>
  3. functions.php <\/strong>des Themes anpassen<\/li><\/ol>\n\n\n\n

    2. Navigationsleiste einf\u00fcgen<\/h2>\n\n\n\n

    a) Um die Navbar mit Dropdown-Men\u00fc in die Men\u00fc-Funktion von WordPress zu implementieren, l\u00e4dst Du zun\u00e4chst die class-wp-bootstrap-navwalker.php<\/a> <\/a><\/strong>von der GitHub Respository herunter und legst sie im Theme-Hauptverzeichnis ab.<\/p>\n\n\n\n

    b) Die functions.php <\/strong>muss nun erneut angepasst werden, damit sie die neue Datei aufrufen kann. F\u00fcge dazu folgende Zeile ganz ans Ende ein (verwende statt \u00bbmeintheme\u00ab den Namen Deines Themes):<\/p>\n\n\n\n

    \/\/**\n* Register Custom Navigation Walker\n*\/\nfunction register_navwalker(){\nrequire_once get_template_directory() . \u201a\/class-wp-bootstrap-navwalker.php\u2018;\n}\nadd_action( \u201aafter_setup_theme\u2018, \u201aregister_navwalker\u2018 );\n\/**\n* Register Navigation Menu\n*\/\nregister_nav_menus( array(\n\u201aprimary\u2018 => __( \u201aPrimary Menu\u2018, \u201ameintheme\u2018 ),\n) );<\/pre>\n\n\n\n
    c) Danach l\u00f6schst Du die aktuelle WordPress-Navigation in der header.php<\/strong>, die sich ebenfalls im Theme-Ordner befindet. Entferne den kompletten Code zwischen<\/p>\n\n\n\n
    <header id=\u201cmasthead\u201c class=\u201csite-header\u201c><\/pre>\n\n\n\n
    und<\/p>\n\n\n\n
    <\/header><!-- #masthead --><\/pre>\n\n\n\n
    An gleicher Stelle f\u00fcgst Du diese Zeilen ein:<\/p>\n\n\n\n
    <nav class=\u201cnavbar navbar-expand-md navbar-light bg-light\u201c role=\u201cnavigation\u201c>\n<div class=\u201ccontainer\u201c>\n<!-- Brand and toggle get grouped for better mobile display -->\n<button class=\u201cnavbar-toggler\u201c type=\u201cbutton\u201c data-toggle=\u201ccollapse\u201c data-target=\u201c#bs-example-navbar-collapse-1\u201c aria-controls=\u201cbs-example- navbar-collapse-1\u201c aria-expanded=\u201cfalse\u201c aria-label=\u201cToggle navigation\u201c>\n<span class=\u201cnavbar-toggler-icon\u201c><\/span>\n<\/button>\n<a class=\u201cnavbar-brand\u201c href=\u201c#\u201c>Navbar<\/a>\n<?php\nwp_nav_menu( array(\n\u201atheme_location\u2018\t=> \u201aprimary\u2018,\n\u201adepth\u2018\n\u201acontainer\u2018 => \u201adiv\u2018,\n\u201acontainer_class\u2018\n\u201acontainer_id\u2018\n\u201amenu_class\u2018\n\u201afallback_cb\u2018\n\u201awalker\u2018\n) );\n?>\n<\/div>\n<\/nav><\/pre>\n\n\n\n
    Der Bereich im Header sieht anschlie\u00dfend so aus:<\/p>\n\n\n\n
    \"\"
    Anstelle von \u00bbKatzenfreunde S\u00fcdsachsen\u00ab tr\u00e4gst Du als \u00bbnavbar-brand\u00ab besser die URL und den Namen Deiner Website ein.<\/figcaption><\/figure><\/div>\n\n\n\n
    3. Men\u00fc erstellen<\/h2>\n\n\n\n
    Wenn Du es bis hierhin geschafft hast, bist Du (fast) am Ziel angekommen! Nachdem Du die aktualisierten Dateien hochgeladen hast, kannst Du im Dashboard unter Design > Men\u00fcs <\/strong>ein Men\u00fc erstellen. Ggf. musst Du bestehende Men\u00fcs l\u00f6schen. Damit ein Dropdown-Men\u00fc angezeigt wird, legst Du Unterpunkte an. Setze in den Men\u00fc-Einstellungen<\/strong> bei Primary <\/strong>ein H\u00e4kchen.<\/p>\n\n\n\n
    \"\"
    WordPress-Men\u00fc-Einstellungen: Per Drag & Drop kannst Du die Men\u00fcpunkte verschieben und so hierarchisch
     gliedern.<\/figcaption><\/figure><\/div>\n\n\n\n
    Fertig!<\/h2>\n\n\n\n
    Das Ergebnis Deiner Arbeit kannst Du Dir im Frontend anschauen \u2013 ein Bootstrap- Men\u00fc im WordPress-Blog:<\/p>\n\n\n\n
    \"\"
    Desktop-Ansicht<\/figcaption><\/figure><\/div>\n\n\n\n
    \"\"
    Mobile Ansicht<\/figcaption><\/figure><\/div>\n\n\n\n
    Hinweis: Diesen Beitrag haben wir am 04.12.2020 aktualisiert.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
    Bootstrap ist ein beliebter Baukasten f\u00fcr responsive Webdesigns. Wir zeigen Dir am Beispiel einer Navigationsleiste, wie Du Komponenten in WordPress einf\u00fcgst.<\/p>\n","protected":false},"author":191,"featured_media":9481,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,490],"tags":[205,55],"acf":[],"yoast_head":"\nBootstrap-Navigation in WordPress implementieren<\/title>\n<meta name=\"description\" content=\"Bootstrap ist ein beliebter Baukasten f\u00fcr responsive Webdesigns. Wir zeigen Dir am Beispiel einer Navigationsleiste, wie Du Komponenten in Wordpress einf\u00fcgst.\" \/>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap-Navigation in WordPress implementieren\" \/>\n<meta property=\"og:description\" content=\"Bootstrap ist ein beliebter Baukasten f\u00fcr responsive Webdesigns. Wir zeigen Dir am Beispiel einer Navigationsleiste, wie Du Komponenten in Wordpress einf\u00fcgst.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/bootstrap-navigation-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"STRATO Blog DE Staging\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/strato\" \/>\n<meta property=\"article:published_time\" content=\"2015-11-18T17:27:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-04-11T11:38:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/11\/bootstrap_logo_728.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"728\" \/>\n\t<meta property=\"og:image:height\" content=\"410\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Vladimir Simovi\u0107\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@vlad_perun\" \/>\n<meta name=\"twitter:site\" content=\"@STRATO_AG\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Vladimir Simovi\u0107\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/bootstrap-navigation-wordpress\/\",\"url\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/bootstrap-navigation-wordpress\/\",\"name\":\"Bootstrap-Navigation in WordPress implementieren\",\"isPartOf\":{\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#website\"},\"datePublished\":\"2015-11-18T17:27:52+00:00\",\"dateModified\":\"2022-04-11T11:38:49+00:00\",\"author\":{\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/d2bc2cf7a9963254156626a1bdbf8388\"},\"description\":\"Bootstrap ist ein beliebter Baukasten f\u00fcr responsive Webdesigns. Wir zeigen Dir am Beispiel einer Navigationsleiste, wie Du Komponenten in Wordpress einf\u00fcgst.\",\"breadcrumb\":{\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/bootstrap-navigation-wordpress\/#breadcrumb\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/bootstrap-navigation-wordpress\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/bootstrap-navigation-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bootstrap-Navigation in WordPress implementieren\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#website\",\"url\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/\",\"name\":\"STRATO Blog DE Staging\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/d2bc2cf7a9963254156626a1bdbf8388\",\"name\":\"Vladimir Simovi\u0107\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/04\/vladimir-simovic-strato-blog-110x110.jpg\",\"contentUrl\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/04\/vladimir-simovic-strato-blog-110x110.jpg\",\"caption\":\"Vladimir Simovi\u0107\"},\"description\":\"Vladimir Simovi\u0107 arbeitet seit 2000 mit HTML & CSS und seit Januar 2004 mit WordPress. Im Laufe der Jahre hat er diverse Fachb\u00fccher und Fachartikel publiziert. Seit April 2022 ist er als Senior Online-Redakteur f\u00fcr den Blog-Bereich von STRATO verantwortlich.\",\"sameAs\":[\"https:\/\/www.vladimir-simovic.de\",\"https:\/\/twitter.com\/vlad_perun\",\"https:\/\/de.wikipedia.org\/wiki\/Vladimir_Simovic\"],\"url\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/author\/vladimir-simovic\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bootstrap-Navigation in WordPress implementieren","description":"Bootstrap ist ein beliebter Baukasten f\u00fcr responsive Webdesigns. Wir zeigen Dir am Beispiel einer Navigationsleiste, wie Du Komponenten in Wordpress einf\u00fcgst.","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"de_DE","og_type":"article","og_title":"Bootstrap-Navigation in WordPress implementieren","og_description":"Bootstrap ist ein beliebter Baukasten f\u00fcr responsive Webdesigns. Wir zeigen Dir am Beispiel einer Navigationsleiste, wie Du Komponenten in Wordpress einf\u00fcgst.","og_url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/bootstrap-navigation-wordpress\/","og_site_name":"STRATO Blog DE Staging","article_publisher":"https:\/\/www.facebook.com\/strato","article_published_time":"2015-11-18T17:27:52+00:00","article_modified_time":"2022-04-11T11:38:49+00:00","og_image":[{"width":728,"height":410,"url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/11\/bootstrap_logo_728.jpg","type":"image\/jpeg"}],"author":"Vladimir Simovi\u0107","twitter_card":"summary_large_image","twitter_creator":"@vlad_perun","twitter_site":"@STRATO_AG","twitter_misc":{"Verfasst von":"Vladimir Simovi\u0107","Gesch\u00e4tzte Lesezeit":"3 Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/bootstrap-navigation-wordpress\/","url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/bootstrap-navigation-wordpress\/","name":"Bootstrap-Navigation in WordPress implementieren","isPartOf":{"@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#website"},"datePublished":"2015-11-18T17:27:52+00:00","dateModified":"2022-04-11T11:38:49+00:00","author":{"@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/d2bc2cf7a9963254156626a1bdbf8388"},"description":"Bootstrap ist ein beliebter Baukasten f\u00fcr responsive Webdesigns. Wir zeigen Dir am Beispiel einer Navigationsleiste, wie Du Komponenten in Wordpress einf\u00fcgst.","breadcrumb":{"@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/bootstrap-navigation-wordpress\/#breadcrumb"},"inLanguage":"de-DE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stg.blog-de.strato.wpcust.com\/blog\/bootstrap-navigation-wordpress\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/bootstrap-navigation-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Bootstrap-Navigation in WordPress implementieren"}]},{"@type":"WebSite","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#website","url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/","name":"STRATO Blog DE Staging","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"de-DE"},{"@type":"Person","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/d2bc2cf7a9963254156626a1bdbf8388","name":"Vladimir Simovi\u0107","image":{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/04\/vladimir-simovic-strato-blog-110x110.jpg","contentUrl":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/04\/vladimir-simovic-strato-blog-110x110.jpg","caption":"Vladimir Simovi\u0107"},"description":"Vladimir Simovi\u0107 arbeitet seit 2000 mit HTML & CSS und seit Januar 2004 mit WordPress. Im Laufe der Jahre hat er diverse Fachb\u00fccher und Fachartikel publiziert. Seit April 2022 ist er als Senior Online-Redakteur f\u00fcr den Blog-Bereich von STRATO verantwortlich.","sameAs":["https:\/\/www.vladimir-simovic.de","https:\/\/twitter.com\/vlad_perun","https:\/\/de.wikipedia.org\/wiki\/Vladimir_Simovic"],"url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/author\/vladimir-simovic\/"}]}},"_links":{"self":[{"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/posts\/9436"}],"collection":[{"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/users\/191"}],"replies":[{"embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/comments?post=9436"}],"version-history":[{"count":63,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/posts\/9436\/revisions"}],"predecessor-version":[{"id":94050,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/posts\/9436\/revisions\/94050"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/media\/9481"}],"wp:attachment":[{"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/media?parent=9436"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/categories?post=9436"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/tags?post=9436"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}