search

springers54 / reiki

0 stars 0 forks source link

Lehrerseite Karin Netzke als Muster #154

Closed springers54 closed 5 years ago

springers54 commented 5 years ago

Bevor ich alle Lehrerseiten nochmal anfasse und vergleiche, sollten wir die eine Musterseite fertigstellen. Hier gibt es noch einige Unterschiede im Styling, die wir beheben müssen.

neu ist es: grafik

joergsteinhauer commented 5 years ago

ALT:

<div style="background-color: #374047; padding: 20px;">
<h6>Kontakt zu Reiki-Lehrer Karin Netzke</h6>
[contact-form-7 id="2813" title="Lehrer contact form_Karin"]
</div>

NEU:

<div class="zr-box-contact">
<h6>Kontakt zu Reiki-Lehrer Karin Netzke</h6>
[contact-form-7 id="2813" title="Lehrer contact form_Karin"]
</div>
springers54 commented 5 years ago 
* Inhaltsverzeichnis funktioniert über ein JS Plugin, muss ich noch implementieren.

das kann ich auch machen, dann nehmen wir das alte Plugin einfach wieder?

* Optional wäre möglich, diese Textschnipsel manuell beim jedem Lehrer im Artikel einzutragen.

Ja, das wäre kein Porblem, muss ich nur wissen, wie es geht und formatiert werden muss. Es darf nicht mit Überschriften gemacht werden, da sonst die Hierarchie durcheinander kommt, ich kann nicht nach einer H1 eine h6 bringen wollen.

* Soll ich mehr Zeit damit verbringen?
  Viel lieber hätte ich die Galerie-Option deaktiviert und auf dieses Galerie-Feature verzichtet. Man hätte dann eine einfache Auflistung der Bilder, ohne diese Slider effekt. Lightbox würde weiter gehen, zumal wir für Lightvox noch einen weiteren Plugin haben.

Ich habe auf Testseite Jörg die möglichen Galerien eingefügt. Zuvor die neueste Version des Plugins installiert und auch dein Plugin deaktiviert. Leider hat das keinen Effekt gehabt. Ich bin nicht dafür außer mediafolder ein weiteres Plugin zu installieren, was die Lightboxen bringt. Das ging vorher ohne und sollte auch hinterher ohne gehen. Ich habe in Ticket geschrieben bei Joomunited, schließlich ist das eine Kaufversion, da sollen die sich drehen. Nein, dort erst mal keine Zeit investieren, sollte es nicht gehen, dann weichen wir auf die Masonry-Option aus. grafik

joergsteinhauer commented 5 years ago

grafik

Ja, mal sehen was Joomunited zum Fehler sagt. Masonry ist aber auch ok, wobei hier viel mit JS nachjustiert wird, d.h. die Performance leidet und nicht zu wenig! Ich würde heir empfehlen, eine einfache Galerie ohne zusätzlichen JS anzuwenden, die ich aber noch zusätzlich mit CSS schön aufbereiten könnte.

springers54 commented 5 years ago

Ja, mal sehen was Joomunited zum Fehler sagt.

Der Fehler ist behoben. 

* Also entweder wir aktivieren das Plugin wieder oder es gibt keine Lightbox für die Lehrer-Bilder.

habe ich wieder aktiviert, ich dachte, die beeinflussen sich gegenseitig. Mit der Unterzeile können wir das so machen.

* Textschnipsel habe ich eingefügt, dafür auch gleich ein neues Format im Editor erstellt (`Beschreibung`). Es ist ein einfahcer Pagagraph, was auch semantisch korrekt ist.

Ich arbeite NIE im visuellen Editor, dafür bin ich zu sehr Programmierer und muss genau sehen, was passiert. Saubere Seiten bekommt man nur im Texteditor. Daher kannst du allen Schnick hier weglassen, weil das keiner nutzt. Ich brauche eine ordentliche Liste mit Styling-Regeln <p class="zr-text-description">Zen-Reiki-Lehrer seit 2005</p> reicht also vollkommen aus.

springers54 commented 5 years ago

Ich habe jetzt nochmal beide Seiten verglichen im alten und neuen System und die von Karin sieht schon ziemlich gut aus. Das Zitat ist anders, da nur die Kennung vorne ist, gefällt mir aber sogar besser so auf der neuen Seite.

joergsteinhauer commented 5 years ago
springers54 commented 5 years ago 
* Super, wo war das Problem beim Slider? Bei uns oder beim Plugins selbst?

bei denen und die haben es sehr schnell gefixt

* Ich habe gesehen, dass beim Hover die Unterschriften schlecht formatiert sind, habe es gleich etwas optimiert:

Das ist gut, war recht schlecht zu lesen bisher.

* so habe ich es z.B. auch auf der Lehrerseite deaktiviert, wo ja das WPMF Lightbox greift:

so können wir es auch machen. Wäre es umgekehrt nicht sinnvoller, das andere Plugin nur für die Startseite und die Lehrerseite zu aktivieren?

* Visueller Editor: Wow, das ist sogar besser so! Gefällt mir, wusste ich gar nicht. Dann macht es so einiges einfacher.

Es geht noch weiter. Versuche am besten nie, im visuellen Editor zu arbeiten, zu speichern und dann in den Texteditior zurückzuschalten. Da kommt teilweise so ein Murks in die Seite, dass ich das ganz schnell gelassen habe. Bequemlichkeit ist nicht alles.

* was meinst du mit "die vorne anfangen"? Verstehe ich nicht ganz. Ich sehe auf der alten und neuen Seite diese Überschrift "Botschaft an meine Schüler", aber die sehen doch gleich aus?

Das hängt von deinem Bildschirm ab. grafik Der Code war nur von meiner Styling-Liste kopiert, ist also auf Karins Seite an einer anderen Stelle. Bei Bildern brechen die Überschriften teilweise falsch um, darum diese class=clearfix von dir

joergsteinhauer commented 5 years ago

Wäre es umgekehrt nicht sinnvoller, das andere Plugin nur für die Startseite und die Lehrerseite zu aktivieren?

Ich sehe beim "WP Media Folder" Plugin dafür leider keine Option. Also nein, das geht nicht.

Versuche am besten nie, im visuellen Editor zu arbeiten, zu speichern und dann in den Texteditior zurückzuschalten.

Ja, das kenn ich ganz gut. Ich ging davor halt immer aus, dass du/ihr die Artikel im Editor-Modus ändert, daher habe ich es teilweise auch so gemacht. Aber nun ist geklärt, wir arbeiten ab jetzt immre im Text-Modus.

[...] darum diese class=clearfix von dir

Ich sehe immer noch nicht, wo diese clear-fix Klasse auf der alten Seite implementiert ist. Kann sein, dass ich es dortt mal eingefügt habe. Problem ist aber klar - einige Texte, vor allem Überschriften, die nach einem links/rechts ausgerichteten Bild folgen, brechen nicht um. Normales float-Dilemma. Der Text/Überschrift bleibt eben im "Fluß" und legt sich "um das Bild herum". Dafür ist der "float" ja auch da. Nur sieht das manchmal komisch aus. Da gibts eben die Variante, dass man die betreffende Überschrift "cleared", sodass sie in einer neuen Zeile anfängt. Habe ich am Bsp der Karin's Seite eingsetzt. du kannst es gern weiter benutzen. Allerdings ist imemr Acht gebeten: Manchmal ist die Textlänge kleines bisschen länger als das Bild und wenn man dann clear-fix benutzt, entstehen zu große Lücken zwischen den Texten:

30825ad9c1441ab8330b7db59d9ac03b

springers54 commented 5 years ago

Ich habe das Plugin von Inhaltsverzeichnis eingefügt und versucht, einzustellen. Folgende Probleme treten auf:

Leider ist damit die gelbe Schrift wieder verschwunden. vielleicht kann man hier eine Klassenerweiterung machen class="title-h6-gelb"

