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

ausklappbare Infoboxen

Dieses Thema im Forum "Konfiguration" wurde erstellt von ill66, 14. Oktober 2016.

Schlagworte:
  1. ill66

    ill66 Member

    Registriert seit:
    19. August 2016
    Beiträge:
    24
    Zustimmungen:
    0
    Ich hätte gern, dass es in längeren Artikeln zwischendurch Infoboxen gibt - z.B. zur näheren Erläuterung eines Begriffs aus dem Artikel - die auf Klick ausklappen, so dass der 'darin' liegende Text sichtbar wird. Und es wäre schön, wenn es das elegant gleitend tun würde.

    Ich habe mir den Kopf qualmend gegoogelt, aber anscheinend ist das mit purem CSS nicht möglich (da wäre nur 'ruckartiges' Aufklappen möglich), ich komme wohl um JS nicht herum.^^° Nun hab ich aber leider nur eine sehr rudimentäre Vorstellung von JS.

    Und auch darüber hab ich mir einen Wolf gegoogelt - aber wie man eigenes JS bei einem Anliegen wie meinem idealerweise in sein WP einbindet, hab ich nicht wirklich kapiert. (ich modifiziere bisher zwar wie wild die Theme-CSS-Datei, aber bei Template-Dateien hab ich mich da noch ferngehalten bisher...)

    Könnte ich nicht eigentlich die JS-Datei in den js-Ordner meines Parent-Themes tun? Oder wird das bei einem etwaigen Update dann auch überschrieben? (wenn ich in einer bestehenden JS-Datei herumeditieren würde - klar. aber wenn ich eine eigene JS-Datei einfüge auch?)

    Help^^
     
  2. SuMu

    SuMu Well-Known Member

    Registriert seit:
    5. Januar 2006
    Beiträge:
    6.301
    Zustimmungen:
    84
  3. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.361
    Zustimmungen:
    427
    Hast du dich zum Thema CSS mal mit transition beschäftigt? Damit ist auch smoothes Aufklappen möglich.
     
  4. helix

    helix Well-Known Member

    Registriert seit:
    28. Juli 2011
    Beiträge:
    1.808
    Zustimmungen:
    27
    Doch, solange das immer nur eine Box ist, die auf- und gegebnenfalls wieder (aktiv) zugeklappt werden soll, geht das mit purem HTML / CSS.
    Man kann solche Boxen mit der Pseudoklasse target machen oder mit Checkboxen und klickbarem Label. Ich mag die Checkboxen lieber, weil mich bei der Target-Lösung stört, dass ich die dann auch in der Adresszeile des Browsers habe (und für meinen Geschmack zu tief eingreifen müsste, um das loszuwerden).
    http://tympanus.net/codrops/2012/02/21/accordion-with-css3/

    Und dann ist das Ding, dass sich nicht alle CSS-Properties animieren lassen (fließender Übergang). Es gibt nunmal keinen Übergang zwischen display: block; und display: none; … Also ein bisschen rumsuchen und rumprobieren, welcher Effekt zur Seite und zum Inhalt passt.

    Wenn du ein „echtes Accordion“ brauchst, bei dem immer nur eine Box geöffnet sein kann – dafür brauchst du dann tatsächlich JS.

    Gruß
    helix
     
  5. ill66

    ill66 Member

    Registriert seit:
    19. August 2016
    Beiträge:
    24
    Zustimmungen:
    0
    @SuMu: Ich hätte wohl explizit dazuschreiben sollen, dass ich es am liebsten ohne Plugin händeln will. Ich hab jetzt schon 15 aktiv und afaik heißt es ja, man soll so wenige wie möglich installieren.

    @SirEctor: Genau das Stichwort hatte ich u.a. in meine Suche eingebaut - es war aber irgendwie trotzdem immer JS involviert.

    @helix: Whaaa! Ok, das Stichwort "Accordion" hat mir offenbar gefehlt^^
    Das sieht vom Ding her ja schonmal toll aus!
    Aber was ist mit dieser nicht näher ausgeführten Eischränkung: "Please note: the result of this tutorial will only work as intended in browsers that support the CSS3 properties in use." - ich bin da nicht ganz up2date. Ist das ein vernachlässigbares Problem...?
     
  6. helix

    helix Well-Known Member

    Registriert seit:
    28. Juli 2011
    Beiträge:
    1.808
    Zustimmungen:
    27
    Das ist mittlerweile ein vernachlässigbares Problem. Der Artikel ist jetzt auch schon wieder ein paar Jahre alt (jaa, das geht immer so super schnell).

    In dieser Beziehung habe ich caniuse.com sehr zu schätzen gelernt …

    … und ähm ja, ich würde es nicht, wie im verlinkten Artikel, mit fest definierten Höhen machen. Das ist einfach zu unflexibel (gerade im responsive Layout ändert sich ja auch die Höhe eines Blocks sehr schnell) – dann lieber eine andere Animationsmethode wählen.

    Gruß
    helix
     
  7. ill66

    ill66 Member

    Registriert seit:
    19. August 2016
    Beiträge:
    24
    Zustimmungen:
    0
    Nach dem ich jetzt den ganzen Tag damit verbracht habe, herumzubasteln und -zuschrauben (ich hab mich wie ein verrückter Professor gefühlt^^), hab ich jetzt Anhand dieses Beispiels mir - vermutlich etwas stümperhaft - folgendes zurecht geforkt:
    Für Browser, die kein gradient wechseln können, hab ich für das Label noch eien normale Hintergrundfarbe definiert beim Label (darf man das so?^^) und außerdem einen Breakpoint eingebaut (sagt man so?) mit einer etwas geringeren Kastenbreite für Handys.
    Bisher bin ich ganz happy :D War der totale Krampf, weil das Beispiel in SCSS glaub ich war? Und WP da jedenfalls mit eingiem nicht umgehen konnte.

    So ungefähr sieht das dann aus:
    gIAYdHu.png

    Vielen Dank helix, Du hast mich mit Deinem Hinweis auf den richtige Pfad gebracht! :)
     
  8. JuliaJu

    JuliaJu Member

    Registriert seit:
    18. Oktober 2016
    Beiträge:
    7
    Zustimmungen:
    0
    Da der Beitrag noch nicht so alt ist, hoffe ich, dass es in Ordnung ist, wenn ich mich kurz dran hänge.

    Ich versuche gerade ebenfalls, ausklappbare Boxen zu erstellen. Leider erhalte ich nur ein kleines viereckiges Kästchen, in welches man einen Haken platzieren kann. Selbst wenn ich das Beispiel von ill66 einfüge, erhalte ich nicht die gewünschte Box. Schaue ich mir das Ganze allerdings über meinen Texteditor an, dann erhalte ich die Box.

    Weiß jemand zufällig, woran das liegt, und wie ich das beheben kann?
     
  9. helix

    helix Well-Known Member

    Registriert seit:
    28. Juli 2011
    Beiträge:
    1.808
    Zustimmungen:
    27
    Du sprichst ein bisschen in Rätseln. Für mich ist ein Texteditor nicht ein Werkzeug, mit dem man sich Ergebnisse anschauen kann …

    Egal. Wenn du da was siehst, könnte es ein Hinweis sein, dass deine Arbeit schon in die richtige Richtung geht.
    Das kleine vierechige Kästchen, in das du einen Haken platzieren kannst, ist deine Checkbox. Die blendest du nachher mit display: none; aus. Lass sie ruhig zuerst mal drin. Bei der eigentlichen Checkbox siehst du auf einen Blick, ob gewählt oder nicht gewählt ist.
    Gehe in der Reihenfolge vor, dass zunächst alle Elemente sichtbar sind. Dann baue die Transition, so dass deine Box nur noch erscheint, wenn deine Checkbox gewählt ist. Dann gib deinem Label ein cursor: pointer; und blende die Checkbox aus …

    Hoffe, das hilft dir. Sonst wäre ein Link nützlich, wo man sich das mal ansehen kann.

    Gruß
    helix
     
  10. JuliaJu

    JuliaJu Member

    Registriert seit:
    18. Oktober 2016
    Beiträge:
    7
    Zustimmungen:
    0
    Ich meine das mit dem Texteditor so, dass ich eine HTML Datei und eine CSS Datei erstellt habe, und mir das dann im Browser angesehen habe. Mein Problem ist, dass ich dieses Ergebnisse aber nicht in Wordpress reproduzieren kann, obwohl ich exakt die gleichen Befehle verwende. Auch bei der Datei von ill66 tritt dieses Problem auf. Über den Texteditor erziele ich das gleiche Ergebnis, in Wordpress bleibt es bei dieser Checkbox.
    Ein Link ist derzeit leider noch nicht möglich, die Seite ist gesperrt, weil ich sie im Moment noch aufbaue.
     
  11. helix

    helix Well-Known Member

    Registriert seit:
    28. Juli 2011
    Beiträge:
    1.808
    Zustimmungen:
    27
    Ich gehe mal davon aus, dass dir bewusst ist, dass du das in WordPress allenfalls hinbekommst, wenn du dein HTML im Textmodus eingibst (Reiter „Text“, nicht „Visuell“). Da gibt es aber auch hin und wieder Probleme, weil dieser WordPress-Editor Zeilenumbrüche mit Enter als Line-Breaks <br /> übersetzt, obwohl man das gewohnheitsmäßig nur gemacht hat, um den Quelltext übersichtlich zu halten …

    Vielleicht schreibt ill66 was dazu, ob sie den Code im Editor eingefügt hat.
    Ich war irgendwie ganz selbstverständlich von Template-Dateien eines eigenen oder Child-Themes ausgegangen.

    Gruß
    helix
     
  12. JuliaJu

    JuliaJu Member

    Registriert seit:
    18. Oktober 2016
    Beiträge:
    7
    Zustimmungen:
    0
    Ja genau, ich habe den HTML-Part bei dem gewünschten Beitrag im Textmodus eingegeben, und die CSS-Veränderungen über den Editor meines Childthemes eingefügt. Die eingefügten Zeilenumbrüche hatte ich auch gesehen und entfernt.
    In eine Template-Datei habe ich das nicht eingefügt, weil ich beim PHP nicht so fit bin. Ich wüsste nicht, was ich da einfügen müsste, damit ich bei verschiedenen Beiträgen unterschiedliche Inhalte an verschiedenen Positionen erstellen könnte. Ich bin davon ausgegangen, dass die Befehle im Textmodus reichen...
     
  13. SuMu

    SuMu Well-Known Member

    Registriert seit:
    5. Januar 2006
    Beiträge:
    6.301
    Zustimmungen:
    84
    Ich würde dir zu einem Plugin raten.
     
  14. helix

    helix Well-Known Member

    Registriert seit:
    28. Juli 2011
    Beiträge:
    1.808
    Zustimmungen:
    27
  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.
    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.
    Information ausblenden