Peter Müller

Peter Müller

@pmueller.de

Autor und Dozent pmueller.de html-und-css.de einstieg-in-wp.de groningen-info.de

81 followers41 following49 posts

Peter Müller reposted

Peter Müller reposted

Peter Müller reposted

Peter Müller reposted

Well, it’s a quick take, and no doubt data will come in, but it sure looks like based on today’s evidence that a lot of pro-Trump and pro-AfD bot work depends directly on Russian data centers.

Peter Müller reposted

When Ukraine destroys Russian data centers, hoards of aggressive right-wing bots disappear & the internet becomes friendlier. So much of politics is driven by the internet & so much of the internet is driven by Russians who want to hurt us. Shouldn’t we do something about that, given that we know it

Peter Müller reposted

Peter Müller reposted

🚨Under the Ending Importation of Russian Oil Act 2022, Russian diesel CANNOT be imported into the U.S. unless the President certifies to Congress that Russia has withdrawn from Ukraine, acknowledged Ukraine's sovereignty & no longer poses a threat to NATO.🚨 (Credit: @jayinkyiv.bsky.social)

Peter Müller reposted

Die Europäer hätten sich ihre Schmeicheleien und Selbstverleugnungen sparen können. Trump ist wieder am 28. Februar 2025. 👇

Peter Müller reposted

Poland‘s Prime Minister Tusk had a phone call with Ukrainian president Zelenskyy. He made the following statement afterwards:

Peter Müller reposted

Replying to @tendar.bsky.social

The pressure President Zelenskyy is experiencing is otherworldly, and of top of that he has to endure Trump‘s regular attacks. Yet, he keeps cool. He knows that too much is at stake, than to give in to emotions. Stunning.

Peter Müller reposted

Peter Müller reposted

Peter Müller reposted

Peter Müller reposted

Peter Müller reposted

VVD: "We moeten weer samenwerken in dit land. Voor een eerlijker land. Voor hardwerkende Nederlanders!" Oppositie: "Goed idee. Misschien kunnen we dan de superrijken, die letterlijk slapend nóg rijker worden, iéts meer laten bijdragen, zoals renteniers, huisjesmel... VVD: "Ho, ho, ho, ho, ho!"

Peter Müller reposted

Peter Müller reposted

Peter Müller reposted

Peter Müller reposted

Peter Müller reposted

Peter Müller reposted

Peter Müller reposted

Peter Müller reposted

Trump spends his days padding his pockets, obsessing over plans to build monuments to himself, sleeping in meetings, and occasionally sending out fake announcements about illegal rebates. No wonder gas is heading to $5 a gallon.

Peter Müller reposted

Peter Müller reposted

Peter Müller reposted

Peter Müller reposted

Peter Müller reposted

In den letzten Wochen habe ich immer mal wieder am Relaunch der Website für Feicke Cartoons gebastelt, und zum 1. September 2026 wurde die neue Version freigeschaltet. In diesem Beitrag beschreibe ich, wie ich die Website und diverse Features erstellt habe. Kurzform: WordPress, Block-Theme […]