joergsteinhauer commented 5 years ago

Problem mit dem Inhaltsverzeichnis gestaltet sich schwieriger, als gedacht. In Plugin Einstellungen kann man die Position des TOC bestimmen, leider nur bedingt - so ist für uns das Optimalste die Position direkt nach der ersten Überschrift, alles andere macht keinen Sinn.

Leider haben wir aber im neuen System die "text-description" (Zen-Reiki-Lehrer seit YYYY) direkt unter der ersten Überschrift, sodass der TOC sich zwischen die Überschrift und die "text-description" schiebt.

Ich kann also keine dynamische Lösung per CSS für solchen HTML-Aufbau erstellen. Ein weg wäre, wenn diese "text-description" IN die Überschrift hinein wandert, also so:

<h2>Über mich: Karin Netzke: Reiki-Lehrer <span class="zr-text-description">Zen-Reiki-Lehrer seit 2005</span></h2>

Ich finde es sogar Seo-Technisch besser, denn eine aussagekräftigere Überschrift ist besser.

Schaue also bitte drüber, ob das so passt - dann müsste man das auch entsprechend auf allen anderen Lehrer-Seiten anpassen.

Zusätzlich ist das TOC Plugin nicht wirklich responsive, ich habe das noch etwas optimiert für unseren Fall.

springers54 commented 5 years ago

Das sieht für mich super aus so. Passen wir dann für die anderen Seiten einfach an.

springers54 commented 5 years ago

Bin jetzt nochmal an der Grundstruktur der Lehrerseiten dran. grafik

grafik

grafik

joergsteinhauer commented 5 years ago
  1. Ja, du hast quasi im content die H1 manuell eingefügt. Das ist suboptimal. Jedes CMS nutzt für die H1 den Titel des Beitrags / der Seite:

grafik

Dieser titel sollte dann auch wirklich für die H1 genommen werden, das is die Core-Funktionalität und die sollte nicht umgangen werden.

Ich würde hier vorschlagen, die H1 aus dem Content rauszunehmen, statt dessen nur den Zusatztext "Zen-Reiki-Lehrer seit 2005" direkt drunter als H2 mit einem passenden Styling zu setzen:

<h2 class="title-h5">Zen-Reiki-Lehrer seit 2005</h2>

Würde dann so aussehen: grafik

joergsteinhauer commented 5 years ago

Habe auch hier nun den Inhalt angepasst, also die H-Titel.

H1 kommt aus dem Seitentitel, den Rest habe ich geändert jeweils eine Stufe runter (H2-H3 usw.), die Struktur ist jetzt korrekt und sieht so aus:

image

Man kann hier aber je nach Wunsch noch alles anpassen, zusätzlich auch noch über die CSS-Titel-Klassen (z.b. .title-h3).

Bleibt erstmal übrig: Slug von team auf lehrer ändern

joergsteinhauer commented 5 years ago

So, Permalinks (also slug) für den "Team-Posttype" ist nun auch geändert von team zu lehrer.

Als Info: es hat nicht gereicht, einfach den Slug in der WP Action zu ändern: image

Man musste zusätzlich noch alle Permalinks im WP neu einlesen (flush). Dazu geht man in "Einstellungen" -> "Permalinks" und klickt auf "Speichern", ohne dabei irgend etwas geändert zu haben.

springers54 commented 5 years ago

prima, dann ist dieses Problem vom Tisch. Nochmal zur Musterseite: grafik

Seitentitel ist die H1, diese Unterzeile sieht aber aufdringlicher aus als früher. Kannst du das noch anpassen?

grafik Die Überschriften stimmen von der Struktur erst einmal

Er zeigt aber bei document und nav immer noch rot an. grafik Bekommst du das noch weg?

joergsteinhauer commented 5 years ago

Ich bin erstmal auf ein anderes Problem gestoßen:

Die Startseite war etwas zerschossen: image

Das kommt durch das HTML im Seitentitel: image

Auch wenn das HTML auf der eigentlichen Lehrerseite funktioniert, sollte man sowas nicht machen. Eingabefelder, die nicht für Inhalt gedacht sind (so eben z.b. Titel, Datum etc pp) sollten nur reinen Text enthalten.

Denn solche Sachen, wie Titel etc, werden dann weiter im Template für diverse Sachen verwendet. Deswegen kracht es dann auch, wenn auf einmal HTML-Schnipsel rauskommen.

Mein Vorschlag: HTML aus dem Seitentitel entfernen und das Zen-Reiki-Lehrer seit 2005 direkt im Inhalt ausgeben. Ist dann eben eine H2: image

joergsteinhauer commented 5 years ago

Das Problem mit "HTML 5 Outline" können wir vernachlässigen.

Erstens ist dieses Feature in keinem Browser integriert, obgleich es aber bereits in W3C definiert ist: https://www.w3.org/TR/2017/REC-html52-20171214/sections.html#creating-an-outline

In Plugin Einstellungen gibts auch mehr nazulesen. Ich empfehle dieses Feature im Plugin zu deaktivieren: image

Ich habe mich zu der ganzen Problematik kurz eingelesen, aber so richtig ist mir noch nicht klar warum und wozu das ganze ist... Ist mir gerade auch zuviel unnötiger Aufwand, da dieses Feature zu vernachlässigen ist.

Zweitens ist das Markup trotzdem valide.

springers54 commented 5 years ago

grafik

Also so geht es nicht, das meinst du doch nicht ernst, oder?

springers54 commented 5 years ago

ich habe jetzt aus deiner h2 ein p gemacht, dadurch ist es etwas besser, Zumindest ist das Inhaltsverzeichni wieder unten grafik

Aber gefallen tut es mir nicht. Weil der Abstand zur H1 einfach da ist und damit das nicht mehr wie eine Unterzeile aussieht, so wie es früher war. Wie können wir dieses Problem lösen?

springers54 commented 5 years ago

grafik ich habe jetzt die 2. H2 wieder weggenommen. Dann muss ich aber as dem p wieder eine H2 machen, damit das Inhaltsverzeichnis an der richtigen Stelle bliebt. Ich glaube, damit kann ich leben. Ich lasse Dani nochmal draufgucken.

joergsteinhauer commented 5 years ago

Dich störte die Position des Inhaltsverzeichnisses?

Ich sehe hier 3 Sachen, die aufeinander prallen und wir müssen hier einfach einen Kompromiss finden, mit dem vor allem du leben kannst:

  1. HTML im titel ist nicht zulässig, HTML musste dort also weg
  2. H-Titel Struktur muss sinnvoll sein und valide
  3. Inhaltsverzeichnis fängt nach der ersten Überschrift an -> hier haben wir nicht allzu viel Spielraum

Für mich gilt wie immer Funktionalität vor Desing -> zuerst müssen wir dafür sorgen, dass die technische Basis korrekt ist, also:

  1. H-Titel Struktur muss passen
  2. kein HTML im titel

Danach können wir am Design optimieren.

Ich habe doch keinen Plan, was mit dem Zen-Reiki-Lehrer seit 2005 passieren soll - soll das ein H-Titel sein oder einfacher Text? Wenn es ein H-Titel ist, taucht es dann im TOC auf - macht das Sinn? Also entscheide du, mache bitte das Markup so wie es semantisch Sinn macht und beim Styling ist doch viel möglich -> das kann ich dann optimieren.

springers54 commented 5 years ago

Das einzige, was mich stört ist der Abstand der Unterzeile zur H1 und ja, im Inhaltsverzeichnis muss die Zeile eigentlich auch nicht aufscheinen. Wenn ich die Zeile als Überschrift ausblende, was möglich ist, dann ist aber die Position des Inhaltsverzeichnisses weg, Geht also auch nicht. Aber es ist so und wir können damit leben. Darum sollten wir das schließen und hier nicht weiter Zeit investiren.