Hack1
oerttel.net

Bunter Teller 2
Nützliche Informationen und Life Hacks

oerttel.net musste umzie­hen; der Provi­der verdammte mich dazu, anstatt meines gewohn­ten und gut funk­tio­nie­ren­den Site­buil­ders auf Word­Press umzu­stei­gen. Ich hatte schon mit Dream­wea­ver und Front­page gear­bei­tet, aber so etwas wie Word­Press ist mir noch nicht begeg­net. Word­Press an sich ist ein total spar­ta­ni­sches System, dem die meis­ten Funk­tio­nen erst durch so genannte Plug­Ins beigebracht werden müssen. Jenen wiederum fehlen einige elemen­tare Dinge für Hyper­text: So ist nicht ohne Weite­res möglich, gezielt auf Einzel­the­men zu verlin­ken, wie es in Site­buil­der bequem möglich war. Lt. Entwick­ler­aus­kunft soll sowas irgend­wann noch imple­men­tiert werden. Wer weiß, wann das sein wird? Deshalb habe ich mit Work­arounds impro­vi­sie­ren müssen.

Ich habe meine Erfah­run­gen aus einem halben Jahr verta­ner Zeit hier publi­ziert. Das soll keine Anlei­tung sein, sondern nur ein paar Tipps, die Ihnen bei der Vermei­dung von Fehl­schlä­gen helfen können.

Hier eine kurze Histo­rie eines kata­stro­pha­len Umzugs einer Website zu Word­Press. Die Stich­wör­ter im Text werden zu den Einzel­the­men verlinkt, sobald diese fertig­ge­stellt sind.

In der Ankün­di­gung, dass meine Website nicht mehr mit dem gewohn­ten Editor verwal­tet werden kann, gab es »ganz tolle« Hinweise zur Unter­stüt­zung beim Umzug, zum Beispiel dass es möglich sei, die bishe­rige Website in Word­Press zu impor­tie­ren. Kannste verges­sen. Ich habe mehrere Tools zum Expor­tie­ren aus Site­buil­der-HTML und Impor­tie­ren in Word­Press auspro­biert und den ersten von drei Mona­ten Umzugs­frist damit verplempert.

Okay, bau ich das also in Word­Press neu auf, hab ja sonst nichts ande­res zu tun, bin ich von der Straße.

Direkt im Word­Press-Bear­bei­tungs­fens­ter gedachte ich ein eige­nes Temp­late zu erstel­len. Denkste! Es können nur vorge­fer­tigte Designs verwen­det werden oder man bastelt sich mit einem PlugIn ein eige­nes. Die mitge­lie­fer­ten sahen aber alle einfach abscheu­lich aus, alles schon zigmal gese­hen, nichts origi­nel­les dabei. Der Versuch, mit einem 08/15-Design und dem empfoh­le­nen Guten­berg-Editor etwas brauch­ba­res zustande zu brin­gen, schei­terte eben­falls kläg­lich. Der Name ist übri­gens eine Frech­heit, die Nach­fah­ren Johann Gens­fleischs soll­ten recht­lich dage­gen vorge­hen, so schlecht und unan­schau­lich ist dieses Werk­zeug. Auch ein Buch, das ich mir als Anlei­tung besorgt hatte, war untaug­lich für weitere Versuche.

Der zweite Monat der Umzugs­frist war damit vertan.

Also recher­chierte ich im Web, um viel­leicht an den Erfah­run­gen ande­rer Nutzer zu parti­zi­pie­ren. Leider erfolg­los. Es gibt offen­bar keine Commu­nity, nur jede Menge Dienst­leis­ter, die dir gegen horren­des Salär die Arbeit abneh­men. Nö, nicht mit mir, ich verdiene mit oerttel.net ja keinen Cent, da werde ich nicht auch noch Geld reinstecken.

Bei meinen Recher­chen kam ich zu der Erkennt­nis, dass es bessere Edito­ren für Word­Press gibt (natür­lich als Plug­Ins), die auch wesent­lich anschau­li­cher (WYSIWYG) arbei­ten. Allen gemein­sam ist, dass sie nicht kosten­los sind, von eini­gen gibt es aber abge­speckte, unbe­fris­tete Test­ver­sio­nen. Ich entschied mich für Elemen­tor, auch wenn diesem in der kosten­lo­sen Version einige elemen­tare Funk­tio­nen fehlen. Die für mich noch fehlen­den ließen sich mit ande­ren kosten­lo­sen Ergän­zungs-Plug­Ins nachrüsten.

Auch Elemen­tor braucht natür­lich ein eige­nes Design, doch der Design-Editor gehört zur Voll­ver­sion. Also auch hier das 08/15-Design ausge­wählt und drin rumgepfuscht.

Frisch ans Werk zum drit­ten Anlauf!

Ich probierte aller­lei aus, bis ich das Temp­late für meine Bedürf­nisse zusam­men­ge­stellt hatte. Dann ging es daran, die Inhalte von der alten Site nach Word­Press zu über­tra­gen. In der Anlei­tung des Provi­ders gab es eine hervor­ra­gende Anlei­tung dafür: »Kopie­ren Sie zuerst die Texte und dann die Bilder.« Damit biste aber perfekt gebrieft.

Das ging auch solange gut, bis die bei Word­Press gefürch­tetste Fehler­mel­dung erschien: System­feh­ler 500. Laut Inter­net­re­cher­che kann das alles mögli­che bedeu­ten. Mit viel Mühe und Expe­ri­men­tier­freude kam ich dahin­ter, dass Elemen­tors Bestand­teile nicht mitein­an­der kompa­ti­bel sind.

Mein Plan war ursprüng­lich, mit Regis­ter­tabs und sog. Akkor­de­ons (Pull-down-Elemen­ten) Themen und Unter­the­men auf einer Seite zu verei­nen, also unge­fähr so:

Irgend­wann erreicht diese Kombi­na­tion ein Limit und führt zum besag­ten System­feh­ler. Da half nur eins: Alle Regis­ter­kar­ten wurden auf Einzel­sei­ten verteilt und von Über­sichts­sei­ten aus verlinkt.

Das ging dann eine Weile ganz gut, aber dann: 

Der Super-GAU!

Plötz­lich ließen sich in den Medi­en­be­reich keine weite­ren Bilder mehr einfü­gen. Katastrophe!

Ein netter Experte half mir kosten­los so weit, dass er fest­stellte, meine Daten­bank sei unge­wöhn­lich groß. Sie müsste reor­ga­ni­siert werden. Das aller­dings würde kosten.

Nee, danke, ich wursch­telte allein weiter. Nach vielem Suchen in mehr oder weni­ger hilf­rei­chen Seiten reimte ich mir dann zusam­men, dass es sich um Back­ups handelte, die Word­Press wohl stän­dig anlegte, aber nicht berei­nigte, wenn eine Seite gespei­chert wurde. Das muss der Nutzer selbst erle­di­gen – natür­lich mit einem PlugIn 😫.

Ich fand auch eines namens WP-Sweep, das mir eine berei­nigte Daten­bank erstellte. Nur der Fehler blieb.

119 Revi­sio­nen, die Word­Press nur für das Schrei­ben dieses Arti­kels anlegte

So lang­sam war ich drauf und dran, die Website aufzu­ge­ben und die Ergän­zungs­un­ter­la­gen zu meinen Büchern als Down­load in OneDrive einzu­stel­len. Aber ich wagte einen letz­ten Versuch: Erneut alle Seiten neu aufge­baut, zum Glück die Inhalte schon leicht erreich­bar bereit­ge­stellt, das Ergeb­nis sehen Sie hier. Es hat mich über ein halbes Jahr Arbeit gekos­tet, paral­lel dazu lief die Aktua­li­sie­rung von »Wissen­schaft­li­che Arbei­ten schrei­ben mit Word«, es war eine Ochsen­tour, obwohl ich doch gar nicht mehr so viel arbei­ten wollte.

Nichts in Word­Press funk­tio­niert ohne PlugIn. Auf der aus dem Dash­board heraus aufzu­ru­fen­den Seite Plug­Ins (a) finden Sie eine Schalt­flä­che PlugIn hinzu­fü­gen (b), die zu einem sehr weit gefass­ten Kata­log »gängi­ger« Plug­Ins führt. Das sind bei weitem nicht alle verfüg­ba­ren. Wenn Sie über eine Such­ma­schine ein PlugIn finden, das Sie instal­lie­ren möch­ten, laden Sie es als ZIP-Datei herun­ter. Word­Press kann mit Hilfe der Schalt­flä­che PlugIn hoch­la­den (c) in ZIP enthal­tene Plug­Ins direkt installieren.

Welche PlugIns braucht man?

Wie erwähnt, gibt es Plug­Ins wie Sand am Meer; etli­che Leute meinen, die PlugIn-Land­schaft mit ihren mehr oder weni­ger nütz­li­chen Widgets erfreuen zu müssen. Im Folgen­den sind die PlugIn-Namen mit den zuge­hö­ri­gen Down­load-Seiten verlinkt.

Grund­lage ist ein vernünf­ti­ger Page­edi­tor. Ich habe mich für Elemen­tor entschie­den, weil er meinen Arbeits­stil und meine Anfor­de­run­gen am besten unter­stützt. Elemen­tor gibt es als Gratis­ver­sion mit Grund­funk­tio­nen und als zu abon­nie­rende Voll­ver­sion mit div. Ergän­zungs­funk­tio­nen. Die Grund­funk­tio­nen reichen meist aus, den Rest holt man sich von ande­ren Plug­Ins. Einige Plug­Ins bauen auf Elemen­tor auf und ergän­zen ihn um weitere Widgets. 

Da wären als erste Ergän­zun­gen Essen­tial Addons for Elemen­tor und Happy Elemen­tor Addons zu nennen, die in der Free-Version einige inter­es­sante Widgets wie Tabel­len, Verkaufs­wid­gets und Bread­crumb-Navi­ga­tion mitbrin­gen, für die Elemen­tor selbst die Pro-Version benötigt.

Wichtige System-PlugIns

Zur Pflege und Sicher­heit Ihres Web-Auftritts soll­ten Sie folgende Plug­Ins unbe­dingt instal­liere und verwenden:

WP-Sweep berei­nigt die Daten­bank von über­flüs­si­gem, auto­ma­tisch ange­leg­ten Backup-Ballast.

W3 Total Cache sorgt für schnel­le­ren Zugriff Ihrer Besucher.

Local Google Fonts verhin­dert Daten­schutz-Ärger mit verlink­ten Google-Fonts, indem sie in die Seite inte­griert werden.

Broken Link Checker über­prüft, ob die Links der Seite noch auf exis­tie­rende Ziele verweisen.

Redi­rec­tion leitet Links auf geän­derte URL um.

Nice to have

Wollen Sie in Ihre Website PDF- und Word-Doku­mente, Excel-Tabel­len, Power­Point-Präsen­ta­tio­nen oder Videos nicht nur verlin­ken, sondern einbet­ten und von den Besu­chern direkt anse­hen lassen, benö­ti­gen Sie Viewer-Widgets, die Sie in den Plug­Ins Embed docs und Embed­Press finden.

Nichts ist häss­li­cher als eine 404-Fehler­mel­dung »Page not found«. Smart Custom 404 Error Page hilft Ihnen, auf eine Seite umzu­lei­ten, mit der Sie den Fehler elegan­ter beschrei­ben und Abhil­fe­be­reit­stel­len, zum Beispiel wie hier: https://oerttel.net/FalscheURL.

Use Any Font lädt eigene Fonts, die nicht vom Temp­late zur Verfü­gung gestellt werden, in die Daten­bank der Website. Ein Beispiel sind hier die Tasten­kür­zel S+A+R.

wp-Typo­gra­phy über­ar­bei­tet typo­gra­fi­sche Unzu­läng­lich­kei­ten in der Anzeige (doppelte Leer­zei­chen etc.) und gleicht alle Arten von Anfüh­rungs­zei­chen an eine frei wähl­bare Form an.

Wich­tig: Um Elemen­tor-Widgets inein­an­der zu verschach­teln, akti­vie­ren Sie unbe­dingt die Nested Elements in den Elementor-Einstellungen:

Wie wendet man die PlugIns an?

Beim Zugriff auf Plug­Ins zeigt sich wieder mal die totale Band­breite der Unein­heit­lich­keit in der Oberflächengestaltung:

  • Addons zu Elemen­tor klin­ken ihre Widgets in die Werk­zeug­leiste des Editors als zusätz­li­che Widget-Gruppe ein.
    Das bedeu­tet aber nicht, dass sie dort sofort zu finden sind, manche verber­gen sich in den »Erwei­ter­ten Einstel­lun­gen« (Bild rechts), einige tauchen erst auf, wenn man eine andere Einstel­lung vorge­nom­men hat (Bild rechts unten). Ein nettes Such­spiel! 🙄
  • Andere finden Sie der Seiten­leiste des Dash­boards entwe­der direkt (Bild unten grün) oder in einer der Rubri­ken Werk­zeuge oder Einstel­lun­gen (Bild unten rot).
  • Wieder andere lassen sich nur aus der PlugIn-Seite aufru­fen.
Unter­schied­li­che Posi­tio­nie­rung der Plug­Ins in der Dashboard-Seitenleiste
In den Eigen­schaf­ten versteck­tes Zusatzwidget
Widget erscheint erst, wenn spezi­elle Eigen­schaft akti­viert wurde

Es gibt zwar Stan­dard-Einstel­lun­gen, aber keine vom Nutzer bestimm­ba­ren Stan­dard-Einstel­lun­gen und Vorga­ben bei Word­Press. Wenn Sie ein neues Widget einfü­gen, passt sich dessen Layout den Vorein­stel­lun­gen des Themes an. Diese zu verän­dern, bedarf es kosten­pflich­ti­ger PlugIns.

Ergo: Jedes neu einge­fügte Widget muss mühsam neu konfek­tio­niert werden.

Work­around: Legen Sie sich Muster­sei­ten mit vorge­fer­tig­ten Widgets an, die Sie bei Bedarf per Zwischen­ab­lage mit Rechts­klick | Von ande­rer Website einfü­gen in den neuen Contai­ner einfügen. 

Um eine Seite in Word­Press anzu­le­gen oder admi­nis­tra­tiv zu bear­bei­ten, wech­seln Sie mit der Dash­board-Seiten­leiste ins Fens­ter Seiten. Mit Seite hinzu­fü­gen erzeu­gen Sie eine neue Seite, die zunächst als Entwurf defi­niert ist. Haben Sie Elemen­tor als PlugIn akti­viert, wird die neue Seite auch gleich als Elemen­tor-Seite gekennzeichnet.

Die folgende Abbil­dung zeigt weitere Wege zum Anle­gen neuer Seiten. Der + Neu Button in der Kopf­zeile des Dash­boards ist nicht dabei, weil er zur wenig brauch­ba­ren Word­Press-Seiten­ein­rich­tung führt.

Neue Seite anle­gen im Dash­board (links) oder in der Recent-Liste des Elemen­tor-Bear­bei­tungs­fens­ters (rechts) oder im Seiten-Veral­tungs­fens­ter (unten)

Den provi­so­ri­schen Seiten­na­men können Sie mit der Schnell­be­ar­bei­tung ändern. 

Klicken Sie nicht auf Bear­bei­ten! Damit landen Sie in der Word­Press-eige­nen Bear­bei­tung.

Zum inhalt­li­chen Bear­bei­ten geht es per Mit Elemen­tor bear­bei­ten.

In der Befehls­aus­wahl unter­halb des Seiten­na­mens plat­zie­ren manche Plug­Ins auch ihre seiten­be­zo­ge­nen Funktionen.

Tipp: Wenn eine Seite Sperenz­chen machen sollte (was in Word­Press gar nicht so selten vorkommt) können die beiden Dupli­zier­be­fehle EA Dupli­ca­tor (aus dem PlugIn Essen­tial Addons for Elemen­tor ) und Happy Clone (aus dem PlugIn Happy Elemen­tor Addons) Wunder wirken, denn sie reor­ga­ni­sie­ren die Seite beim Duplizieren.

Seite speichern und publizieren

In Elemen­tor leuch­tet rechts oben promi­nent die Schalt­flä­che Veröf­fent­li­chen. Erst mit Klick auf 9 führt zum wich­ti­ge­ren, häufi­ger benö­tig­ten Befehl Entwurf spei­chern.

Was mit Veröf­fent­li­chen gespei­chert wird, bläst Word­Press sofort in die Welt hinaus. 
Zwischen­stände dage­gen sichern Sie mit Entwurf spei­chern oder S+s.

Leider zeigt Elemen­tor nirgends an, ob der aktu­elle Stand gespei­chert ist. Die Schalt­flä­che Veröf­fent­li­chen leuch­tet weiter­hin, als sei nichts gesche­hen, und auch beim Verlas­sen der Seite kommt trotz vorhe­ri­ger Spei­che­rung die Warn­mel­dung (rechts).

Word­Press funk­tio­niert nicht ohne Contai­ner, die die Widgets oder weitere Contai­ner aufnehmen. 

Beim Anle­gen einer Seite wird zunächst ein Haupt­con­tai­ner ange­legt, der als Basis für weitere Contai­ner dient (1).

Ein Klick auf + führt zur Auswahl des Contai­ner-Layouts: Flex­box oder Raster (Grid) (2). 

Raster sind weni­ger flexi­bel als Flex­bo­xen, von denen die in der Auswahl (3) markierte Fassung die varia­belste ist.

Wich­tig: Um Elemen­tor-Widgets inein­an­der zu verschach­teln, akti­vie­ren Sie unbe­dingt die Nested Elements in den Elementor-Einstellungen:

Sie befül­len einen Contai­ner, indem Sie auf das + Symbol in der Contain­er­mitte klicken, in der Seiten­leiste das gewünschte Widget mit der Maus grei­fen und in den Contai­ner ziehen. 

Widget in den Contai­ner ziehen

In einen Contai­ner lassen sich per + Symbol im Kopf der Seiten­leiste weitere Widgets einfügen.

Wollen Sie ein gleich­ar­ti­ges Widget einfü­gen, markie­ren Sie das vorhan­dene durch Klick auf die Schalt­flä­che rechts oben und drücken Sie S+d.

Weitere Contai­ner lassen sich nur in den Haupt­con­tai­ner einfü­gen, indem Sie 

  • in dessen Kopf­leiste + ankli­cken oder
  • die Schalt­flä­che in der linken oberen Ecke rechts­kli­cken und aus dem Kontext­menü Neuen Contai­ner einfü­gen wählen.

Contai­ner und Widgets löschen Sie durch Markie­ren per Klick auf die Eck-Schalt­flä­che, gefolgt von D, einen Haupt­con­tai­ner durch Klick auf ×.

Um Texte einzu­ge­ben, bringt Elemen­tor in der Grund­aus­stat­tung des Widget »Text­edi­tor« mit. Sie ziehen es aus der Rand­leiste in den Contai­ner. Das Widget passt sich in der Breite dem Contai­ner an. Beim Befül­len mit Text wächst der Contai­ner mit dem Text­feld nach unten. 

Die beiden Fens­ter des Texteditors

Irri­tie­rend ist dabei, dass der Text­edi­tor über zwei Fens­ter verfügt: das Bear­bei­tungs­fens­ter in der Bear­bei­tungs­leiste und ein Vorschau­fens­ter mit WYSIWYG im Haupt­teil. Sie können zwar auch im Vorschau­fens­ter schrei­ben und in gewis­sem Umfang forma­tie­ren, aber hüten Sie sich davor, dort etwas zu löschen oder einzu­fü­gen! Das kann verhee­rende Folgen haben.

Im Bear­bei­tungs­fens­ter gibt es zwei Darstel­lungs­modi: Visu­ell und Code, wobei visu­ell geprahlt ist. Die tatsäch­li­che Darstel­lung sehen Sie nur im Vorschaufenster.

Schal­ten Sie den Modus auf Code um, erscheint der Text mit allen HTML-Tags (rechts); hier können Sie weitere Forma­tie­run­gen vorneh­men, die mit den Bord­werk­zeu­gen nicht möglich sind, oder über­flüs­sige Tags entfer­nen, die von den Editor-Werk­zeu­gen erzeugt wurden.

Außer mit den Werk­zeu­gen im Bear­bei­tungs­fens­ter lassen sich im Regis­ter Stil weitere Text­for­ma­tie­run­gen vorneh­men (Bild unten), im Regis­ter Erwei­tert gibt es Einstel­lun­gen zur Gestal­tung des Text­ob­jekts (Bild rechts).

Tabellen

Tabel­len sind die Achil­les­ferse aller Plug­Ins. Es gibt zwar allent­hal­ben Tabel­len-Widget (bei Elemen­tor nur in der Bezahl­ver­sion), aber es ist kaum möglich, damit bequem zu bedie­nende, ansehn­li­che Tabel­len zu erstel­len. Es ist nicht möglich, ganze Zeilen oder Spal­ten zu markie­ren, sondern jede Zelle einzeln will einge­fügt, bear­bei­tet und gelöscht werden.

Work­around: Gestal­ten Sie Tabel­len in einem Text­pro­gramm und fügen Sie in Ihre Website einen Screen­shot ein. Nicht die Tabelle via Zwischen­ab­lage! Das sieht genauso verkorkst aus wie mit einem Tabellen-Widget. 

Dennoch hier eine kurzer illus­trierte Anlei­tung, demons­triert am Widget Data Table der Happy Tools; in ande­ren Plug­Ins funk­tio­nie­ren Tabel­len-Widgets auch nicht anders. 

Im Inhalts-Regis­ter der Tabel­len­werk­zeuge gibt es die Rubri­ken Header und Content, beide mit der Schalt­flä­che Element hinzu­fü­gen ausgestattet.

  • In der Rubrik Header ergänzt diese Schalt­flä­che die Tabelle um eine Spalte nach rechts. Die Zellen in den Zeilen müssen Sie einzeln nach­tra­gen, indem Sie in der Rubrik Content | Element hinzu­fü­gen klicken und in Row Type den Typ Column auswählen.
  • In der Rubrik Content ergänzt diese Schalt­flä­che die Tabelle um eine Zeile nach unten, aller­dings zunächst nur mit dem nicht sicht­ba­ren Umbruch. Die Zellen in den Spal­ten müssen Sie einzeln nach­tra­gen, indem Sie in Element hinzu­fü­gen klicken und in Row Type den Typ Column auswäh­len. Das Video unten in der drit­ten Spalte zeigt dieses Vorgehen.

Wollen Sie keine Zeilen oder Spal­ten anhän­gen, sondern einfü­gen, wird’s fumme­lig, denn Sie müssen jede einzelne Zelle in der Bear­bei­tungs­liste per Drag&drop an die rich­tige Posi­tion schie­ben. Das Video unten rechts zeigt das anhand einer alter­na­ti­ven Methode zum Einfü­gen von Zeilen: Hier werden alle Zellen einer Zeile (Wich­tig: einschl. des Umbruchs­ele­ments row: Content) dupli­ziert, neu sortiert und mit neuen Inhal­ten verse­hen werden.


Die Tabel­len­werk­zeuge und Videos zum besse­ren Verständ­nis (rechts)

In einer Website zu präsen­tie­rende Illus­tra­tio­nen spei­chert Word­Press im Ordner /wp-conten­t/u­ploads/ im monat­li­chen Unter­ord­nern. Sie öffnen die Media­thek vom Dash­board aus per Klick auf Medien. Mit Medi­en­da­tei hinzu­fü­gen | Datei auswäh­len | Hoch­la­den füllen Sie den Medi­en­be­reich mit den zu publi­zie­ren­den Bildern aus der loka­len Quelle. 

Es gibt verschie­dene Möglich­kei­ten, Bilder auf Websei­ten einzu­set­zen, abhän­gig vom gewünsch­ten Zweck. Die simpelste Methode ist das einfa­che Bild-Widget. Nach­dem Sie es in einen Contai­ner gezo­gen haben, erschei­nen im Contai­ner ein Platz­hal­ter und links die Bild bear­bei­ten Seiten­leiste mit dem Regis­ter Inhalt, das eine Kopie des Platz­hal­ters zeigt. Ein Klick auf den Platz­hal­ter in der Seiten­leiste führt zur Medi­en­aus­wahl. Ist das Bild noch nicht auf direk­tem Wege dort hoch­ge­la­den wie oben beschrie­ben, haben Sie hier die Möglich­keit, es per Datei­aus­wahl oder aus der Zwischen­ab­lage nach­zu­la­den, was dank mise­ra­bler UI-Gestal­tung mit einem Maus­ma­ra­thon verbun­den ist. 

Lange Maus­wege beim Bild einfü­gen per Zwischenablage

Das ausge­wählte Bild erscheint im Contai­ner und passt sich dessen Abmes­sun­gen an. In der Seiten­leiste lassen sich Größe, Bild­un­ter­schrift, ggf. ein Link, dem beim Ankli­cken des Bildes gefolgt wird, und Eigen­schaf­ten festlegen. 

Hinweis: Medi­en­da­tei als Link­adresse blen­det beim Ankli­cken das Bild in Origi­nal­größe ein, wenn es als verklei­ner­ter Teaser einge­fügt ist. 

