Die Widgets von WordPress kann man beliebig auf der Seite positionieren, außer in der Navigation. In der Desktop Version benötigt man diese auch nicht in der Navigation, aber in der Mobilen Version werden diese ausgeblendet.
In meinem Fall wollte ich gern die Widgets: „Letzte Posts“, „Letzte Kommentare“, „Kategorien“ und „Archiv“ in der Mobilen Navigation haben:
- Erstelle eine neue Seite mit dem Namen des Widgets, z. Bsp. „Archiv“
- [Seite bearbeiten] Füge das Widget „Archiv“ in die neu erstellte Seite „Archiv“ ein und speichere die Seite ab
- [Menü bearbeiten] Füge die neu erstellte Seite zum Hauptmenü dazu
Bis hier her sollte alles kein Problem bzw. müssen wir jetzt den neu erstellten Menüpunkt „Archiv“ in der Hauptnavigation in der Desktop Version noch ausblenden, das kann man einfach mit CSS und der Anweisung „display:none“ machen.
Wir benötigen für das ausblenden noch die ID vom Menüpunkt „Archiv“. Die einfachste Möglichkeit diese ID herauszufinden ist im FireFox mit dem Add-on bzw. der Erweiterung „Web developer“. Wenn man „Web developer“ im FireFox installiert hat befindet sich im Context-Menü der rechten Maustaste der Punkt [Inspect], wenn man den Menüpunkt „Archiv“ im Hauptmenü markiert und [Inspect] betätigt wird der ausgewählte Bereich im HTML-Code angezeigt. Im HTML-Code unter id=“meineID“ findet man die automatisch von WordPress erstellte ID.
In WordPress findet man die ID vom Menü, wenn man über dem Menüpunkt fährt(Design -> Menüs -> Hauptmenü -> Menüpunkt) sieht in der Statusleiste im FireFox Browser die Url, am Ende der Url befindet sich das Kürzel/$_GET[‚variable‘] : edit-menue-item=215 (nach dem Gleichheitszeichen befindet sich immer der Wert der übergeben wird).
Jetzt muss man nur noch das „edit-“ entfernen und den Wert hinzufügen und schon hat die ID auf die man dann mit CSS zugreifen kann, also: #menue-item-215
Um das CSS einzufügen, benutzt man am besten den „Customizer“, unter dem Punkt „Zusätzliches CSS“ kann man einfach den nachfolgenden CSS-Code einfügen(Bitte die eigene ID verwenden bzw. im CSS eintragen):
.navigation #menu-item-215
{
display:none;
}