einstieg-in-wp.deThe Making of FeickeCartoons.deIn den letzten Wochen habe ich immer mal wieder am Relaunch der Website für Feicke Cartoons gebastelt, und zum 1. September 2026 wurde die neue Version freigeschaltet. In diesem Beitrag beschreibe ich, wie und womit ich die Website erstellt habe: WordPress, Block-Theme, eine Prise CSS und ausgesuchte Plugins. ## * feickecartoons.de auf einen Blick * Jeder Cartoon ist ein Beitrag * Masonry: das Grid-Layout per CSS optimieren * Die Website basiert auf TT5 * Twenty Twenty-Five und das Design für einen Fotoblog * Die Suchfunktion im Header * Der Button »Zufällig« * Einzelansicht: Lightbox und Wischen * Beitragsbilder in einer Lightbox öffnen * Wischen impossible? Nicht mit Claude * Cartoons veröffentlichen per E-Mail * Viele Bilder und trotzdem schnell * Liste der verwendeten Plugins ## 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. HomepageZufällige ReihenfolgeKategorie FußballAbbildung 1: Screenshots von einigen Webseiten auf einem großen Bildschirm Auch auf mobilen Geräten funktioniert die Website wunderbar (Abbildung 1). Mobile HomepageMobile NavigationAbbildung 2: Startseite und Navigation auf einem mobilen Gerät (simuliert) 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. ## Jeder Cartoon ist ein Beitrag Man könnte denken, dass für die Umsetzung der in Abbildung 1 und 2 gezeigten Website statische Seiten mit jeweils einer Cartoon-Galerie darauf ein guter Ausgangspunkt wären. Der Galerie-Block von WordPress ist responsiv, einfach zu handhaben und eine integrierte Lightbox zur Vergrößerung der Bilder. Außerdem kann man per Pfeil oder Wischen innerhalb der Galerie ganz einfach von einem Bild zum nächsten navigieren. Statische Seiten mit Galerien sind zudem einfach und intuitiv zu verwalten, und viele Website-Betreiber machen das auch so. Ich habe mich aber trotzdem dazu entschieden, die Cartoons als Beiträge zu verwalten. Das ist weniger intuitiv und erfordert mehr Zeit bei der Umsetzung, bietet auf Dauer aber einfach viel mehr Möglichkeiten. Abbildung 3 zeigt das Backend-Menü _Beiträge_. Jeder Cartoon ein Beitrag. Abbildung 3: Jeder Cartoon ist ein Beitrag Im Editor wird der Cartoon als Beitragsbild gespeichert, und sowohl auf der Startseite als auch auf den Archivseiten werden die Cartoon-Beiträge in einem flexiblen Grid-Layout ausgegeben, bei dem (wie man in den Abbildung 1 und 2 sehen kann) nur das Beitragsbild gezeigt wird. Titel, Meta-Daten und Inhalt bleiben verborgen. Ein Klick auf einen Cartoon-Beitrag im Grid-Layout führt zur Einzelansicht des Beitrags, und dort sieht man unter dem Bild dann Titel, Datum, Kategorie, Text und Schlagwörter. Abbildung 4: Einzelansicht mit Cartoon, Titel, Datum, Kategorie, Text, Schlagwörtern und Navigation Der Einsatz von Beiträgen macht die Website viel flexibler als statische Seiten mit Galerien: * Jeder Beitrag hat eine eigene URL. So kann man alle Cartoons teilen und weitersagen. * Beiträge können nach Kategorien und Schlagwörtern gefiltert werden: * Das Menü _Cartoons_ zeigt die Kategorien _Fußball_ , _Juristen_ , _Politik_ sowie _Dies & Das_. * Schlagwörter zeigen per Klick z. B. alle Cartoons zum _HSV_ auf einer Seite. * Ein Jahresarchiv für Beiträge wird automatisch erzeugt und im Footer ausgegeben. Auf lange Sicht könnte man die Cartoon-Beiträge mit dem Activity-Plugin auch ganz einfach im Fediverse publizieren. Fazit: Statische Seiten mit Galerien sind zwar einfacher zu erstellen, aber Beiträge machen WordPress erst richtig flexibel. The Power of Posts. ## 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 schöner (siehe Abbildung 5). Abbildung 5: Masonry – ein Grid-Layout mit verschieden hohen Zeilen Ein solches lückenloses Layout nennt man auch _Masonry_ , da es an eine gemauerte Wand erinnert. WordPress kann das von Haus aus noch nicht, und daher habe ich in _Zusätzliches CSS_ die folgende CSS-Regel 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 */ Die Anweisung `display:grid-lanes` verwandelt das normale Grid in ein Masonry-Grid. 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 Website basiert auf TT5 Das Frontend wurde mit dem Standardtheme Twenty Twenty-Five erstellt, das an einigen Stellen angepasst wurde. ### Twenty Twenty-Five und das Design für einen Fotoblog * Auf der Startseite und den Archivseiten werden nur die Beitragsbilder ausgegeben. * Dazu wurde dem _Blog Startseite_ das mitgelieferte Design für einen Fotoblog zugewiesen. * Der obere Teil wurde leicht bearbeitet und die Buttons _Neues_ und _Zufällig_ hinzugefügt. * Das Template Alle Archive bekam ebenfalls das mitgelieferte Design für den Fotoblog. Abbildung 6: Das Template Blog-Titelseite bekommt das Design für den Fotoblog. 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. ### Die Suchfunktion im Header Tim wünschte sich im Header der Desktop-Version eine unauffällige Suchfunktion, und Twenty Twenty-Five hat dafür 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. Abbildung 7: Ein Klick auf den Suchbutton wird die Navigation zu breit und rutscht unter das Logo 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. 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 ganz nur mit WordPress und einem Standardtheme zu erstellen. Fazit: 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. ## Der Button »Zufällig« Nach dem Laden der Startseite werden die Beiträge mit den Cartoons wie in den meisten Blogs rückwärts chronologisch angezeigt. Die Neuesten stehen oben. Ich hatte zusätzlich aber die Idee im Kopf, das man mit einem Klick auf einen Button die Cartoons in einer zufälligen Reihenfolge anzeigen lassen kann. Jedes Mal andere. Darum gibt es auf der Startseite die beiden Buttons _Neues_ und _Zufällig_. * Nach dem Laden der Startseite ist der Button _Neues_ hervorgehoben, und der Abfrage-Block darunter zeigt die neuesten Beiträge zuerst. * Daneben steht der Button _Zufällig_ , der zur anderen Seite führt, auf der die Beiträge mit dem Plugin _Advanced Query Loop_ in zufälliger Reihenfolge ausgegeben werden. Abbildung Abbildung 8: Auf der Seite _Zufällig_ werden die Beiträge in einer zufälligen Reihenfolge ausgegeben Um den BesucherInnen zu signalisieren, welche Funktion gerade aktiv ist, wird der jeweils aktive Button in Orange dargestellt. ## Einzelansicht: Lightbox und Wischen In der Einzelansicht der Beiträge gab es zwei Wünsche, die nicht ganz so einfach umzusetzen waren: * Ich wollte gerne das Beitragsbild mit einem Klick in einer Lightbox öffnen. * Annette hätte gerne 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 und 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 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 Must-Use-Plugin. Update-sicher und unabhängig vom Theme. Kurz darauf hatte ich den PHP-Code für das MU-Plugin, den JavaScript-Code, den das Plugin aufruft und die genauen Anweisungen, was ich damit tun soll. 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. ## Cartoons veröffentlichen per E-Mail Die schönste Website verliert auf Dauer ihren Reiz für BesucherInnnen, wenn nicht ab und an neue Inhalte hinzugefügt werden. Das Problem dabei ist, dass das Backend von WordPress für Nicht-Nerds ist ein großes Hindernis ist: Backend aufrufen, anmelden und wenn das klappt hat man gefühlt unzählige Links, Buttons und Menüpunkte zur Auswahl, von denen genau einer der richtige wäre. Einfacher wäre es, wenn der Autor eine E-Mail mit den benötigten Angaben an ein geheimes Postfach verschickt, und WordPress daraus einen Beitrag bastelt. In WordPress gibt es zu diesem Zweck im Menü _Einstellungen > Schreiben_ die Funktion _Beitrag per E-Mail veröffentlichen_ , mit der man aber kein Bild als Beitragsbild definieren kann. Die Lösung ist ein Plugin mit einem kurzen aber aussagekräftigen Namen: * Postie Postie ist einfach zu installieren, sicher in der Benutzung und ermöglicht es, das erste Bild in der E-Mail als Beitragsbild zu definieren. Außerdem kann man im Betreff die Kategorie und den Titel definieren und im Inhalt der Mail das Beitragsbild, eventuellen Text, Veröffentlichtungsdatum und Schlagwörter hinzufügen. Aus diesen Angaben bastelt Postie einen Beitrag und veröffentlicht ihn auf Wunsch auch gleich. Das funktioniert so gut, das ich dem Entwickler Wayne Allen über den Donate-Button auf der Plugin-Website eine kleine Spende für sein Werk überwiesen habe. ## Viele Bilder und trotzdem schnell Mit dem Block-Theme Twenty Twenty-Five als Basis und dem Hosting von Cloud86 mit Litespeed Cache ist das Ergebnis der Performance-Messung mit Pagespeed durchaus erfreulich: Für Leistung, Barrierefreiheit, Best Practices und SEO jeweils 100 Punkte. Abbildung 9: Pagespeed von rundum 100. Nicht schlecht. Mobil gab es bei der _Leistung_ einen 99, und ansonsten auch durchgehend 100 Punkte. ## Liste der verwendeten Plugins Zum Abschluss hier noch die alphabetische Liste der verwendeten Plugins: * Advanced Query Loop für die Abfragen * Disable Comments zum Deaktivieren der Kommentarfunktion * Featured Image Block with Lightbox von Weston Ruter * Koko Analytics für Statistiken ohne Cookies (guter Review von Mike Hindle) * LiteSpeed Cache für den LiteSpeed-Webserver von Cloud86 * Phoenix Media Rename zur Umbenennung von hochgeladenen Bilddateien. * Postie zum Veröffentlichen von Beiträgen mit Beitragsbild per E-Mail * Redirection für automatische Umleitungen beim Ändern von Permalinks * Swipe Navigation (Single Post) – eigenes Plugin, geschrieben mit Hilfe von Claude * Smooth Back to Top Button für einen hübschen Link nach oben. * The SEO Framework für die SEO-Einstellungen * Twentig gehört bei mir immer dazu. * Two Factor und ein gutes Passwort zur Absicherung des Logins. * View Transitions für dezente Animationen beim Wechsel von einer URL zur nächsten. * WP Vivid für manuelle zusätzliche Backups (Cloud86 macht tägliche Backups). #WordPress

Peter Müller reposted

Peter Müller reposted

Peter Müller reposted

Peter Müller reposted

Der 35. Geburtstag der ukrainischen Unabhängigkeit markiert exakt 4,5 Jahre seit Beginn des Vorhabens Russlands, Kyjiw maximal innerhalb von wenigen Monaten einzunehmen. Wir haben eine ausgesprochen beschissene Zukunft vor uns, keine Frage. Die Ukraine sollte aber auch niemand mehr unterschätzen.

Peter Müller reposted

Peter Müller reposted

Peter Müller reposted

Peter Müller reposted

Peter Müller reposted

Peter Müller reposted

Der gestern zerstörte Büchermarkt in Kyjiw. Sehr wichtig für ukrainische Verlage gewesen, kurioserweise aber auch einer der letzten Orte, wo man halboffen noch russische Bücher kaufen konnte. Ich habe dort mal 2018 aus Spaßgründen sogar ein altes Wahlkampfbuch von Wiktor Janukowytsch gekauft.

Peter Müller reposted