Tipp: Beim Mouseo­ver zeigt Word­Press den Datei­na­men des Bildes an, eine für den Betrach­ter wenig brauch­bare Infor­ma­tion. Sie unter­bin­den das, indem Sie dem Bild eine Quick­Info (hier Tool­tip genannt) zuwei­sen. (Funk­tio­niert aber auch nicht zuverlässig. 🤪)

Bilder im Textfluss 

Für Illus­tra­tio­nen neben dem Text eignet sich die im Kapi­tel „Contai­ner und Widgets“ empfoh­lene Contai­ner­va­ri­ante besonders. 

Andere Bilder-Widgets 

Für die reine Bild­prä­sen­ta­tion bieten die PlugIn-Herstel­ler diverse Widgets mit effekt­vol­len Über­gän­gen oder Beschrif­tun­gen im Bild an. 

Beispiele für erwei­terte Bild-Widgets

Zum Einbet­ten ande­rer Daten (oder Dateien) brin­gen die Plug­Ins diverse mehr oder weni­ger brauch­bare Widgets mit. Die Frage ist dabei: Wie nütz­lich oder hinder­lich sind diese Widgets?

Verschie­dene Widgets zur Dateien-Einbet­tung aus verschie­de­nen PlugIns

Welche Form des Einbet­tens die rich­tige ist, rich­tet sich nach der Art und Größe des Mate­ri­als. Handelt es sich um mehrere größere Dateien auf einer Seite, kann vom Einbet­ten nur abge­ra­ten werden, denn beim Aufruf der Seite werden alle einge­bet­te­ten Dateien mitge­la­den, was die Aufbau­zeit verlän­gert. Kurze Dateien lassen sich gut einbet­ten, wenn es nicht zu viele pro Seite sind. Das erleich­tert dem Besu­cher das Lesen, weil die Datei nicht erst per Link nach­ge­la­den werden muss.

Natür­lich gibt es Ausnah­men: Wenn Sie nicht sicher sein können, ob der Besu­cher die notwen­dige Soft­ware zum Betrach­ten der Dateien auf dem Rech­ner hat, ist ein Widget hilf­reich. Ande­rer­seits gibt es für die meis­ten Daten­for­mate Online­be­trach­ter oder im Brow­ser einge­baute Viewer, die diese Beschrän­kun­gen mildern. Micro­softs Office-Dateien können sogar bear­beit­bar mit der kosten­lo­sen App »Office Online« geöff­net werden. 

Für große Dateien empfiehlt sich die Verwen­dung eines Aufruf­links, zum Beispiel als passen­des Icon mit einem Icon-Widget, einer Schalt­flä­che mit einem Button-Widget oder der verklei­nerte Screen­shot des Anfangs­bil­des /​der Anfangs­seite der verlink­ten Datei. Benut­zer­freund­lich wäre dann noch, eine Quick­info mit einer Tool­tipp-Eigen­schaft anzu­brin­gen, damit der Besu­cher weiß, wozu diese Schalt­flä­che dient.

Icon mit Tool­tipp als Linkträger

Um viel Inhalt nicht auf einer Seite unter­ein­an­der zu präsen­tie­ren, gibt es Hilfs­mit­tel wie Regis­ter­tabs und Pull-down-Auswahl, letz­tere in Word­Press „Akkor­deon“ genannt. (🙄 Verti­kale Quetsch­kom­mo­den sind mir noch nie begegnet.)

Diese Widgets begeg­nen Ihnen bei allen Elemen­tor-Ergän­zun­gen, tlw. mit dem Zusatz „Advan­ced“, was tota­ler Unfug ist, denn nicht mal die erwei­ter­ten Versio­nen kommen an die Möglich­kei­ten ihrer Pendants in der Elemen­tor-Basis­aus­stat­tung heran. 

Registertabs

Die Regis­ter­tabs sind sehr simpel einzu­rich­ten. Im Regis­ter Inhalt von Tabs bear­bei­ten wird für jedes benö­tigte Regis­ter ein Tab-Element ange­legt, indem Sie +Tab hinzu­fü­gen oder die Dupli­zie­ren-Schalt­flä­che eines vorhan­de­nen Elements betä­ti­gen. Beim Dupli­zie­ren wird der komplette Inhalt deises Regis­ters mitkopiert.

Vorhan­dene Regis­ter können hier mittels Drag&drop an eine andere Posi­tion in der Reihe verscho­ben werden.

Die sons­ti­gen Einstel­lun­gen sind selbsterklärend.

Jedem Regis­ter­tab kann in der Rubrik Erwei­tert der Seiten­leiste eine CSS-ID zuge­wie­sen werden, um dieses Regis­ter direkt anzu­sprin­gen. Leider hat diese Funk­tion einen Haken: Das Regis­ter öffnet sich nicht, wenn es über einen Link aufge­ru­fen wird. Work­around: Verge­ben Sie eine CSS-ID an den ersten Contai­ner in diesem Register. 

Für die Gestal­tung der Regis­ter­tabs wech­seln Sie in die Regis­ter Stil oder Erwei­tert des Bearbeitungsbereichs.

Bear­bei­ten der Registertabs

Registertabs und Akkordeons im Vergleich

Auch wenn sie ähnlich funk­tio­nie­ren und einzu­rich­ten sind, gibt es einige wesent­li­che Unter­schiede in der Perfor­mance zwischen beiden Darstellungsformen.

