The Making of FeickeCartoons.de

feickecartoons.de auf einen Blick

In diesem Beitrag geht es um die Website von Feicke Cartoons:

• feickecartoons.de

Abbildung 1 zeigt eine Galerie mit ein paar Webseiten, damit Sie einen kleinen Eindruck davon bekommen, wie die Website für BesucherInnen aussieht.

Auch auf mobilen Geräten funktioniert die Website wunderbar (Abbildung 1).

Aber Webseiten sind keine Gemälde. Sie werden nicht betrachtet, sie werden benutzt.

Also nix wie hin zu feickecartoons.de und ausprobieren. Lassen Sie sich z. B. mit dem Button Zufällig einfach mal immer wieder neue Cartoons anzeigen.

Twenty Twenty-Five als Basis

Das Frontend wurde mit dem Standardtheme Twenty Twenty-Five (TT5) erstellt, das an einigen Stellen angepasst wurde.

TT5 enthält das Design für einen Fotoblog

Damit auf der Startseite und den Archivseiten nur die Beitragsbilder ausgegeben werden, wurde dem Template Blog-Titelseite im Website-Editor das mitgelieferte Design für einen Fotoblog zugewiesen.

Wie das mit dem Zuweisen des mitgelieferten Designs genau geht, habe ich im Beitrag Genial: Twenty Twenty-Five in einen Foto-Blog verwandeln ausführlich beschrieben.

Abbildung 6 zeigt, das im oberen Teil des Templates die Buttons Neues und Zufällig hinzugefügt wurden.

Masonry: das Grid-Layout per CSS optimieren

Standardmäßig haben die Zeilen in einem Grid-Layout alle die gleiche Höhe, aber die Cartoons haben nicht alle dasselbe Format, und daher wäre ein lückenloses Layout wie in Abbildung 5 schöner.

Ein solches lückenloses Layout nennt man auch Masonry, da es an ein Mauerwerk erinnert. Die CSS-Anweisung display:grid-lanes verwandelt das normale Grid in ein Masonry-Grid. Sie wurde in Zusätzliches CSS gespeichert:

/** Beitragsraster als Masonry-Layout 
  * (nur für Browser, die es unterstützen)
  */ 

@supports (display: grid-lanes) { 
  .wp-block-post-template.is-masonry {
     display: grid-lanes;
  } 
} /* Ende @supports */ 

Safari versteht das bereits, Chrome, Firefox und alle anderen Browser (hoffentlich) auch bald. Dann werden auch sie ohne weiteres Zutun ein Masonry-Layout anzeigen. Momentan erzeugen sie ein Grid-Layout mit gleich hohen Zeilen.

Die Suchfunktion im Header

Für eine unauffällige Suchfunktion im Header der Desktop-Version gibt es in WordPress den Suchen-Block mit der Option Nur Button.

Wenn man auf den Suchbutton mit der Lupe klickt, öffnet sich links davon das Eingabefeld für die Suchbegriffe. Dadurch wird die Navigation aber so breit, dass sie auf vielen Bildschirmen unter das Logo rutscht, was ziemlich doof aussieht und echt verwirrend ist.

Als Lösung habe ich die Suchfunktion von TT5 mit ein bisschen CSS in Zusätzliches CSS so positioniert, das sich das Eingabefeld über der Navigation öffnet.

/** Suchfunktion im Header  
  * Eingabefeld verschiebt Navigation nach links 
  * Lösung: Absolute Positionierung für das Suchfeld
  */

/* Erst ab einer Viewportbreite von minimal 780px */ 
@media screen and (min-width: 780px) { 

  /* Innenabstand rechts für die Header-Navigation */
  header ul.wp-block-navigation {
    padding-right: 120px; 
  }

  /* Suchfunktion absolut positionieren */ 
  header form.wp-block-search {
    position:absolute; 
    z-index: 20; 
  }

} /* Ende @media */ 

Bei normal positionierten HTML-Elementen sorgt der Browser dafür, dass sie sich nicht überlappen, bei absolut positionierten ist der Designer dafür verantwortlich. Der rechte Innenabstand für den Navigationsblock erzeugt den Freiraum für den absolut positionierten Suchbutton, der ohne diesen Innenabstand über der Navigation liegen würde.

Mit diesem CSS funktioniert die Suche etwas besser als vorher.

Fazit: Diese Website zum Buch läuft mit Twenty Twenty-Four, die Website von Feicke Cartoons mit Twenty Twenty-Five. Noch vor wenigen Jahren wäre es undenkbar gewesen, solche Websites nur mit WordPress und einem Standardtheme zu erstellen.

Der Website-Editor zur Anpassung von Block-Themes ist mit ein bisschen Übung inzwischen so leistungsfähig, dass das für viele Websites mehr als ausreicht. Ohne Pagebuilder und ohne Premium-Theme.

Einzelansicht: Lightbox und Wischen

In der Einzelansicht der Beiträge gab es zwei Wünsche, die nicht ganz so einfach umzusetzen waren:

• Ich wollte das Beitragsbild gerne per Klick in einer Lightbox geöffnet.
• Annette wollte auf einem Touchscreen per Wischen durch die Beiträge navigiert.

Beides ist in WordPress von Haus aus nicht möglich. Beitragsbilder zoomen nicht. Und Wischen ist impossible.

Beitragsbilder in einer Lightbox öffnen

Durch eine ausführliche Recherche habe ich ein Plugin vom WordPress-Veteran Weston Ruter gefunden, das den schönen Titel Featured Image Block with Lightbox trägt.

Das Plugin macht genau das, was ich wollte, ist aber nur auf Github erhältlich. Sei’s drum, Weston ist eine absolut vertrauenswürdige Quelle:

• Featured Image Block with Lightbox (von Weston Ruter auf Github)

Der Rest ist einfach: ZIP-Datei herunterladen, im Backend auf der Plugin-Seite installieren, und schon kann man das Beitragsbild per Klick oder Tippen in der Lightbox von WordPress öffnen.

Wischen impossible? Nicht mit Claude

Auf Touchscreens per Wischgeste zum nächsten bzw. vorherigen Beitrag zu gelangen geht in WordPress von Haus aus nicht, und ich konnte dazu auch nicht wirklich etwas Brauchbares finden.

Also habe ich Claude gefragt, und der meinte, die ideale Lösung sei ein Plugin. Kurz darauf hatte ich den PHP-Code für das Plugin, den JavaScript-Code, den das Plugin aufruft und die genauen Anweisungen, was mit diesen beiden Dingen zu tun ist.

Was soll ich sagen. Es funktioniert. Wenn ich mir den Code anschaue, verstehe ich was er macht. Ist gar nicht so schwer, aber ich hätte ihn nicht selbst schreiben können.

Wischen possible.

Performance: Viele Bilder, trotzdem schnell

Auf einer Website mit vielen Bildern ist die Schnelligkeit manchmal problematisch, denn ein Bild sagt nicht nur mehr als tausend Worte, es lädt auch länger als die sprichwörtlichen tausend Worte.

Mit dem Block-Theme Twenty Twenty-Five als Basis und dem Hosting von Cloud86 inklusive Litespeed-Webserver und Cache-Plugin ist das Ergebnis der Performance-Messung mit Pagespeed durchaus erfreulich: In den vier Kategorien Leistung, Barrierefreiheit, Best Practices und SEO gibt es jeweils 100 Punkte.