Herzlich willkommen zum WordPress-Tipp der Woche.
Diese Woche geht es um HTML.
Ein Thema, mit dem man sich früher oder später als Webmaster auseinandersetzen sollte.
Vor allem, weil der Textmodus und auch der visuelle Editor, also der Texteditor in WordPress,
mit HTML arbeitet.
Sie müssen keine Angst haben, sie brauchen keine Vorkenntnisse.
Das alles wird in diesem Video quasi etwas erarbeitet.
Und hier auch gleich die Aufforderung, dass sie auch mitmachen können.
Und zwar erstellen sie hierfür eine neue Inhaltsseite über Neu-Seite.
Das mache ich mit der mittleren Maustaste, damit sich das in einem neuen Tab öffnet.
Alternativ rechtsklick Link in neuem Tab öffnen.
Auf dieser neuen Seite vergebe ich dann einen entsprechenden Titel, zum Beispiel Beispielseite,
da ich schon eine habe, nenne ich diese Beispielseite 2.
Und auf dieser Beispielseite bin ich jetzt erstmal klassisch im visuellen Editor.
Die meisten von ihnen werden vermutlich im visuellen Editor arbeiten, da das nun mal
der What-you-see-is-what-you-get-editor ist.
Das bedeutet, was man macht, was man arbeitet, wird automatisch auch angezeigt.
Das ist natürlich ein großer Vorteil, wenn man mit Content arbeitet.
Wenn ich hier jetzt einen Text einfüge, also einfach mit Steuerung V mal einen Blindtext
einfüge, ich habe den übrigens von Blindtextgenerator, von blindtextgenerator.de, falls Sie auch
einen Blindtext verwenden möchten, alternativ können Sie auch Ihre eigenen Inhalte verwenden.
Ich habe hier also einen Blindtext im visuellen Editor eingefügt.
Und jetzt mache ich das, was man so als Webmaster macht bzw. als Redakteur vielleicht macht.
Ich vergebe ein paar Überschriften und füge die hier zwischen den Inhalten ein.
Und damit der Editor weiß, dass es eine Überschrift ist, wähle ich das hier entsprechend auch
natürlich aus.
Vielleicht habe ich hier eine H2, hier eine Überschrift 3 und so weiter.
Hier also die Möglichkeit, den ganzen Content, wie man das mit dem visuellen Editor kennt,
etwas eben zu überarbeiten.
Jetzt hat man hier vielleicht nicht nur Text, sondern man hat vielleicht auch einen Link.
Zum Beispiel möchte man vielleicht das Wort Schmerz oder vielleicht hier Anstrengen der
körperlichen Betätigung verlinken.
Dann markiert man den Text und klickt auf das Linksymbol, das kennen Sie vielleicht schon
entsprechend und dann vergibt man hier vielleicht eine entsprechende Seite.
Ich verlinke jetzt einfach auf eine wahllose Seite aus unserer Anleitung, da das Ganze
natürlich nur zu Demonstrationszwecken ist.
Man sieht schon, das Ganze wurde jetzt im visuellen Editor verlinkt.
Hat aber anscheinend einen Fehler gebracht bzw. das Ganze gedoppelt.
Also schon ein Nachteil des visuellen Editors an manchen Stellen.
Ich lösche das jetzt einfach mal raus, den gedoppelten Teil und mache direkt weiter.
Ist natürlich auch ein Hinweis, wenn Ihnen solche Fehler auffallen, dann melden Sie uns
diese gerne.
Ansonsten geht es direkt weiter.
Ich markiere einfach etwas Text und fette ihn oder ich stelle vielleicht mal einen anderen
Text hier kursiv.
Vielleicht gefällt mir das, wenn ich hier eine ganze Passage mal kursiv stelle, also
einen ganzen Textabschnitt.
Vielleicht ist das hier ein Zitat und ich möchte das als Zitat kennzeichnen.
Das ist alles super im visuellen Editor und das ist auch überhaupt kein Appell, dass
Sie sich vom visuellen Editor komplett abwenden sollen, sondern es geht in diesem Video wirklich
um die Hintergründe.
Das heißt, wie schaut das Ganze auf der anderen Seite aus?
Was ist, wenn ich einen Content habe, der später vielleicht Probleme wirft und wie
erkenne ich das?
Und ich mache das jetzt hier einfach weiter, indem ich jetzt hier zum Beispiel meine Aufzählungsliste
erstelle.
Das heißt, auch hier ein paar Elemente einfach hinzufüge.
Vielleicht habe ich hier unten drunter dann noch eine nummerierte Liste, auch das kann
ich einfach einfügen.
Jetzt möchte ich vielleicht noch bestimmten Text formatieren.
Das ist jetzt das, wo es oft auch hakt bei Inhalten.
Das heißt, sobald ich hier die Funktion linksbündig zum Beispiel auswähle, selbst wenn es linksbündig
ist, werden wir dann gleich sehen, dass das auch Folgen hat auf der anderen Seite des
Editors, und zwar der Textseite des Editors.
Ich spreche hier von zwei Seiten, also zwei Seiten des Editors, einfach damit man sich
das vorstellen kann, wie der what you see is what you get, also dem, wo man sieht, was
ebenso auf der Seite passiert, und der, der letztendlich im Hintergrund versucht, alles,
was man hier in diesem Editor manipuliert, in HTML umzuwandeln.
Und da stellt sich natürlich die Frage, was ist überhaupt HTML?
Und HTML ist nichts weiteres als eine Sprache.
Man kann sich das vorstellen wie eine Fremdsprache, und der Internetbrowser versteht diese Sprache.
Und HTML besteht dabei aus zwei Tags, das heißt, man hat einmal einen öffneten Tag,
zum Beispiel wie hier ein P in einer Spitzenklammer.
Das heißt, HTML besteht immer aus Spitzenklammern und einem Befehl.
Hier ist der Befehl oder das Signal für den Browser ein P für Paragraph.
Ich habe also einen öffneten Paragraph, dazwischen verschiedene Zeilen Text, zum Beispiel ein
ganz normaler Absatz.
Und danach habe ich einen schließenden Tag, also einen weiteren HTML Tag, der einfach
durch ein Slash nochmal dem Browser signalisiert, hier ist der Tag zu Ende, hier ist der Paragraph
zu Ende.
Das funktioniert nicht nur mit Paragraphen, sondern auch mit anderen Inhalten.
Das heißt, neben Paragraphen hat man auch Überschriften, die hier so signalisiert werden,
zum Beispiel durch eine H1 für die Überschrift der Ebene 1, H2 Überschrift Ebene 2 und
so weiter.
Man sieht öffnender Teil, schließender Tag und dazwischen Inhalt.
Das Ganze wiederholt sich natürlich auch bei Listen, auch hier werden wir gleich sehen,
wir haben einen öffnenden Teil, einen schließenden Teil und dazwischen dann nochmal verschachtelte
Elemente, wie Sie das vielleicht bei den Collapsible Shortcodes schon kennen.
Neben diesen ganzen Tags ist der Sinn von HTML letztendlich dem Browser anzuweisen,
dass hier es sich bei dem Inhaltsblock um einen bestimmten Inhalt handelt.
Zum Beispiel, dass Sie hier einen Paragraphen haben oder dass das hier jetzt ein Zitat ist.
Das heißt, hier haben Sie jetzt vielleicht einen Zitatblock.
Genauso wie man jetzt hier eine unnummerierte Liste hat und hier eine nummerierte Liste.
Der Browser muss natürlich auch irgendwie wissen, wieso ist das jetzt zentriert und
wieso ist das rechtsbündig.
Hier noch gleich der Hinweis, den viele vielleicht schon wissen.
Lassen Sie den Text im Web am besten immer linksbündig auf der Standardformatierung,
da man das am besten als Nutzer auf mobilen Endgeräten lesen kann.
Weshalb ist das nicht so gut, wenn der Text dann zentriert oder rechtsbündig ist, auch
wenn das im Editor vielleicht einigermaßen gut ausschaut.
Das liegt daran, dass Ihre Nutzer natürlich auf vielen verschiedenen Geräten die Seite
anschauen und dann kommt es zu weißen Flüssen, so nennt man das gerne in der Typografie.
Und zwar sieht man dann, dass der Weißraum auf der Webseite später eben Flüsse zieht,
also eine Linie bildet, die sich durch den gesamten Text ziehen wird, weil der Webbrowser
nicht so umbricht, wie man das gerne hätte.
Jetzt ist die Frage, ja gut, ich erzähle jetzt vielleicht hier viel über HTML, aber
wo ist das HTML denn jetzt letztendlich im Editor versteckt?
Wieso sehen wir das jetzt hier im visuellen Teil nicht?
Und das liegt einfach daran, dass es im Editor hier oben rechts zwei kleine Buttons gibt,
also einen Reiter gibt, und zwar einmal den Reiter visuell und einmal den Reiter Text.
Immer wenn ich mit Shortcodes arbeite, empfehle ich sowieso den Text Editor, deshalb werfen
wir jetzt hier mal einen Blick drauf.
Man sieht hier schon, das Ganze ändert sich, man sieht jetzt keine Vorschau mehr und man
sieht eine Reihe von verschiedenen Tags.
Wie ich das eben besprochen hatte, man sieht HTML Tags.
Hier sieht man jetzt einen öffneten Tag und einen schließenden Tag.
Und dazwischen das Wort Überschriften.
Wenn ich das jetzt mal hier einfach markiere und jetzt auf den visuellen Editor wechsle,
dann markiert mir der visuelle Editor auch das betroffene Wort und ich weiß, ah, ok,
das ist also der Tag für Überschriften.
Wenn Sie also nicht mehr genau wissen, was macht ein bestimmter Tag, zum Beispiel was
ist denn jetzt hier dieses A, also dieser Tag hier, der hier mit A, Title beginnt und
dann irgendwas, was da drin steht.
Das ist also der öffnende Tag, man sieht schon, der ist ellenlang.
Und dann kommt hier ein schließender Tag.
Wenn man sich jetzt nicht mehr sicher ist, was war das denn eigentlich, warum markiert
man es dann nicht einfach?
Das ist natürlich erlaubt und wechselt in den visuellen Editor.
Da sieht man dann, dass das hier eben der Link war, den wir vorher verlinkt hatten oder
den ich verlinkt hatte.
Zurück im Text Editor, schaue ich mir das jetzt mal genauer an und entschlüssel das
Ganze.
Und zwar sieht man hier diesen HTML Tag, also das habe ich ja schon besprochen.
Es gibt den öffnenden Teil und den schließenden Teil.
Und jetzt hat die Sprache HTML nochmal eine Besonderheit.
Und zwar kann der öffnende Teil eines HTML Tags auch immer ein Attribut enthalten.
Dieses Attribut folgt einfach danach.
Durch ein Leerzeichen weist der Browser Bescheid, hier fängt ein Attribut an.
Und das Attribut beginnt immer mit dem Schlüssel, also zum Beispiel Titel oder wie hier href.
Danach kommt ein Ist-Gleichzeichen und zwei Anführungszeichen.
Und zwischen diesen Anführungszeichen kommt der Wert des Attributs.
Wenn wir uns das jetzt hier auf der Inhaltsseite erneut anschauen, dann sehen wir hier den
öffnenden A-Tag.
Das heißt, das Ganze hier ist der öffnende Tag.
Und auch hier sehen wir ein erstes Attribut und zwar den Titel anstrengender körperlicher
Betätigung.
Das war genau der Satzteil, den wir verlinkt haben und das ist jetzt auch aus Barrierefreiheitsgründen
wichtig, damit auch blinde Menschen das dann nochmal vorgelesen bekommen.
Die sehen dann eben diesen Titel Tag.
Danach hat man href und einen bestimmten Link.
Und dieser Link ist der Link, der auf die Seite eben verknüpft, die ich vorher ausgesucht
habe.
Wenn ich das hier jetzt also aufrufe, dann kann ich hier schon sehen, dass es die Seite
ist, die ich auch vorher verlinkt habe im visuellen Editor.
Und danach ist man auch schon am Ende des öffnenden A-Tags.
A steht also für Link, für eine Verlinkung.
Die muss nicht unbedingt einen Text verlinken, da kann man auch ein Bild zum Beispiel verlinken.
Wenn ich jetzt schon beim Bild bin, wie sieht das Ganze denn aus, wenn man ein Bild verlinkt?
Ich klicke mal auf Dateien hinzufügen und suche jetzt hier ein wahlloses Bild aus, in
die Seite einfügen und dann spuckt mir dieser Generator, der Text-Editor einen neuen Tag
aus.
Und zwar sehe ich hier wieder den Link Tag, also wir wissen schon, es handelt sich um
eine Verlinkung.
Dann kommt der Inhalt dieses Link Tags, weil hier ist erst der schließende Tag.
Und hier zwischendrin sehen wir einen sogenannten selbstschließenden HTML Tag.
Was ist jetzt ein selbstschließender HTML Tag?
Das ist nichts weiter als ein Tag, der nur aus einem öffnenden Tag besteht.
Und das ist meistens der Fall, wenn es keinen Inhalt gibt.
Diese Tags, also HTML Elemente, die Inhalt besitzen, die müssen das Ganze natürlich
umklammern, sage ich mal, damit der Browser Bescheid weiß, hier ist noch Inhalt zwischendrin.
Aber bei einem Bild Tag ist das etwas anders, da hier alle Attribute, also alle Informationen
im image-öffnenden Tag quasi übergeben werden, also im Bild-HTML-Bestandteil.
Wir sehen hier also der öffnende Image Tag, gefolgt von mehreren Attributen.
Hier ist es das Attribut src, das nichts anderes ist, wie oben ein bisschen das href, nur dass
es diesmal einfach für Source steht, also für Quelle.
Der Browser muss ja wissen, wo er das Bild runterlädt, bzw. wo er das Bild sich holen
kann.
Das ist also die URL und wenn man diese URL jetzt mal im Browser öffnet, ich mache das
kurz, dann sieht man, dass dieser Link natürlich auf die entsprechende Bilddatei verknüpft.
Danach sieht man einen weiteren Tag, und zwar alt, alt steht für Alternativtext und dieses
Bild enthält keinen Alternativtext, weil das Bild nicht wichtig für den Inhalt ist.
Wäre das Bild wichtig für den Inhalt, dann macht es natürlich Sinn, hier ein Alternativtext
zu vergeben, z.B. Schau Grafik über x, y, z, wer weiß.
Danach kommen zwei ganz interessante Attribute, zumindest finde ich, dass diese zwei Attribute
sehr interessant sind, denn diese zwei Parameter steuern, wie breit das Bild aus angezeigt
wird auf der Webseite, also maximale Breite und maximale Höhe.
Und diese Werte decken sich normalerweise mit der Bildgröße.
Man kann das auch ohne hier rum zu pfurschen bearbeiten bzw. manipulieren, indem man einmal
wieder in die Bildgalerie wechselt, also unter Dateien hinzufügen, das Bild auswählt und
hier runter scrollt, dann sieht man hier unter Anzeigeeinstellungen für Anhänge, ob man
jetzt die vollständige Größe, die wir hier eben gesehen hatten im Editor wählt, oder
ob man z.B. nur ein Vorschaubild auswählen möchte mit 150 x 150.
Wenn ich also das Vorschaubild mit 150 x 150 wähle, sehe ich, dass die Parameter entsprechend
anders sind.
Das heißt, ich muss mich nicht unbedingt an die Galerie halten, ich habe hier die Möglichkeit,
diesen Wert auch theoretisch anzupassen durch HTML, also im Textmodus.
Jetzt kommt noch ein weiterer Teil, der vielleicht interessant ist und zwar Klassen, also Class.
Und hier stehen meistens bestimmte Werte oder Attribute, die das Darstellungsbild verändern
können.
Ab und zu findet man auf den Anleitungsseiten z.B. für Bildern bestimmte Parameter, die
man hier ergänzen kann.
Z.B. kann man dann festlegen, dass ein Bild links ausgerichtet ist statt rechts.
Wenn ich also nochmal ein Bild hinzufüge, habe ich in der Galerie die Möglichkeit,
unter Ausrichtung hier z.B. rechtsbündig auszuwählen.
Wenn ich das dann in die Seite einfüge, dann wird mir auffallen, dass ich jetzt eine andere
Klasse hier stehen habe.
Man sieht, jetzt hat man hier die Klasse stehen alignRight, also Rechtsausrichtung und ich
habe die Größe auf 150 gestellt, deshalb sieht man hier die andere Klasse sizeThumbnail.
Also weiß WordPress, es soll nur eine kleine Version des Bildes einwenden und das Bild
ist rechts ausgerichtet.
Das heißt, immer wenn man was am Bild ändert, muss man auch überlegen, ob sich auch vielleicht
die Klasse ändert, bzw. einfach das Bild nochmal rauslöschen und neu einfügen.
Das ist immer der schnellste Weg, wenn man sich nicht sicher ist, habe ich vielleicht
einen Fehler drin.
Einfach nochmal neu einfügen, hier im Editor schön auswählen, was man braucht.
Braucht man überhaupt eine Ausrichtung?
Möchte man die volle Größe und dann klickt man wieder in die Seite einfügen.
Das heißt, wir haben jetzt schon gesehen, es gibt HTML Tags und zwar bestehen die immer
aus öffnendem schließenden Tag.
Die HTML Tags bestehen aus Attributen und dabei hat immer der öffnende Tag bestimmte
Attribute, zum Beispiel hat bei dieser Verlinkung der öffnende Link Tag hier nochmal ein Attribut
mit href und das enthält dann einfach den Link, worauf verlinkt wird.
Als Inhalt hat so ein Element, so ein HTML Element meistens einen Bestandteil, zum Beispiel
bei einer Verlinkung hat man natürlich den Text, den der Nutzer dann als Link angezeigt
haben möchte.
Wir haben gesehen, dass es Überschriften gibt und zwar die H2 Überschrift oder auch
die H3 Überschrift, also Überschrift der Ebene 2 und Überschrift der Ebene 3.
Jetzt fragen Sie sich vielleicht, wieso fängt der Inhalt mit Überschrift H2 an und nicht
mit H1, wie man das in dem Screenshot vorhin gesehen hatte.
Also hier in dem Darstellungsbild hat man ganz gut gesehen, dass es ja auch noch eine
H1 Überschrift gibt.
Und der Grund hierfür ist, dass unsere H1 Überschrift Beispiel Seite 2 ist.
Wenn ich also mal die Seite unter Privat veröffentliche, damit es natürlich nicht alle Seiten besucht
sind, dann kann ich mal die Seite in einem neuen Tab anschauen.
Dann kann ich mal über rechte Maustaste untersuchen, das ist bei jedem Row etwas anders, mir einfach
die HTML Struktur anschauen.
Hierbei sehe ich jetzt verschiedene Parameter und man sieht bei Wordpress gibt es immer
ein div, ein div ist immer ein Container und zwar für Content, Content Container, Content
Row und dann hat man hier irgendwann Main und man sieht jetzt hier H1 mit der Klasse
Screenreader Text ist Beispiel Seite 2.
Und wenn man sich erinnert, das ist genau der Titel der Seite und das ist die H1 Überschrift,
die der Browser letztendlich dem Nutzer ausspucken wird.
Jetzt fragen Sie sich vielleicht ja, was ist jetzt nochmal div der Container und wieso
sieht man den jetzt hier im Frontend, aber nicht irgendwie auf dem Texteditor.
Ich habe so schön geschrieben bzw.
ich habe das in dem Screenshot nochmal verdeutlicht mit dem durchgestrichenen Auge, mit dem div
Container, da man wissen muss, dass diese Elemente eigentlich keine Funktion haben.
Normalerweise ist das ein Element, mit dem Entwickler bestimmte Container schaffen können.
Letztendlich hat das auf einer Wordpress Seite mit einem Content Management System wenig
verloren.
Wenn Sie also einen div Container finden, der ein Style Element dran hat, also hier wie
div style ist gleich bla bla bla, dann können Sie den ohne Probleme normalerweise entfernen.
Denn diese Style Attribute, die sorgen nur dafür, dass das Corporate Design der Universität
überschrieben wird und in Zukunft Probleme verursacht.
Das heißt, der Browser lädt bei manchen Nutzern vielleicht auf einmal nicht mehr die empfohlene
Schriftart Roboto, sondern Comic Sans, weil vielleicht in diesem Style Tag die Schriftfamilie
Comic Sans angegeben ist und die Schriftgröße 77.
Dann hätte also der Nutzer, der Comic Sans auf seinem System installiert hat, automatisch
eine Überschrift oder ein Textblock mit Comic Sans und der Schriftgröße 77 und das wünscht
man vermutlich den wenigsten.
Zurück zur Seite möchte ich jetzt auch nochmal die anderen Elemente durchsprechen, auch
wenn das natürlich ein bisschen länger wird.
Und zwar haben wir natürlich noch weitere Elemente gesehen.
Zum Beispiel sieht man jetzt hier so ein Blogquote, das sich dann hier wieder schließt.
Man erahnt es schon, dabei handelt es sich einfach um ein Zitat.
Wenn ich das nochmal im visuellen Texteditor markiere, also markiere im Texteditor einen
visuellen Modus Wechsle, dann sieht man hier schon, das ist das Blogquote.
Wenn ich mal weiter runter schaue, dann habe ich jetzt hier diese Liste und tatsächlich
habe ich jetzt hier ein Beispiel, wo der visuelle Editor versagt hat.
Also ich habe eine Liste, aber die hat seltsame Abstände dazwischen.
Das heißt, ich sehe hier schon, irgendwas stimmt da nicht ganz.
Also es sollte natürlich nicht so aussehen, dass ich den Abstand, dem zweiten und dem
dritten Listenpunkt und dem vierten und dem fünften Listenpunkt habe.
Zurück im Textmodus kann ich auch sehen, woran das liegt.
Und zwar hat mir der visuelle Editor zwischen dem dritten, also nochmal zum Vergleich und
dem vierten Listenpunkt jetzt einfach einen Tag eingefügt, den ich gar nicht haben möchte.
Und zwar ein UL.
UL, die unnummerierte Liste, so merke ich mir das immer gerne, ist dafür da natürlich
zu sagen, ja hier ist eine Liste.
Und der Browser interpretiert das jetzt an dieser Stelle so, dass ich ein Listenelement
habe, zwei Listenelemente und das ganze ist in einer Liste.
Und danach habe ich noch eine Liste.
Das hat sich zumindest der visuelle Editor so gedacht.
Aber ich möchte am Ende nur eine Liste mit allen Listenpunkten haben.
Deshalb kann ich jetzt den ersten Vorteil des Texteditors nutzen und hier einfach die
Elemente, die ich nicht benötige, also diese zwei Tags, zum Beispiel entfernen und auch
diese zwei Tags entfernen.
Und wenn ich mir das Ganze jetzt wieder im visuellen Modus anschaue, dann sehe ich, dass
sich das Ganze hier jetzt normalisiert hat.
Oder auch noch nicht.
Man sieht, der visuelle Editor hat heute wirklich keine Lust.
Jetzt muss ich tatsächlich nochmal nachbessern, da der visuelle Editor schon wieder quasi
in meinen Inhalt etwas hineingepfusht hat bei dieser Liste.
Wenn ich nämlich wieder auf den Texteditor wechsle, sehe ich jetzt hier Style, List, Style,
Type None und jetzt ist hier auf einmal nochmal ein öffnender, nochmal ein weiter öffnender
UL-Tag, den ich ja gar nicht haben möchte.
Das heißt, den kann ich nochmal rauslöschen.
Und jetzt ist hier unten auch nochmal was seltsames.
Und das ist eigentlich schon mein Kritikpunkt am visuellen Editor, dass man aufpassen muss,
wenn man Inhalte bearbeitet, dass solche Sachen nicht reinrutschen.
Ich werde deshalb einmal die Seite aktualisieren, nachdem ich zufrieden bin mit dieser Liste.
Und jetzt nochmal versuchen, in den entsprechenden visuellen Editor zu wechseln.
Und dieses Mal sieht man, dass die Liste korrekt angezeigt wird.
Das heißt, es ist natürlich ein fortgeschrittenes Thema mit HTML, die Inhalte zu bearbeiten.
Ich muss aber gleichzeitig sagen, dass es halt Vorteile bringt, wenn man mit HTML solche
Fehler ausbessern kann.
Und dafür braucht man wirklich nur diese grundlegende Logik.
Öffnender Tag, schließender Tag, alles was dazwischen an seltsamen Würwer rumgeht,
ist meistens etwas, was man einfach löschen kann.
Wenn ich jetzt mal zurück gehe in den Textmodus und mir mal die weiteren Teile der Seite anschaue,
dann sehe ich jetzt die Sachen, die hier schon etwas unnatürlicher rüberkommen.
Vielleicht ist Ihnen aufgefallen, dass man auf der Anleitungseite zwar ein Beispiel Paragraphentag
gesehen hat, also wie hier der Paragraph als HTML Element, aber auf der Inhaltsseite haben
wir bis jetzt keinen einzigen Paragraphen als Element gesehen, also als HTML Element.
Und das liegt daran, dass WordPress standardmäßig Paragraphen setzt.
Jedes Element, jeder Satz, der hier einfach reingeschrieben wird in den Textmodus, ist
ein Paragraph.
Da ändert man nichts daran, das ist einfach so.
Sobald man allerdings die Textausrichtung ändert, kommt es jetzt dazu, dass der Textmodus oder
der visuelle Modus auch einen HTML-Paragraphen einfügen muss.
Und zwar aus dem Grund, um jetzt hier das ungebrauchte oder ungewünschte Style-Attribut
hinzuzufügen.
Noch mal zur Erinnerung, im Webdesign wird man in der Regel keine Textinhalte rechtszentrieren.
Das liegt daran, dass das menschliche Auge auf einem mobilen Endgerät die Texte schneller
lesen kann, wenn der Text links ausgerichtet ist.
Um diesen Style-Tag jetzt zu entfernen, also dieses HTML Element, das ungewünschte, markieren
wir einfach den öffnenden Tag und löschen ihn einfach raus.
Und für jeden öffnenden Tag gibt es in der Regel auch einen schließenden Tag.
Den müssen wir natürlich suchen und dann auch entfernen.
Hier vielleicht auch nochmal die Bemerkung, neben solchen tollen P-Tags mit Style gibt
es auch zum Beispiel die genannten Diff-Container mit Style, die natürlich auch ungewünscht
sind.
Das heißt auch das hier, wo dann vielleicht hier unten irgendwo sich ein Diff versteckt,
ist etwas, was ihren Inhalt zerschießen kann.
Zum Beispiel könnte es sein, dass sie von einer Anleitungsseite hier noch weitere Sachen
mit kopiert haben aus Versehen.
Zum Beispiel die Klasse Beispiel.
Das sorgt nämlich dann dafür, dass der Inhalt auf dem Frontend so eine Box bekommt mit Beispiel
obendrauf.
Oder vielleicht ist es ihnen mal passiert, dass sie aus einer Anleitungsseite was raus
kopiert haben und da war dann vielleicht auf einmal so ein P-Tag oder ein Code Tag, der
sich da vielleicht noch versteckt hat und dann bestimmte Inhalte nochmal weiter formatiert.
Das heißt ich mache das mal kurz.
Und wenn man das jetzt im visuellen Editor noch anschaut, ist hier auf einmal mittendrin
so eine Box, die einfach so in der Gegend rumfliegt.
Das heißt es ist nicht immer trivial diese Relikte zu entfernen von einer Seite.
Als Beispiel ich hatte mal mehrere Seiten, wo sich die Leute dann eben an den Web Support
gewendet haben und dann wirklich über hunderte dieser Style Tags sich darauf befunden haben
auf der Seite.
In solchen Fällen haben sie natürlich immer noch die Möglichkeit uns anzuschreiben,
denn in der Regel können wir das leichter aus ihrem Inhalt wieder entfernen als sie
selbst.
Das ganze ist natürlich nicht immer trivial diese Tags zu finden und zu entfernen.
Allerdings ist mein Grundsatz, sage ich mal, wenn sie sich das jetzt anschauen und sie
denken wow da ist so ein Diff drin, aber ich habe eigentlich gar kein Beispiel auf der
Seite mit Class Example und eigentlich braucht es auch nicht diesen Style Tag mit Text-Align-Center,
dann löschen sie es einfach.
Das heißt entfernen sie das Diff und entfernen sie den zugehörigen Container am Ende der
Seite.
Fahren sie sich dann weiter die Seite an, machen sie vielleicht auch mal Command-F bzw.
Steuerung-F und geben sie einfach mal ein Style istgleich.
Wenn sie das nämlich in ihrem Browser eingeben, dann sagt ihnen der Browser, wie viele Style
Tags sie auf ihrer Inhaltsseite haben und markiert sie auch entsprechend.
Dann können sie natürlich hergehen oder schneller hergehen und sagen wow ich habe hier zwei P-Tags.
Man könnte sogar hergehen und bestimmte Elemente nur natürlich targeten.
Also ich könnte jetzt hier die zwei P-Tags mal markieren.
Dann sehe ich, ok den brauche ich nicht.
Den lösche ich also raus, entfernen, hier unten auch und das wiederhole ich dann auch
für den zweiten, der hier noch markiert ist, entfernen und den schließenden Tag auch.
Das gleiche dann auch mit diesen Elementen, wie ich jetzt hier habe.
Also ich habe hier gesehen, ich habe hier noch so einen Code-Schnipsel.
Wenn ich das mal im visuellen Editor anschaue, sehe ich, das macht so eine blaue Markierung
um den Text.
Ist vielleicht an der Stelle ganz nett, wenn man Code auch richtig ausgeben möchte als
Code, also zum Beispiel den HTML Tag ausschildern möchte.
Ansonsten hat das in der Regel weniger auf der Seite verloren.
Das heißt auch diesen kann man entsprechend entfernen und rauslöschen.
Und an der Stelle müsste ich alle Tag erwischt haben.
Ich schaue nochmal, ob hier vielleicht noch einer sich oben versteckt hat oder nicht.
Nein, hat sich keiner mehr versteckt.
Wenn ich das jetzt aktualisiere und mir die Seite im Frontend anschaue, dann habe ich
jetzt eine Inhaltsseite, die keine Fehler mehr aufweist und die entsprechend funktioniert.
Wenn ich mir das im Frontend dann anschaue, dann sehe ich natürlich eine Inhaltsseite,
die bestimmte Elemente jetzt darstellt, wie ich das eben haben möchte.
Und zwar, weil ich es vorher eben entsprechend im Text-Editor einfach nochmal überprüft
habe und etwas aufgeräumt habe.
Deshalb, was ist jetzt meine Empfehlung bzw. was wäre denn mein Vorgehen, wenn ich jetzt
ein Inhalt erstelle, also auf einer WordPress-Seite einen Beitrag anlege und ich am Ende
vielleicht nicht mehr weiß, ist das so richtig, ist es nicht so richtig, muss da vielleicht
irgendwas rein oder raus von diesem HTML-Text.
In der Regel reicht es, wenn man sich das Frontend anschaut und wenn man dann merkt,
irgendetwas funktioniert auf der Seite nicht.
Irgendwas ist da nicht ganz im Reinen.
Bei den Listen sind komische Absätze zwischen, also Abstände zwischendrin.
Vielleicht ist bei anderen Elementen auf einmal ein Buchstabe sehr groß oder eine andere
Schriftart und der Rest des Textes ist aber in einer Font, die standardmäßig ist, also
Roboto zum Beispiel, dann merkt man schon, da ist irgendwas faul.
Also da muss irgendwas im Text-Modus letztendlich nicht ganz stimmen.
So wie man das bei Shortcodes kennt, wenn der schließende Text zum Beispiel von Collapsibles,
also von den Akkordeon-Fächern fehlt, dass die nicht mehr funktionieren richtig oder
dargestellt werden, so ist das auch mit HTML-Text.
Das heißt, nehmen Sie sich Zeit, wenn Sie Inhalte erstellen und prüfen Sie auch Ihren
Text-Editor.
Ja und am Ende des Videos jetzt wie immer, wenn Sie noch Fragen haben oder wenn Sie
noch Vorschläge haben für den nächsten Tipp der Woche, dann schreiben Sie uns einfach
eine Mail an webmaster.ru.de.
Wir beantworten Ihnen auch wirklich gerne alle Fragen zu Ihren Inhalten.
Das heißt, wenn Sie mal nicht weiter wissen oder sich unsicher sind, dann schicken Sie
uns einfach eine Mail und wir schauen mal, was wir machen können.
An dieser Stelle verabschiede ich mich und hoffe natürlich, dass Sie auch beim nächsten
Tipp der Woche wieder mit einschalten.