Eigen­schaft Regis­ter­tab Akkor­deon
Anzeige beim Öffnen der Seite 
komplet­ten ersten Tab–Content
optio­nal: nur Über­schrif­ten
oder Content der ersten Karte 
mehrere gleich­zei­tig geöff­nete Elemente möglich 
nein 
optional 
Über­schrif­ten platzierbar 
alle vier Seiten 
nur oben 
Verzö­ge­rung nach Ändern des Layouts 
nein 
erheblich 
Vergleich von Akkor­deon (oben) und Regis­ter­tabs (unten)

Akkordeons

Das Akkor­deon-Widget bietet ähnli­che Einstel­lun­gen wie die Regis­ter­tabs, dazu unter Inter­ak­tion, dass es beim Öffnen der Seite total geschlos­sen bleibt oder wie die Regis­ter­tabs die erste Karte aufklappt. 

Großes Handi­cap dieser Darstel­lungs­form ist die Reak­ti­ons­zeit nach Ände­run­gen am Layout. Winzigste Umstel­lun­gen, und sei es nur die Abmes­sung der Abrun­dung eines Rahmens um 1 px können dazu führen, dass Elemen­tor bis zu Minu­ten lang einfriert, weil das komplette Widget reor­ga­ni­siert wird.

Keine Panik! Nutzen Sie die Gele­gen­heit zur Entspan­nung der Schul­ter­mus­ku­la­tur, irgend­wann meldet sich das System wieder zurück. Hekti­sches Herum­kli­cken verlang­samt die Norma­li­sie­rung nur.

Verwirrung bei der Farbgestaltung

Ein weite­res Beispiel der Nutzer­ver­wir­rung bietet das Regis­ter Stil im Bereich Akkor­deon bear­bei­ten.

Es ist unter­teilt in die drei Rubri­ken Akkor­deon, Kopf­zeile und Inhalt, doch wenn Sie in Kopf­zeile eine Möglich­keit suchen, den Hinter­grund des Kartei­kar­ten­kop­fes zu bear­bei­ten, sind Sie auf dem Holzweg. 

Diese Einstel­lung finden Sie wider­sin­ni­ger­weise in Akkor­deon. Die dortige Farb­wahl wirkt sich ledig­lich auf die Kopf­zei­len aus, nicht aber aufs ganze Akkor­deon. Den Rest gestal­ten Sie farb­lich in Inhalt. Die Rubrik Kopf­zeile ist nur für die Schrift- und Icon-Gestal­tung der Kopf­zeile zuständig.

Verwirrung bei den Icons der Kopfzeilen

Die Symbole zum Erwei­tern und Einklap­pen finden Sie nicht im Regis­ter Stil, sondern unter der Elemente-Liste im Regis­ter Inhalt. Die Größe und Farbe dieser Icons wird jedoch im Regis­ter Stil, Rubrik Kopf­zeile festgelegt.

Ein weite­res Problem berei­tet die »Vergess­lich­keit« der Icon-Auswahl. Sie landen bei jedem Aufruf wieder in der Gesamt­aus­wahl, es gibt auch keine Recent-Liste oder Favo­ri­ten-Fest­le­gung. Es bleibt Ihnen nichts übrig als mit der Such­funk­tion zu arbeiten.

Akkordeon als Ersatz fürs Weiterlesen-Widget

Elemen­tor und auch andere Plug­Ins verfü­gen über die belieb­ten Schalt­flä­chen, um einen Text, der nur als verkürz­ter Teaser ange­zeigt wird, voll aufzu­klap­pen. Sie alle haben ein großes Manke: Sie können nur mit Text befüllt werden. Wollen Sie dort auch ande­res zeigen, hilft ein Akkor­deon ohne Rahmen unter dem Teaser-Text.

So lässt sich im Akkor­deon der Text in einem Text­edi­tor-Widget fort­set­zen und dane­ben in einem ande­ren Contai­ner illus­trie­ren, mit Tabel­len anrei­chern etc.

Die Schalt­flä­che des eigent­li­chen Weiterlesen-Widgets

Nach­teil: Hier kann der Text in der Kopf­zeile nicht wie bei echten Weiter­le­sen-Widgets zwischen »Weiter­le­sen« und »Schlie­ßen« gewech­selt werden.

Links sind ein elemen­tare Bestand­teil von Websei­ten, ihre Erstel­lung und Verwal­tung werden aber von Word­Press und Elemen­tor subop­ti­mal und selbst inner­halb eines Plug­Ins unein­heit­lich unterstützt.

Objekte als Linkträger

Bei vielen Objek­ten ist die Link-Eigen­schaft bereits in den Inhalts-Einstel­lun­gen vorge­se­hen. Für Bilder muss sie im Auswahl­feld Link ausdrück­lich als Indi­vi­du­elle URL akti­viert sein. Die andere Option im Auswahl­feld Link lautet irre­füh­rend Medi­en­da­tei. Hier lässt sich aller­dings keine Datei aus der Media­thek Ihrer Website verlin­ken, sondern bei Klick wird die voll­stän­dige Bild­da­tei ange­zeigt. Eine freie Medi­en­aus­wahl errei­chen Sie nur, indem Sie in der Media­thek die URL in die Zwischen­ab­lage kopie­ren und hier als Indi­vi­du­elle URL einfügen.

