WP-Hyperlinks: Etwas mehr Butter bei die Fische

1) Die Antworten auf die nachfolgenden Fragen konnte ich weder in Peter Müller´s „Einstieg“ noch im Umfassenden Rheinwerk-Handbuch finden.

2) Hyperlinks, besonders externe Hyperlinks, können ziemlich lang werden, selbst in der Standarddarstellung am Desktop-PC; was aber passiert erst auf einem kleinen Smartphone-Display?

1: Es sollte eine gute Idee sein, als erstes das Umbruchverhalten von Hyperlinks zu ergründen: Das Nachfolgende basiert alles auf den Ergebnissen des Google KI-Modus (13.8.26), die mir stimmig zu sein scheinen:

1. Der 1. Ansatz der KI war, mich dazu zu bringen, den nur ziemlich kurzen CSS-Code einzufügen, der der ganzen Website das entsprechende neue Zeilenumbruchsverhalten aufzwingt. Ich bleibe aber einstweilen standhaft, CSS-Code nicht anzupacken, insbesondere wenn der nicht zwingend anzuwenden ist, also umgehbar ist.

2. Meine Anschlußfrage war: Hängt das Umbruchverhalten nur von 2 Faktoren ab, nämlich dem CSS-Code und dem Browser? Antwort: Nein – es gibt 4 entscheidende Faktoren:

I) Der bereits erwähnte CSS-Code II) Der Browser (Rendering-Engine): Jeder Browser (Chrome, Safari, Firefox) interpretiert CSS-Befehle und Silbentrennung minimal anders und nutzt eigene Standard-Regeln. III) Die Struktur der URL: Der Link selbst bestimmt das Verhalten. URLs mit vielen Bindestrichen oder Schrägstrichen (/) brechen leichter um als eine einzige, extrem lange Zeichenkette ohne Sonderzeichen. IV) Das WordPress-Theme: Viele Themes bringen bereits eigene CSS-Regeln für Links mit. Diese Standard-Einstellungen des Themes überschreiben oft das normale Browser-Verhalten.

3. Wie sieht es mit den neuesten Standard-WordPress-Themes TT5 und TT4 aus? Gut: Sie liefern den passenden Code für den automatischen Umbruch langer Links und Wörter bereits standardmäßig mit.

WordPress nutzt in seinen neueren Block-Themes globale Styles, die verhindern, dass Fließtext oder URLs das Layout auf Smartphones sprengen. (Es gibt Ausnahmen: Z.B. in engen Tabellenspalten oder durch externe Plugins induzierte Aufhebungen.)

3) Ein anderer Ansatz sind über den eigentlichen Hyperlink darübergelegte oder draufgesattelte Anker-Texte: Was soll das bedeuten? Ein aktuelles Beispiel aus https://einstieg-in-wp.de/feedback-auflage7/ (Screenshot) ist:

Der Inhalt ist hier im Moment nicht von Bedeutung, wohl aber die verkürzte Hyperlink-Notation, die durch den sonderbaren Pfeil schräg nach oben rechts (↗) angezeigt wird. Das Phänomen nennt sich nach der KI wohl External Link Icon (Symbol für externe Links) in Kombination mit der Standard-Browserfunktion des Link-Previews (Link-Vorschau). Schlußendlich muß es wieder durch CSS-Code demnach eingebaut werden. (Das hier handelt sich nur um einen 1. Aufriß zu diesem Non-Basics-Thema, der fortgesetzt werden sollte!)

4) Die Google-KI bietet die 4 wichtigsten Prinzipien für Hyperlinks an. Hier sind sie:

1. Klarheit (Sprechende Linktexte)

2. Erwartbarkeit (Visuelle Eindeutigkeit)

3. Barrierefreiheit (Accessibility)

4. Sicherheit und Integrität (Broken Links vermeiden)

(13.8.26) (tbc?)


Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert