Schlagwort: WordPress

Beiträge rund um WordPress – als CMS, als Entwicklungsplattform und als Basis für Classic-Theme-Entwicklung.


Ein Motorradfahrer in rot-weiss-schwarzer Lederkombi und weissem Helm sitzt auf einem schwarz-roten Naked Bike auf einem Kiesplatz, dahinter Nadelwald und ein Bergpanorama.

Zuschneiden ohne zuzuschneiden – Bildformate mit CSS steuern

Bilder für Webseiten liegen oft nicht im richtigen Format vor, obwohl sie in einen Bereich mit fest vorgegebenem Seitenverhältnis passen sollen. Fehlt die Möglichkeit, sie zuzuschneiden, kann man sich mit «aspect-ratio» und «object-fit» im CSS behelfen: Der Ausschnitt sitzt, die Bilddatei bleibt unangetastet. Zugeschnitten wird also schon, aber nur optisch statt in der Datei selbst.

Weiterlesen: Zuschneiden ohne zuzuschneiden – Bildformate mit CSS steuern
JavaScript-Code des Lightbox-Moduls, Fokus auf der Pinch-Zoom-Logik

Lightbox für WordPress – ohne Plugin

Jeder kennt sie, man setzt sie fast voraus, und sie rückt ein Bild oder anderen Inhalt vor einem abgedunkelten Hintergrund in den Fokus – eine Lightbox. Für WordPress lässt sich so etwas mit einem Plugin lösen – oder man programmiert etwas Schlankes, das nur lädt, wenn es gebraucht wird, und sonst nicht.

Weiterlesen: Lightbox für WordPress – ohne Plugin
Screenshot des Teilen-Dialogs auf marcelbest.com: ein modaler Dialog mit dem Titel «Teile den Beitrag» liegt über der abgedunkelten, unscharfen Seite. Darin die zu teilende URL in einem dunklen Feld und darunter eine Reihe Teilen-Symbole – Facebook, X, LinkedIn, Pinterest, WhatsApp, E-Mail und Kopieren. Über dem URL-Feld ist der Tooltip «URL in die Zwischenablage kopieren» eingeblendet, oben rechts ein Schliessen-Kreuz mit sichtbarem Fokus-Rahmen.

Modal oder nicht – das ist hier nicht die Frage

Einen Button zum Teilen meiner Beiträge – der den Fokus ganz aufs Teilen legt, so wie es YouTube macht, das wäre doch was. Also ein modaler Dialog (Modal). Was nach einer Fingerübung aussah, wurde zum Lehrstück: Ein Modal ist ein eigenes Dokument, und sobald man das realisiert, fängt die eigentliche Arbeit erst an.

Weiterlesen: Modal oder nicht – das ist hier nicht die Frage
Zwei stilisierte Beitragsvorschau-Karten nebeneinander, getrennt durch ein nach rechts weisendes Winkelzeichen. Links hat nur der rote Weiterlesen-Button einen hellen Fokus-Rahmen; rechts liegt ein leichter roter Schleier über der ganzen Karte und zeigt sie als gesamte Klickfläche, während der Button seinen Fokus-Rahmen behält.

Weniger Code, mehr Barrierefreiheit

Die ganze Beitragsvorschau anklickbar machen, nicht nur den Weiterlesen-Link – und das barrierefrei. Klingt einfach, war es nicht. Bis ich merkte, dass ich das falsche Problem lösen wollte. Die richtige Lösung war dann fast peinlich simpel.

Weiterlesen: Weniger Code, mehr Barrierefreiheit
Rotes Kachelmuster aus weissen Daumen-hoch-Outlines, in der Mitte rahmt ein Kreis einen einzelnen Daumen-hoch-Icon ein.

Like-Button für WordPress – ohne Plugin

Ein Like-Button ist schnell gebaut. Genau das ist das Problem. Denn es gibt unzählige Tutorials, man kopiert etwas PHP und JavaScript, und der Button steht: ein Klick, der Zähler springt hoch – und da hören die meisten Anleitungen auf.

Weiterlesen: Like-Button für WordPress – ohne Plugin
JSON-LD @graph im Head einer WordPress-Seite – mit BlogPosting, FAQPage und Person als vernetzten Knoten.

JSON-LD für WordPress – ohne Plugin

Strukturierte Daten sind kein neues Konzept, doch mit dem Aufkommen von LLMs sind sie noch einmal relevanter geworden. Vor vielen Jahren hatte ich schon einfaches Microdata-Markup auf meiner Website. Inzwischen hat JSON-LD Microdata als Standard abgelöst. Daher zeige ich in diesem Beitrag meine Lösung für WordPress-Classic-Themes: mit einer PHP-Datei, ohne Plugin.

Weiterlesen: JSON-LD für WordPress – ohne Plugin