- \n
- Das Branding:<\/strong> Dies kann den Namen der Website und h\u00e4ufig auch ein Logo beinhalten. Die Verwendung von Farben, Bildern oder Videos im Header kann dieses Branding verst\u00e4rken.<\/li>\n
- Die Hauptnavigation:<\/strong> Wenn deine Website mehr als eine Seite hat, werden die Besucher wahrscheinlich nach einem Navigationsmen\u00fc oben auf jeder Seite suchen.<\/li>\n
- Sekund\u00e4re Navigation: <\/strong>Die sekund\u00e4re Navigation kann aus Links bestehen, die unabh\u00e4ngig von der aktuellen Position des Nutzers in der prim\u00e4ren Men\u00fchierarchie sind. Denk an eine „Login“-Schaltfl\u00e4che und Icons, die zu sozialen Medienkonten oder einem Warenkorb f\u00fchren.<\/li>\n
- Suche:<\/strong> Wenn deine Website eine Suche unterst\u00fctzt, muss<\/em> das Eingabefeld f\u00fcr die Suche nicht in der Kopfzeile stehen, aber die Besucher\/innen werden es sicher nicht in der Fu\u00dfzeile suchen.<\/li>\n<\/ul>\n
Das WordPress CMS<\/a> kann Komponenten wie Kopfzeilen dynamisch generieren, indem es das Markup in Theme-Vorlagen mit Inhalten aus einer Datenbank kombiniert – wie Links zu einem Logo und Men\u00fceintr\u00e4gen – und sie in jede Seite einf\u00fcgt.<\/p>\n
Das WordPress-Theme-\u00d6kosystem bietet eine gro\u00dfe Auswahl an Designs f\u00fcr fast jede Website. Bei zehntausenden von Themes, die auf verschiedenen Marktpl\u00e4tzen zur Auswahl stehen, kann es schwierig sein, das beste f\u00fcr deine Zwecke auszuw\u00e4hlen.<\/p>\n
Wenn du ein Theme ausw\u00e4hlst und installierst<\/a>, musst du zumindest einige Komponenten – wie den Header – anpassen, um der Seite deinen Stempel aufzudr\u00fccken und sie zu deinem eigenen zu machen.<\/p>\n
Schauen wir uns an, wie man das macht.
\n<\/div><\/kinsta-auto-toc><\/p>\n Block vs. Klassisch: Eine Geschichte von zwei Themes<\/h2>\n
Wie du den Header deiner WordPress-Website anpasst, h\u00e4ngt davon ab, wie das Theme aufgebaut ist (und manchmal auch davon, wie viel du anpassen m\u00f6chtest). Es gibt drei M\u00f6glichkeiten, den Header einer WordPress-Website anzupassen:<\/p>\n
- \n
- Mit dem Seiteneditor<\/strong>: Mit WordPress 5.0<\/a> wurde ein Block-Editor f\u00fcr Website-Inhalte eingef\u00fchrt, der als Gutenberg<\/a> bekannt ist. Mit der Ver\u00f6ffentlichung von WordPress 5.9<\/a> wurde das Blockkonzept auf das Theming ausgeweitet und zu einer robusten Option f\u00fcr die vollst\u00e4ndige Bearbeitung von Websites<\/a>. Der Site-Editor und die M\u00f6glichkeit, die verschiedenen Teile eines Website-Themes mit HTML-basierten Komponenten aufzubauen, brachten eine noch nie dagewesene Flexibilit\u00e4t in die native WordPress-Anpassung.<\/li>\n
- Den WordPress Customizer verwenden<\/strong>: Wir wollen nicht, dass du dich alt f\u00fchlst, aber Themes, die nur mit dem einst bahnbrechenden Customizer und den dazugeh\u00f6rigen Widgets angepasst werden k\u00f6nnen, werden „klassische“ Themes genannt. Trotz des retro klingenden Namens werden immer wieder neue Themes im klassischen Stil ver\u00f6ffentlicht, die zu den Tausenden hinzukommen, die es bereits auf dem Markt gibt. Im Vergleich zu den Site Editor- und Block-Themes bieten die Customizer- und Classic-Themes weniger Optionen f\u00fcr die Anpassung des Headers.<\/li>\n
- Direkte Bearbeitung von Themedateien<\/strong>: Du (oder jemand, den du um Hilfe bittest) brauchst ein paar Grundkenntnisse in PHP, um den Code in den klassischen WordPress-Theme-Dateien zu bearbeiten, aber das ist eine L\u00f6sung, wenn der Customizer nicht das liefert, was du f\u00fcr den Header deiner Website brauchst.<\/li>\n<\/ul>\n
Was wir hier nicht behandeln, ist die Anpassung des Headers in WordPress-Seitenerstellungsprogrammen<\/a> von Drittanbietern wie Divi<\/a> oder eine Reihe von Plugins, die speziell f\u00fcr die Gestaltung von Website-Headern (und Footern<\/a>) entwickelt wurden. Diese Plugins k\u00f6nnten sich f\u00fcr dich lohnen, wenn du die Theme-Dateien direkt bearbeiten musst und die PHP-Programmierung vermeiden willst.<\/p>\n
So bearbeitest du einen Block-Theme-Header<\/h2>\n
Wenn du Gutenberg zum Erstellen von Inhalten verwendet hast, wei\u00dft du, dass WordPress mit einer gro\u00dfen Sammlung von Bl\u00f6cken ausgeliefert wird, die du auf Seiten platzieren kannst, um alles von \u00dcberschriften, Abs\u00e4tzen und Listen bis hin zu Medien, Navigation und Formularen zu erstellen. Es gibt eine Klasse von Bl\u00f6cken, die Aufgaben wie Widgets in klassischen Themes \u00fcbernehmen, z. B. Links zu den neuesten Beitr\u00e4gen und Kommentaren generieren, eine Tag-Cloud anzeigen oder einen Kalender einf\u00fcgen.<\/p>\n
Mehrere Bl\u00f6cke k\u00f6nnen kombiniert, gestylt und als Muster gespeichert werden. Du kannst diese Komponenten auch zu den Teilen eines WordPress-Themes hinzuf\u00fcgen, die das Seitenlayout bestimmen, z. B. Kopfzeilen.<\/p>\n
Wie einzelne Bl\u00f6cke k\u00f6nnen auch Vorlagenteile in HTML-Dateien<\/a> definiert werden. Block-Themes lassen sich leicht anpassen, weil die Informationen, die diese \u00c4nderungen beschreiben, in der WordPress-Datenbank gespeichert und beim Erstellen einer Seite auf die verschiedenen Komponenten angewendet werden.<\/p>\n
Wenn wir also von der „Bearbeitung“ eines Headers in einem Block-Theme sprechen, meinen wir selten die Bearbeitung einer Datei, die in einem WordPress-Theme-Verzeichnis gespeichert ist.<\/p>\n
Unter der Haube: Ein Block-Theme-Header<\/h3>\n
Ein Blick auf den HTML-Code hinter einem Vorlagenteil wie dem Header hilft zu verstehen, was passiert, wenn du ein Theme anpasst.<\/p>\n
F\u00fcr dieses Tutorial verwenden wir das Seedlet-Theme, das es als Seedlet (Blocks)<\/a> und als das \u00e4ltere Seedlet (Classic)<\/a> gibt. Seedlet (Blocks) verwendet das Blockbase-Theme<\/a> als \u00fcbergeordnetes Theme, und das ist der gesamte Inhalt der Datei
header.html<\/code> in den Seedlet-Theme-Verzeichnissen:<\/p>\n<!-- wp:pattern {\"slug\":\"blockbase\/header-centered\"} \/-->\n<!-- wp:spacer {\"height\":60} -->\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<!-- \/wp:spacer --><\/code><\/pre>\nDer gr\u00f6\u00dfte Teil der Magie hinter WordPress-Bl\u00f6cken steckt in den HTML-Kommentaren. Kommentare k\u00f6nnen w\u00e4hrend des Seitenaufbaus Styling-Informationen und andere Direktiven weitergeben. Der obige HTML-Kommentar f\u00fcgt unserem Standard-Header einen vertikalen Abstand hinzu, aber die wichtigste Aktion ist die Aufforderung, ein Muster in das Blockbase-Theme aufzunehmen, das sich (nachdem
.html<\/code> angeh\u00e4ngt wurde) in der Dateiheader-centered.html<\/code> befindet.<\/p>\nDas Verzeichnis f\u00fcr Vorlagenteile innerhalb des Blockbase-Themas enth\u00e4lt diese Dateien, die sich auf eine Kopfzeile beziehen:<\/p>\n
header-centered.html\nheader-default.html\nheader-linear.html\nheader-minimal.html\nheader-rounded-logo.html\nheader-wide.html<\/code><\/pre>\nDie Datei
header-rounded-logo.html<\/code> enth\u00e4lt zum Beispiel einen HTML-Kommentar, der eine CSS-Klasse f\u00fcr das kreisf\u00f6rmige Beschneiden des Logobildes hinzuf\u00fcgt. Wenn wir auf diese Weise vorgehen wollen, k\u00f6nnten<\/em> wir unsere Seedlet-Dateiheader.html<\/code> so bearbeiten, dass sieheader-rounded-logo.html<\/code> stattheader-centered.html<\/code> enth\u00e4lt. Aber das m\u00fcssen wir nicht, denn wir k\u00f6nnen diesen Vorlagenteil im WordPress-Site-Editor anwenden und die Themedateien auf der Festplatte unangetastet lassen.<\/p>\nDen Site-Editor zur Anpassung der Kopfzeile verwenden<\/h3>\n
Wenn ein Block-Theme auf unserer Website aktiv ist, k\u00f6nnen wir den Site-Editor im WordPress-Admin-Panel<\/a> aufrufen, indem wir Erscheinungsbild<\/strong> > Editor<\/strong> w\u00e4hlen:<\/p>\n
![\"Screenshot,](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-block-theme-site-editor.png\")
Zugriff auf den Site-Editor im WordPress-Adminpanel<\/figcaption><\/figure>\n Die erste Ansicht im Seiteneditor ist ein ganzseitiges Layout, das die Kopf- und Fu\u00dfzeile sowie alle anderen Vorlagenteile enth\u00e4lt, die der Entwickler des Themes bereits hinzugef\u00fcgt hat. Wir k\u00f6nnen auf den Kopfzeilenbereich klicken, um sofort mit der Bearbeitung zu beginnen.<\/p>\n
Unten enth\u00e4lt unsere Kopfzeile einen Platzhalter f\u00fcr ein Logo und zeigt bereits den Namen der Website und die Hauptnavigation an (die jetzt nur aus „\u00dcber uns“ und „Beispielseite“ besteht). Wenn wir einen Slogan zu unseren grundlegenden Website-Informationen hinzuf\u00fcgen, wird er auch hier erscheinen.<\/p>\n
Diese Elemente der Website-Identit\u00e4t erscheinen bereits in unserer Kopfzeile, da der oben erw\u00e4hnte Teil der Vorlage
header-centered.html<\/code> diese Kommentare enth\u00e4lt:<\/p>\n<!-- wp:site-logo {\"align\":\"center\",\"width\":128} \/-->\n<!-- wp:site-title {\"textAlign\":\"center\",\"style\":{\"spacing\":{\"padding\":{\"top\":\"30px\",\"bottom\":\"20px\"}}}} \/-->\n<!-- wp:site-tagline {\"textAlign\":\"center\",\"fontSize\":\"small\"} \/--><\/code><\/pre>\nDie Hauptnavigation wird durch diesen Kommentar erzeugt:<\/p>\n
<!-- wp:navigation {\"layout\":{\"type\":\"flex\",\"setCascadingProperties\":true,\"justifyContent\":\"center\",\"orientation\":\"horizontal\"}} \/--><\/code><\/pre>\nLass uns unser Logo hinzuf\u00fcgen:<\/p>\n
- \n
- W\u00e4hle den Logo-Platzhalter aus.<\/li>\n
- Klicke auf die Schaltfl\u00e4che Medien hinzuf\u00fcgen<\/strong>.<\/li>\n
- W\u00e4hle dein Logo in der WordPress-Mediathek aus oder lade es von der Festplatte hoch.<\/li>\n<\/ol>\n
![\"Screenshot,](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-block-theme-add-logo.png\")
Hinzuf\u00fcgen eines Logos zu einem Header-Template-Teil<\/figcaption><\/figure>\n Die Anpassung eines Website-Headers durch Hinzuf\u00fcgen eines Logos ist eine so allt\u00e4gliche Aufgabe, dass sogar die meisten klassischen WordPress-Themes diese Aufgabe im Customizer einfach machen. F\u00fcgen wir also einen Block hinzu, der nicht bereits in der Vorlage vorgesehen ist: ein sekund\u00e4res Men\u00fc am oberen Rand der Seite mit dem Eintrag: Shop<\/strong>.<\/p>\n
Zuerst schalten wir die Anzeige des Block-Inserters um, indem wir auf das Umschaltsymbol in der oberen linken Ecke des Site Editors klicken:<\/p>\n
![\"Screenshot,](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-block-theme-toggle-inserter.png\")
Umschalten des Block-Inserters<\/figcaption><\/figure>\n Wenn der Blockeinf\u00fcger aktiv ist:<\/p>\n
- \n
- Finde den Navigationsblock (du kannst nach ihm suchen).<\/li>\n
- Ziehe den Block an den oberen Rand der Kopfzeile.<\/li>\n<\/ol>\n
![\"Screenshot,](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-block-theme-add-navigation.png\")
Ziehen eines Navigationsblocks in den Kopfbereich<\/figcaption><\/figure>\n Jetzt bearbeiten wir den Navigationsblock, indem wir einen benutzerdefinierten Link (losgel\u00f6st von der Hauptnavigation) erstellen, der den Text Shop<\/strong> anzeigt und die URL unserer E-Commerce-Subdomain enth\u00e4lt:<\/p>\n
![\"Screenshot,](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-block-theme-toggle-edit-link.png\")
Wir erstellen einen Seitenlink f\u00fcr unseren neuen Navigationsblock<\/figcaption><\/figure>\n Standardm\u00e4\u00dfig ist alles in dieser Kopfzeilenvorlage auf der Seite zentriert. Wir wollen, dass der Shop-Link<\/strong> rechts schwebt. Um das zu erreichen:<\/p>\n
- \n
- Klicke auf den neuen Navigationsblock.<\/li>\n
- Klicke in der Symbolleiste auf das Symbol Artikelausrichtung \u00e4ndern<\/strong>.<\/li>\n
- W\u00e4hle Artikel rechts ausrichten.<\/strong><\/li>\n<\/ol>\n
![\"Screenshot,](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-block-theme-navigation-justify.png\")
\u00c4ndern der horizontalen Positionierung des Blocks in der Kopfzeile<\/figcaption><\/figure>\n Hier ist die fertige Kopfzeile:<\/p>\n
![\"Screenshot,](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-block-theme-secondary-navigation-after.png\")
Block-Theme-Header mit einem sekund\u00e4ren Men\u00fc, das den Shop-Link<\/strong> enth\u00e4lt<\/figcaption><\/figure>\n So \u00e4nderst du einen klassischen Theme-Header mit dem Customizer<\/h2>\n
Als die erste Version des Theme Customizer 2012 zusammen mit WordPress 3.4<\/a> ver\u00f6ffentlicht wurde, war das ein gro\u00dfer Fortschritt, denn damit konnten Administratoren das Aussehen ihrer Websites ohne Programmierkenntnisse ver\u00e4ndern.<\/p>\n
Seitdem wurde der Customizer erheblich verbessert, aber eines ist geblieben: Der Entwickler eines Themes bestimmt, was mit dem Tool angepasst werden kann und was nicht. Das steht im Gegensatz zu den freien M\u00f6glichkeiten, die Websitebetreiber mit dem blockbasierten Site Editor haben.<\/p>\n
Den WordPress-Theme Customizer verwenden<\/h3>\n
Wenn ein klassisches Theme, das den Customizer unterst\u00fctzt, auf einer Website aktiv ist, kannst du ihn im WordPress-Admin-Panel unter Darstellung<\/strong> > Anpassen<\/strong> aufrufen.<\/p>\n
![\"Screenshot,](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-classic-theme-customizer-menu.png\")
Zugriff auf den Theme-Customizer im WordPress-Adminpanel<\/figcaption><\/figure>\n Im Hauptmen\u00fc des Customizers w\u00e4hlen wir Site Identity <\/strong>aus, um die anpassbaren Komponenten im Header zu erreichen:<\/p>\n
![\"Screenshot,](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-classic-theme-customize-menu.png\")
Auswahl der Option Site Identity im klassischen Theme Customizer<\/figcaption><\/figure>\n Im Abschnitt Site Identity<\/strong> dieses Themes k\u00f6nnen wir ein Logo hinzuf\u00fcgen oder \u00e4ndern und den Titel der Website und einen Slogan bearbeiten. (Der Seitentitel und der Slogan werden zun\u00e4chst durch Eintr\u00e4ge auf der Seite Allgemeine Einstellungen<\/strong> im Admin-Panel festgelegt).<\/p>\n
Dieses Theme platziert auch die Hauptnavigation der Website in der Kopfzeile. Au\u00dferdem gibt es einen Platz f\u00fcr die Navigation in der Fu\u00dfzeile und f\u00fcr ein Men\u00fc mit Links zu sozialen Medien. Im Customizer kannst du ausw\u00e4hlen, welches Men\u00fc du jedem dieser Bereiche zuweisen m\u00f6chtest, aber die Bereiche selbst sind im Wesentlichen fest.<\/p>\n
![\"Screenshot,](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-classic-theme-select-logo.png\")
Hinzuf\u00fcgen eines Logos im Customizer f\u00fcr klassische WordPress-Themes<\/figcaption><\/figure>\n Nach einem Klick auf die oben hervorgehobene Schaltfl\u00e4che Logo ausw\u00e4hlen<\/strong> k\u00f6nnen wir ein Logo aus der WordPress-Mediathek ausw\u00e4hlen oder ein neues von der Festplatte hochladen.<\/p>\n
Unten, wenn wir ein Logo hinzugef\u00fcgt haben, k\u00f6nnen wir das Bild im Customizer entfernen oder durch ein anderes ersetzen:<\/p>\n
![\"Screenshot,](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-classic-theme-add-logo.png\")
Das Logo, das mit dem WordPress Customizer zum Header hinzugef\u00fcgt wurde<\/figcaption><\/figure>\n Unter der Haube: Was kann der Customizer anpassen?<\/h3>\n
Wie stellt der Customizer fest, ob wir ein Logo hochladen k\u00f6nnen und wo es dann platziert werden soll?<\/p>\n
Es beginnt mit diesem Eintrag im
functions.php<\/code> Skript des Themes:<\/p>\n\/**\n* Add support for core custom logo.\n*\n* @link https:\/\/codex.wordpress.org\/Theme_Logo\n*\/\nadd_theme_support(\n 'custom-logo',\n array(\n 'height' => 240,\n 'width' => 240,\n 'flex-width' => false,\n 'flex-height' => false,\n )\n);<\/code><\/pre>\nDieser Codeblock aktiviert die Schaltfl\u00e4che Logo ausw\u00e4hlen<\/strong> auf der Registerkarte Website-Identit\u00e4t<\/strong> im Customizer und den Link zu den Funktionen der Medienbibliothek.<\/p>\n
Dann wird im PHP-Code, mit dem der Header der Website erstellt wird, dieser kurze Codeschnipsel an der Stelle eingef\u00fcgt, an der das Logo erscheinen soll:<\/p>\n
<div class=\"site-logo\"><?php the_custom_logo(); ?><\/div><\/code><\/pre>\nDas Ergebnis:<\/p>\n
![\"Die](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/secondary-menu-edit-header-before.png\")
Der Website-Header nach der Aktualisierung des Logos im Theme Customizer<\/figcaption><\/figure>\n \u00c4ndern eines WordPress-Headers durch Bearbeiten der Theme-Dateien<\/h2>\n
Als wir oben den Header in einem Block-Theme mit dem Site Editor angepasst haben, haben wir ein sekund\u00e4res Men\u00fc mit einem Shop-Link<\/strong> hinzugef\u00fcgt. Wir konnten diesen Navigationsblock \u00fcberall in der Kopfzeile platzieren, wo wir wollten. In unserer klassischen Version des Themes ist kein Platz f\u00fcr ein solches Men\u00fc vorgesehen, also m\u00fcssen wir den PHP-Code f\u00fcr die Kopfzeile bearbeiten, um die \u00c4nderung vorzunehmen.<\/p>\n
Wir k\u00f6nnten einfach die entsprechende Themedatei \u00f6ffnen und den HTML-Code f\u00fcr unser sekund\u00e4res Men\u00fc manuell hinzuf\u00fcgen, aber das w\u00e4re zu kurz gedacht. Sp\u00e4ter m\u00f6chten wir vielleicht den Text unseres Einkaufslinks (Jetzt einkaufen?) aktualisieren, seine URL<\/a> \u00e4ndern oder einen weiteren Men\u00fcpunkt hinzuf\u00fcgen (Anmelden?).<\/p>\n
Wir wollen der Kopfzeile eine neue Navigation hinzuf\u00fcgen, die im Customizer registriert ist, damit der Inhalt des sekund\u00e4ren Men\u00fcs im WordPress-Men\u00fc-Editor ge\u00e4ndert werden kann, ohne dass wir zum Theme-Code zur\u00fcckkehren m\u00fcssen.<\/p>\n
Bevor du beginnst: Backup<\/h3>\n
Wenn du in den PHP-Code deines klassischen WordPress-Themes eingreifst, um den Header deiner Website anzupassen, wird das oft als Bearbeitung der Datei
header.php<\/code> beschrieben. Das ist bei vielen Themes der Fall, aber andere kombinieren mehrere Dateien, um einen einzigen Header zu erstellen.<\/p>\nBevor du \u00c4nderungen an den Themadateien vornimmst, solltest du Sicherungskopien erstellen. Hier erf\u00e4hrst du, wie du Backups erstellst<\/a> und wie du sie wiederherstellen<\/a> kannst.<\/p>\n
Auch mit Backups kann es zu Problemen kommen, wenn ein Update eines fremden Themes deine \u00c4nderungen \u00fcberschreibt. Deine \u00c4nderungen k\u00f6nnten von der Website verschwinden, bis du deine ge\u00e4nderten Themadateien aus einem Backup wiederherstellen kannst. Deshalb empfehlen wir dringend, ein Child-Theme nur f\u00fcr deine ge\u00e4nderten Dateien zu erstellen<\/a> und die Aktualisierungen auf einer provisorischen WordPress-Website<\/a> zu testen.<\/p>\n
Bearbeiten eines WordPress-Headers in einem klassischen Theme<\/h3>\n
Unser klassisches Beispiel-Theme hat im Header einen Platz f\u00fcr die Hauptnavigation reserviert. Im Customizer k\u00f6nnen wir das WordPress-Men\u00fc ausw\u00e4hlen, das wir an dieser Stelle platzieren m\u00f6chten. In unserem Fall hei\u00dft dieses Men\u00fc praktischerweise „Prim\u00e4res Men\u00fc“.<\/p>\n
Es gibt im Theme auch Pl\u00e4tze f\u00fcr die Fu\u00dfzeile und die Social-Link-Navigation, aber du kannst unten sehen, dass diese derzeit nicht aktiviert sind:<\/p>\n
![\"Screenshot,](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-theme-primary-menu-create.png\")
Bearbeiten von Men\u00fcs im Customizer eines klassischen Themes<\/figcaption><\/figure>\n Wenn wir einen Blick auf das
functions.php<\/code> Skript des Themas werfen, sehen wir, wo diese Men\u00fcpunkte zuerst referenziert werden:<\/p>\n\/\/ This theme uses wp_nav_menu() \nregister_nav_menus(\n array(\n 'primary' => __( 'Primary Navigation', 'seedlet' ),\n 'footer' => __( 'Footer Navigation', 'seedlet' ),\n 'social' => __( 'Social Links Navigation', 'seedlet' ),\n )\n);<\/code><\/pre>\nUnten f\u00fcgen wir diesem Block einen Eintrag f\u00fcr unser neues Men\u00fc „Sekund\u00e4rnavigation“ hinzu:<\/p>\n
\/\/ This theme uses wp_nav_menu() \nregister_nav_menus(\n array(\n 'primary' => __( 'Primary Navigation', 'seedlet' ),\n 'secondary' => __( 'Secondary Navigation', 'seedlet' ),\n 'footer' => __( 'Footer Navigation', 'seedlet' ),\n 'social' => __( 'Social Links Navigation', 'seedlet' ),\n )\n);<\/code><\/pre>\nWenn wir zum Customizer zur\u00fcckkehren, wird die neue Option Sekund\u00e4re Navigation <\/strong>im Bereich Men\u00fcpositionen <\/strong>angezeigt:<\/p>\n
![\"Screenshot,](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-classic-theme-secondary-menu.png\")
Sekund\u00e4re Navigationsoption, die im Theme Customizer registriert wurde<\/figcaption><\/figure>\n Wir k\u00f6nnen unserem Men\u00fc einen Namen geben (Sekund\u00e4res Men\u00fc<\/strong>) und damit beginnen, ihm Links hinzuzuf\u00fcgen. Wie beim Site Editor im blockbasierten Theme erstellen wir einen Eintrag f\u00fcr Shop<\/strong>.<\/p>\n
In der Themedatei f\u00fcr die Kopfzeile haben wir einen Code hinzugef\u00fcgt, der best\u00e4tigt, dass das sekund\u00e4re Navigationsmen\u00fc existiert und dass es mindestens einen Eintrag in der Liste der Links hat. Dann analysieren wir den Inhalt des Men\u00fcs und zeigen ihn an:<\/p>\n
<?php if ( $has_secondary_nav && $has_secondary_nav_items ) : ?>\n<div id=\"secondary-navigation\" class=\"secondary-navigation\" role=\"navigation\">\n<?php\n\/\/ Get menu slug\n$location_name = 'secondary;\n$locations = get_nav_menu_locations();\n$menu_id = $locations[ $location_name ];\n$menu_obj = wp_get_nav_menu_object( $menu_id );\nwp_nav_menu(\n array(\n 'theme_location' => 'secondary',\n 'menu_class' => 'menu-wrapper',\n 'container_class' => 'secondary-menu-container',\n 'items_wrap' => '<ul id=\"%1$s\" class=\"%2$s\">%3$s<\/ul>',\n )\n);\n?>\n<\/div><!-- #secondary-navigation -->\n<?php endif; ?> \n<div class=\"menu-button-container\">\n<?php if ( $has_secondary_nav && $has_secondary_nav_items ) : ?>\n <button id=\"secondary-open-menu\" class=\"button open\">\n <span class=\"dropdown-icon open\"><?php _e( 'Menu', 'seedlet' ); ?> <?php echo seedlet_get_icon_svg( 'menu' ); ?><\/span>\n <span class=\"hide-visually expanded-text\"><?php _e( 'expanded', 'seedlet' ); ?><\/span>\n <\/button>\n<?php endif; ?>\n<\/div><\/code><\/pre>\n - W\u00e4hle Artikel rechts ausrichten.<\/strong><\/li>\n<\/ol>\n
- W\u00e4hle dein Logo in der WordPress-Mediathek aus oder lade es von der Festplatte hoch.<\/li>\n<\/ol>\n
- Den WordPress Customizer verwenden<\/strong>: Wir wollen nicht, dass du dich alt f\u00fchlst, aber Themes, die nur mit dem einst bahnbrechenden Customizer und den dazugeh\u00f6rigen Widgets angepasst werden k\u00f6nnen, werden „klassische“ Themes genannt. Trotz des retro klingenden Namens werden immer wieder neue Themes im klassischen Stil ver\u00f6ffentlicht, die zu den Tausenden hinzukommen, die es bereits auf dem Markt gibt. Im Vergleich zu den Site Editor- und Block-Themes bieten die Customizer- und Classic-Themes weniger Optionen f\u00fcr die Anpassung des Headers.<\/li>\n
- Die Hauptnavigation:<\/strong> Wenn deine Website mehr als eine Seite hat, werden die Besucher wahrscheinlich nach einem Navigationsmen\u00fc oben auf jeder Seite suchen.<\/li>\n
![\"Screenshot,](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/secondary-menu-edit-header-after.png\")