PHP Wie Wordpress Menü abhängig von Fensterbreite anders sortieren?

[BCFliege]

Hi,

ein Problem lässt mich nicht los. Ich habe auf einem Wordpress Blog das Customizr Theme installiert. Die Anpassungen habe ich soweit hinbekommen mit dem Child Theme. Ich habe jetzt die Google Custom Search in das Menü eingefügt, sodass in der Navigation ganz rechts das Eingabefeld ist, das beim Interagieren "ausfährt".

Problem:
Wenn das Menü auf Dropdown schaltet (Media Query) ist das Suchfeld auch ganz unten. Es wäre aber praktischer, wenn es ganz oben wäre und die volle Menübreite einnehmen würde. Das ist mit CSS ja nicht das Problem, aber ich verzweifle bei dem Versuch, die Listenelemente umzusortieren, sobald das Menü den Media Query erreicht.

Das reine Umsortieren geht ja in der functions.php vom Child Theme, da kann ich das Suchformular und die anderen Items einfach in der richtigen Reihenfolge angeben. Was ich bräuchte wäre so etwas wie eine Funktion die sagt:

Wenn Media Query X aktiv ist, gib das Menü mit der Suche vorne aus, ansonsten Menü normal.

Wahrscheinlich ist das Problem total simpel, aber ich komm einfach nicht drauf

Danke schonmal

 

[Daaron]

Der Server, also auch PHP, weiß nichts davon, welcher MediaQuery jetzt aktiv ist. Das ist reines Client-Verhalten. Du musst es also auch clientseitig lösen, idealerweise mit purem CSS, aber im Notfall auch mit JS.

Und ja, so etwas kann man tatsächlich mit CSS angehen. Das Flexbox-System hat auch ein "order"-Attribut, mit dem du die dargestellte Reihenfolge unabhängig der semantischen lösen kannst.
Normalerweise verwendet man das für so etwas wie das Holy-Grail-Layout (3 Spalten, Reihenfolge Mitte-Links-Rechts, weil in der Mitte der wichtigste Content liegt => oben im Code für Suchmaschinen-Gewichtung).

 

[BCFliege]

Hi,

danke für den Tipp

Wenn ich das richtig verstehe muss ich also nur dem Menü das Flex-Attribut verpassen und dem Element mit der Suche (hat auch eine eigene Klasse) sagen es soll als 1. angezeigt werden, und das muss dann einfach in das CSS mit dem Media Query? Wenns das ist war hab ich tatsächlich viel zu kompliziert gedacht

 

[Daaron]

So kann es durchaus funktionieren. Ich hab ähnliche Ansätze bereits verwendet. Auf einem meiner Projekte ist auf dem Desktop das Logo links, dann daneben ein Navigations-Icon und dann noch n Sortier-Knopf. Im Mobile-View rutscht das Logo in die Mitte und die Navi nach links.