1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Twenty Eleven und Fragen

Dieses Thema im Forum "Design" wurde erstellt von Robota, 20. Juni 2019.

  1. Robota

    Robota Well-Known Member

    Registriert seit:
    18. Juli 2015
    Beiträge:
    379
    Zustimmungen:
    16
    Hallo, für eine neue Seite habe ich ein schmales Design gesucht und Twenty Eleven gefunden.
    Anhand des Namens war mir schon klar, dass dieses älter sein muss, auf der Theme-Seite steht aber, dass es im letzten Monat erst eine neue Version gab.
    Twenty Eleven: https://wordpress.org/themes/twentyeleven/

    Nun stelle ich aber leider fest, dass es für dieses Theme anscheinend keine mobile Ansicht gibt.
    Wie bekommt man denn heraus, wer die neuen Versionen des Themes erarbeitet und veröffentlicht?
    Oder kennt ihr vielleicht noch andere Weiterentwicklungen dieses Themes oder ähnliche Themes vom Aufbau her?
    Wie sinnvoll ist es, ein wahrscheinlich schon in die Jahre gekommenes Theme (wenn es in die Jahre gekommen ist?) zu verwenden?

    LG Robota
     
    #1 Robota, 20. Juni 2019
  2. Marcus[IS]

    Marcus[IS] Well-Known Member

    Registriert seit:
    23. August 2009
    Beiträge:
    5.955
    Zustimmungen:
    175
    Wenn man die Mobile Ansicht im Entwicklertool emuliert, wird es aber scheinbar alles korrekt dargestellt. Zumindest bei meiner Lokalen Testinstallation.

    Ist ein Standard Theme von WordPress.
    https://de.wordpress.org/themes/twentyeleven/
    Könntest ja mal einen Blick in das Supportforum dort werfen.
    Falls es Probleme mit der Mobilen Ansicht gibt (Responsive Theme), könnte ich mir vorstellen, dass dies dort schon mal behandelt wurde und sicherlich auch diverse Tipps zu finden sind.
     
    #2 Marcus[IS], 20. Juni 2019
  3. Robota

    Robota Well-Known Member

    Registriert seit:
    18. Juli 2015
    Beiträge:
    379
    Zustimmungen:
    16
    Hallo Marcus, in das Supportforum habe ich schon geschaut, da werden Anfragen ja nicht oder kaum beantwortet.
    Kannst du mir mal bitte zeigen, wie die mobile Version bei dir aussieht?
     
    #3 Robota, 20. Juni 2019
  4. Marcus[IS]

    Marcus[IS] Well-Known Member

    Registriert seit:
    23. August 2009
    Beiträge:
    5.955
    Zustimmungen:
    175
    Klar.

    2011_responsive.jpg

    So sieht es bei mir unter Chrome mit Mobiler Endgeräte Emulierung in den Entwicklertools aus.

    Wenn du jetzt mit mobile Ansicht allerdings meinst, dass es ein Layout sein muss welches gegenüber der Desktop Version extra auf Mobile Endgeräte zugeschnitten ist, wirst du selber Hand anlegen und mit Media Queries im css arbeiten müssen.
    https://wiki.selfhtml.org/wiki/CSS/Media_Queries

    Ich glaube sogar, wenn du dann ein so genanntes Hamburger Menü (sind die Menübuttons mit Drei Strichen, oder auch manchmal drei Punkten) haben willst, musst du sogar mit einem Child-Theme arbeiten, da hierfür glaube ich noch ein paar Funktionserweiterungen notwendig sind.
     
    #4 Marcus[IS], 21. Juni 2019
    Robota gefällt das.
  5. Robota

    Robota Well-Known Member

    Registriert seit:
    18. Juli 2015
    Beiträge:
    379
    Zustimmungen:
    16
    Hallo Marcus, vielen Dank für das Bild, so sieht es bei mir auch aus.
    Ich dachte bei der mobilen Ansicht wirklich an das von dir erwähnte Hamburger Menü.
    Ein Child-Theme habe ich schon angelegt.
    Gibt es denn irgendwo eine ungefähre Anleitung, wie man so ein Hamburger Menü selbst erstellen kann?
     
    #5 Robota, 21. Juni 2019
  6. Marcus[IS]

    Marcus[IS] Well-Known Member

    Registriert seit:
    23. August 2009
    Beiträge:
    5.955
    Zustimmungen:
    175
    Es gibt Tutorials und Plugins bezüglich WordPress, aber ich habe allerdings auf die schnelle nur etwas auf Englisch gefunden, was recht verständlich ist um so was selber zu bauen.
    https://www.wpbeginner.com/wp-themes/how-to-create-a-mobile-ready-responsive-wordpress-menu/

    Methode 4 (Add a Slide-In Mobile Menu in WordPress) wäre ganz passend für das 2011, denke ich mal.
     
    #6 Marcus[IS], 21. Juni 2019
    Robota gefällt das.
  7. Robota

    Robota Well-Known Member

    Registriert seit:
    18. Juli 2015
    Beiträge:
    379
    Zustimmungen:
    16
    Danke für den Link.
    Ich habe die Methode 4 abgearbeitet, das Menü-Icon erscheint nun auch, ist aber leider nicht anklickbar.
    Außerdem ist links jetzt ein grauer Streifen.
    Ich hänge mal ein Screenshot an und hier geht es zu der betreffenden Seite: https://bit.ly/2MYXQCw
    Irgendwo muss da noch wohl ein Fehler sein.
     

    Anhänge:

    #7 Robota, 21. Juni 2019
  8. Marcus[IS]

    Marcus[IS] Well-Known Member

    Registriert seit:
    23. August 2009
    Beiträge:
    5.955
    Zustimmungen:
    175
    Hi,

    Stimmt. Bei mir hatte es soweit in der Sandbox funktioniert, so habe ich mal deine Webseite etwas näher betrachtet.

    Hast du das kleine Javascript (slidepanel.js) vergessen zu erstellen?
    Das wird in den Entwicklertools mit 404 not found angegeben.

    Es könnte aber auch sein, dass es nur falsch aufgerufen wird, da das Child-Theme die Datei im Verzeichnis des Twentyeleven sucht.
    In dem Fall müsste der Aufruf für das Javascript in der functions.php wie folgt aussehen.
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    So hat es zumindest bei mir funktioniert und das Script wurde aus dem js Ordner im Child-Theme gezogen..

    P.S.

    Der Graue Streifen links ist im überigen das eingeklappte Menü. ;)
    Denke mal mit ein bisschen CSS kannst du den aber weiter nach links verschwinden lassen.
     
    #8 Marcus[IS], 21. Juni 2019
    Zuletzt bearbeitet: 21. Juni 2019
    Robota gefällt das.
  9. Robota

    Robota Well-Known Member

    Registriert seit:
    18. Juli 2015
    Beiträge:
    379
    Zustimmungen:
    16
    Hallo Marcus, danke für den Tip, es lag daran, dass ich die slidepanel.js im Child-Ordner hatte, nicht im Eltern-Ordner.
    Die Codeänderung macht aber Sinn, im Child-Ordner kann die Datei bei einem Update des Themes nicht verschwinden.
    Ich habe etwas an den Positionen rumgespielt und das menu.png jetzt auch an der richtigen Stelle.

    Außerdem habe ich in der slidepanel.js den Wert left: -250 auf -300 gesetzt, somit verschwindet die Leiste links nach dem Aufruf komplett.
    Ich bin aber noch nicht dahinter gekommen, wie ich die Leiste auch beim ersten Aufruf der Seite weiter nach links verschieben kann, hast du da einen Tip für mich?

    Auch würde ich gerne die Menüpunkte im mobilen Menü untereinander anzeigen lassen, statt wie aktuell nebeneinander.
    Vielleicht hast du auch da noch einen Tip?

    Vielen Dank
     
    #9 Robota, 22. Juni 2019
  10. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.141
    Zustimmungen:
    591
    In deinen Zusätzlichen CSS hast du folgenden Block:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!

    Hier kannst du z.B. das left auf 310px und das width auf 150px, oder nach eigenen Werten ändern ;)
    Ggf bei ca. 400px Breite noch eine MediaQuery anlegen, da beginnt der linke Menürand knapp zu werden.

    Für die Menüpunkte untereinander alternativ:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
    #10 SEpp55, 22. Juni 2019
    Robota gefällt das.
  11. Robota

    Robota Well-Known Member

    Registriert seit:
    18. Juli 2015
    Beiträge:
    379
    Zustimmungen:
    16
    Hallo Sepp, danke für deine Antwort.
    Müsste das MediaQuery dann so aussehen?
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Kann das direkt unter "width: 150px;" gepostet werden oder muss diese Angabe dann auch in ein MediaQuery?
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
    #11 Robota, 22. Juni 2019
  12. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.141
    Zustimmungen:
    591
    Ein vielleicht noch bessere Lösung ....
    Du hast in den Zusätzlichen CSS den oben genannten Block beginnend mit:
    @Media screen and (max-width: 768px) {
    .....
    .....
    .....

    dort fügst du zwischen letzter und vorletzter Klammer folgendes ein:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Das sollte dann so aussehen:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Zu den MediaQieries LINK, LINK uva findet Herr Go..le
     
    #12 SEpp55, 22. Juni 2019
  13. Robota

    Robota Well-Known Member

    Registriert seit:
    18. Juli 2015
    Beiträge:
    379
    Zustimmungen:
    16
    Hallo Sepp, wenn ich den Code so wie beschrieben einsetze bleibt das Menü geöffnet und kann auch nicht mehr geschlossen werden.
     
    #13 Robota, 22. Juni 2019
  14. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.141
    Zustimmungen:
    591
    Ok, das kann ich so nicht prüfen, da der Code im Browsertool verschwindet sobald eine Seite neu geladen wird.....

    Aber, dieser Wert dürfte mit den Werten aus #10 in der sample CSS korrespondieren!
    Daher back to the roots ;-(
     
    #14 SEpp55, 22. Juni 2019
  15. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.141
    Zustimmungen:
    591
    So, nun habe ich das man auf XAMPP mit einer frischen lokalen WP-Version und dem Theme Twenty Eleven (Child) nachgebaut ;)
    Da ich nicht so der Coder bin, mal sehen obs dir ggf. auch gelingt ......?
    1. Änderung: Zum Schließen des Slidermenüs ein X eingebaut. Das ist in der slidepanel.js das erste img!
    2. Breite-Slider auf 200px
    3. in der slidepanel.js die left auf -310 gestellt.
    4. und die style.css mit
      #access li {
      width: 100%;
      } im Abschnitt @Media screen and (max-width: 768px) vor #toggle ergänzt.
    5. Die Position fü den Toggle-Button muß jeder für sich selbst einstellen ...... ;)
    Bei mir kann das Slid-Menü geöffnet und geschlossen werden über den Toggle-Button oder geschlossen über einen Menüpunkt.
     
    #15 SEpp55, 22. Juni 2019
(Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können. )
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Akzeptieren Weitere Informationen...
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Akzeptieren Weitere Informationen...
    Information ausblenden