Über Web, Tech, Games, Art,
Musik, Code & Design

15. März 2023

Bilder croppen mit CSS

Um ein Bild in´s richtige Format zu croppen, ist heute weder PHP erforderlich, noch muss man es als Hintergrundbild in ein div einbauen. Mit der CSS-Eigenschaft „object-fit“ lassen sich Bilder problemlos auf das passende Format beschneiden, was im responsive Webdesign sehr hilfreich sein kann. Hier ein Bild im Original-Format: Und hier gecroppt: Mit der CSS-Eigenschaft […]

14. März 2023

Blur-Effekte mit CSS

Blur-Effekte sind ein beliebtes Gestaltungsmittel im Web-Design. In CSS gibt es 2 Arten von Blur-Effekten: „filter: blur(8px)“ und „backdrop-filter: blur(8px)“. Während ersterer schon sehr lange in allen gängigen Browsern funktioniert und eingesetzt werden kann, funktioniert die CSS-Eigenschaft „backdrop-filter: blur“ im Firefox erst seit Version 103, die im Juli 2022 veröffentlicht worden ist. Jetzt gibt es […]

12. März 2023

Vorher-Nachher-Slider in WordPress

Vorher-Nachher-Slider (Before-After-Image-Viewer) sind ein beliebtes und sinnvolles Tool um um Vorher-Nachher-Effekte zu demonstrieren, z.B. um Änderungen an einem Raumdesign, an der Haut von Personen oder Bildbearbeitungen zu zeigen. So z.B.: Um einen solchen Slider zu erstellen, gibt es bereits fertige Plug-ins für WordPress. Was mir hieran nicht gefällt ist, dass man hier erst den Slider […]

12. März 2023

Farbe eines SVGs mit CSS anpassen

Für Logos auf Websites sind SVGs die beste Wahl. Ein SVG ist eine Vektorgrafik, daher wird das Logo auf der Website in jeder Größe gestochen scharf angezeigt. Bei einfarbigen Logos bietet SVG einen weiteren Vorteil: Die Farbe des SVGs kann mithilfe von CSS angepasst werden. Dies ist besonders nützlich, wenn das Logo auf verschiedenen Hintergründen […]

11. März 2023

WordPress-User per FTP anlegen

Mit folgendem Code kann man in WordPress User anlegen, wenn man keinen Admin-Zugriff auf das Backend hat, z.B. wenn dein Kunde die Zugangsdaten verlegt hat oder der Admin nicht verfügbar ist. FTP-Zugriff ist hierzu natürlich erforderlich. Ergänze diesen Code in der functions.php und rufe die Seite einmal auf. Anschließend kannst du dich mit den angegebenen […]

8. März 2023

Related Posts in WordPress auf Basis der Tags anzeigen

Mit folgendem Snippet lassen sich in WordPress Posts ausgeben, die die gleichen Tags verwenden, wie der aktuelle Post:

7. März 2023

So kann man im Gutenberg-Editor Blöcken beliebige CSS-Klassen zuweisen

Die Funktion „register_block_style“ ermöglicht es benutzerdefinierte CSS-Klassen vorhandenen Gutenberg-Blöcken zuzuweisen. Das ermöglicht z.B. die Auswahl verschiedener Listen-Typen, Tabellen-Typen, Text-Styles u.v.m. – also alles, was mit CSS formatierbar ist direkt im Gutenberg-Editor. Folgender Code muss hierfür in der functions.php ergänzt werden: Jetzt kann die Klasse im Gutenberg-Editor rechts in den Block-Einstellungen ausgewählt werden. Vorausgesetzt, dass die […]

5. März 2023

Datum formatieren in WordPress und PHP

WordPress stellt von Haus aus die Funktion „get_the_date()“ zur Verfügung, mit der ein schön formatiertes Datum mit deutschen Monatsnamen innerhalb eines Loops oder eines Posts ausgegeben werden kann. Wie genau das Datum formatiert werden soll, kann in den WP-Einstellungen definiert werden. In PHP ist das Ganze etwas umständlicher. Das aktuelle Datum lässt sich wie folgt […]

3. März 2023

Wie man einen eigenen Kalender in WordPress erstellt

Vermutlich gibt es hunderte Kalender- und Event-Plug-ins für WordPress. Häufig fehlt dann aber genau das Feature, das man benötigt oder die Kalender sind völlig überladen mit Features, die man überhaupt nicht benötigt. Deshalb möchte ich hier zeigen, wie man mit wenig Aufwand seinen eigenen Kalender erstellen kann. Zunächst benötigen wir 3 Plug-ins, die ich grundsätzlich […]

27. Februar 2023

Eigene Vorlagen für den Gutenberg-Editor erstellen

Der Gutenberg-Editor ist heute die wohl beste Art Website-Content zu bearbeiten. Noch besser ist er, seitdem er die Möglichkeit bietet, Vorlagen zu verwenden. Eine Vorlage, oder auch „Block-Pattern“, ist eine Zusammenstellung an Blocks, wie z.B. Headline, Bild, Text und beliebigen anderen Blöcken. So eine Vorlage lässt sich ganz einfach wie folgt erstellen. 1. Erstelle das […]