Textlinks

Bei Links auf Wörter in Texten ist der Weg zum Link­an­le­gen zwar kompli­zier­ter, dafür ist die URL-Auswahl besser unter­stützt.

Sowohl das Bear­bei­tungs­fens­ter als auch das Vorschau­fens­ter verfü­gen über die Möglich­keit, einer Text­mar­kie­rung einen Link zuzu­wei­sen; aller­dings bietet das Bear­bei­tungs­fens­ter mehr Möglich­kei­ten. Hier die Abfolge in Einzelschritten:

  1. Markie­ren Sie den Text, der den Link tragen soll. 
  2. Klicken Sie auf die Link-Schaltfläche.
  3. Fügen Sie die zu verlin­kende URL ins Link-Fens­ter ein oder suchen Sie eine Ihrer Seiten aus, indem Sie auf das Zahn­rad klicken.
  4. Bestä­ti­gen Sie mit R.

Es hat sich welt­weit einge­bür­gert, Text mit Links als unter­stri­chene blaue Schrift darzu­stel­len. Das inter­es­siert aller­dings manche Temp­late-Desi­gner nicht und sie geben ihren Links andere Darstel­lun­gen. Verges­sen Sie deshalb nicht, im Bear­bei­tungs­fens­ter die Farb­zu­wei­sung und ggf. U nachzubessern. 

Ziele auf der eigenen Seite einrichten

Mit der }-Funk­tion lassen sich Links auf eigene Seiten anle­gen. Um inner­halb der Seiten bestimmte Stel­len anzu­steu­ern, sind angeb­lich die Über­schrif­ten mit voran­ge­stell­tem # als Ziel­an­gabe geeig­net. Leider nur, wenn auch ein Inhalts­ver­zeich­nis-PlugIn aktiv ist.

Work­around: Stat­ten Sie den Contai­ner oder das Widget, das als Ziel dienen soll, in den Erwei­ter­ten Eigen­schaf­ten mit einer CSS-ID aus. 

  1. Liegt das Ziel auf dersel­ben Seite wie der Link, reicht es, die CSS-ID mit voran­ge­stell­tem # als URL einzu­tra­gen, also z. B. #Link­Ziel.
  2. Liegt das Ziel auf einer ande­ren Seite als der Link, ist dem # der komplette Pfad hinzu­zu­fü­gen, also z. B. https://IhreSite.de/Seite/#LinkZiel.

Problem Tabs und Akkordeon

Ist ein Regis­ter­tab oder die Über­schrift eines Akkor­deon-Elements Ziel des Links, springt der Link zwar die Seite dieser Widgets an, öffnet aber nicht den gewünsch­ten Tab oder das gewünschte Element. Auch ein Bug, den Elemen­tor schon lange zu behe­ben verspro­chen hat. 

Work­around: Verge­ben Sie die CSS-ID nicht an den Tab-Titel oder die Akkor­de­ons-Über­schrift, sondern an den ersten Contai­ner darin. Dann klappt dieses auch beim Ansprin­gen auf.

Er ist nun schon über 50 Jahre alt und berei­tet vielen Menschen immer noch Schwie­rig­kei­ten bei der Lösung. Ich habe (nicht nur als Erin­ne­rungs­stütze für mich selbst) den Lösungs­weg aufge­schrie­ben und grafisch aufbereitet.

Ein Klick auf das Bild rechts öffnet die ausführ­li­che Anleitung.

Der kleine Merlin macht sich Sorgen um Pluto, weil ihm der Plane­ten­sta­tus aberkannt wurde.

Ein Wissen­schaft­ler des Deut­schen Zentrums für Luft- und Raum­fahrt antwor­tet ihm.

Ein Lehr­stück für adres­sa­ten­ge­rechte Kommunikation!

Zu einer Zeit, als

  • Windows noch ein text­ori­en­tier­ter Datei­ma­na­ger mit beigefüg­tem bunten Programm­laun­cher war,
  • man in Word die Dateien noch mit E | Übertra­gen | Laden auf den den 25x80-Zeichen-Moni­tor brachte und
  • bei Micro­soft über­legt wurde, ob ein Papier­korb urhe­ber­recht­li­che Probleme aufwer­fen könnte,

gab es bereits die geniale Soft­ware PC-Geos, auch als »GeoWorks«, »NewDeal Office«, »Bread­box Ensem­ble« und ande­ren Namen vertrie­ben, ein Betriebs­sys­tem mit grafi­scher Ober­flä­che und einem Office­pa­ket, das echtes WYSIWYG, Vektor­schrif­ten und Vektor­gra­fik beherrschte.

Star­ten Sie eine Emula­tion von Bread­box Ensem­ble in einem Brow­ser­fens­ter, indem Sie das Bild anklicken.
Bild_2024-12-13_010414377

Leider konnte das System sich am Markt nicht durch­set­zen, doch die Geos-Szene in Deutsch­land ist noch aktiv. Jähr­lich tref­fen sich Geos-Anhän­ger in Grimma.