Keine Sorge, es besteht kein akuter Handlungsbedarf. Prüfe zunächst, ob alle Komponenten (Plugins, Themes) deiner Website aktuell sind. Wahrscheinlich verschwindet nach der Aktualisierung diese Fehlermeldung.

Wenn du diese Nachricht auf deiner Website – im nicht angemeldeten Zustand – siehst, dann hast du in erster Linie deine wp-config.php unpassend eingestellt, denn solche Fehlermeldungen sollten normalen Nutzern nicht angezeigt werden.

Da es sich nicht um eine Fehlermeldung, sondern um einen Hinweis des WordPress-Cores handelt, musst du nicht sofort aktiv werden. Allerdings lohnt sich ein genauerer Blick, denn die Nachricht besagt, dass eine in deinem Projekt (Plugins oder Theme) verwendeten WordPress-Komponenten (das Objekt WP_Dependencies) als veraltet (deprecated) markiert wurde. Das bedeutet, dass diese in zukünftigen WordPress-Versionen nicht mehr verfügbar sein wird und dann tatsächlich zu einem Fehler führt.¹

Veraltete WordPress-Komponenten finden

Die Lösung ist denkbar einfach:

1. Prüfe, ob alle verwendeten Plugins in der aktuellsten Version verwendet werden
2. Prüfe, ob deine Themes ebenfalls aktuell sind
3. Deaktiviere alle Plugins und aktiviere sie einzeln

So kannst du prüfen, welches Plugin diese Warnung verursacht und Rückschlüsse treffen. Meist ist es ratsam ein solches Plugin auf seine Sinnhaftigkeit hin zu überprüfen.

Hintergrund: Was bedeutet „Deprecated“ bei WordPress?

Übersetzt bedeutet der Begriff so viel wie „veraltet“ oder „missbilligt“.

In der Welt der Softwareentwicklung ist dies ein standardisierter Warnhinweis. Es bedeutet, dass ein bestimmter Teil des Codes (z. B. eine Funktion oder ein Objekt wie im Beispiel WP_Dependencies) zwar aktuell noch funktioniert, aber offiziell zum Auslaufmodell erklärt wurde.

Warum nutzt WordPress diese Warnungen?

Um das System sicherer, schneller und moderner zu machen, müssen alte Code-Strukturen gelegentlich ersetzt werden. Dieser Prozess geschieht in drei Phasen:

1. Aktiv: Die Funktion ist auf dem neuesten Stand und soll genutzt werden.
2. Deprecated (Veraltet): WordPress teilt den Entwicklern mit: „Wir haben eine bessere Lösung gefunden. Bitte stellt euren Code um, denn die alte Methode wird bald entfernt.“
3. Removed (Entfernt): Die Funktion wird komplett aus dem System gelöscht.

Warum ist das wichtig für dich?

Solange eine Funktion lediglich als „deprecated“ markiert ist, läuft deine Website normal weiter. Es ist jedoch eine Vorwarnung. Sobald WordPress eine neue Hauptversion veröffentlicht und diese veralteten Funktionen endgültig entfernt, wird aus dem bloßen Hinweis ein kritischer Fehler (Fatal Error). In diesem Moment würde deine Website nicht mehr laden.

Woher kommt die Meldung?

In den seltensten Fällen ist WordPress selbst die Ursache. Meistens stammt der veraltete Code aus:

• Einem Plugin, das seit längerer Zeit kein Update mehr erhalten hat.
• Deinem Theme, wenn es nicht an die neuesten WordPress-Standards angepasst wurde.
• Einer individuellen Programmierung in deiner functions.php.

Der Beitrag Deprecated: Anpassung der Code-Struktur erschien zuerst auf deinWP.de.

Nachdem wir die Regeln für die Vergabe von Dateinamen ausführlich beschrieben haben, sollten wir euch auch spezielle Regeln für Dateien benennen. Im konkreten Fall für die Erstellung von Bildern.

Fertigt Totale und Detailaufnahmen an, immer im Hoch- und Querformat und sendet eure Originale an euren Dienstleister.

Gern könnt ihr noch einen Leitgedanken für eure Bilder formulieren, allerdings klingen diese häufig abgedroschen und helfen bei der Erstellung selten praktisch weiter.

Technische Produkte wirken oft unnahbar. Ein einfacher Trick, das zu ändern: spielerische Vergleiche, die im Gedächtnis bleiben. Stell dir ein kleines Plüschtier vor, das vor einer riesigen CNC-Fräse sitzt – die Dimensionen werden sofort klar und das Produkt gewinnt an Sympathie. Dieses Plüschtier kann zu einem wiedererkennbaren Maskottchen werden. Wenn es konsequent auf der Website, in Broschüren und sogar neben der Bürotasse auftaucht, etabliert es sich als humorvolles und einprägsames Markenzeichen.

exiftool -tagsFromFile "C:\Pfad\Originale\%f.%e" -gps:all "C:\Pfad\Bearbeitet"

exiftool -overwrite_original -tagsFromFile "C:\Pfad\Originale\%f.%e" -gps:all "C:\Pfad\Bearbeitet"

Der Beitrag Leitfaden für Website-Medien (Bilder, Videos, …) erschien zuerst auf deinWP.de.

Irgendwann im Laufe deiner Website-Bearbeitung wirst du Bekanntschaft mit der htaccess Datei machen. Davon bin ich überzeugt und das nicht nur, weil du die Content Security Policy (CSP) einstellst. Ich werde dir die gängigsten .htaccess Themen zusammenfassen und jeweils den Wunsch sowie das Ziel angeben.

Insbesondere im Zusammenhang mit bedingten Weiterleitungen verwende ich die htaccess-Datei gern, obwohl mit Redirection auch ein adäquates Plugin existiert.

Zunächst handeln wir in aller Kürze die Theorie ab: Wozu also dient der eine .htaccess Konfigurationsdatei? Die Datei beinhaltet Anweisungen zur Konfiguration für den Server, verschiedene Regeln sind hinterlegt. Beispielsweise speichert WordPress Anweisungen in der .htaccess, die für die Ausgabe der URL-Struktur zuständig sind. Der Webserver erfährt, wie er die Verzeichnisstruktur ausgeben soll. Weiter kannst du Einstellungen vornehmen, die der Sicherheit deiner Website zuträglich sind und für eine zügigere Ladezeit gibt es ebenfalls Einträge in der .htaccess Datei.

Der Hypertext Access ist quasi die Tür zu deiner Website.

So bearbeitest du deine htaccess

Erster Schritt: Backup anlegen!

Sobald du tiefgreifende Änderungen am Server oder deiner Website vornimmst, legst du ein Backup an! Bei der .htaccess Datei ist dies von elementarer Bedeutung, denn sobald in dieser Datei ein Fehler vorhanden ist, funktioniert deine Seite nicht mehr! Bevor du voller Panik unkontrollierte Änderungen vornimmst, tauschst du die bearbeitete Datei gegen deine Sicherheitskopie aus.

Regeln kommentieren

Dir oder anderen Nutzern hilft es ungemein, wenn du die eingefügten Konfigurationsanweisungen kommentierst. Hierzu fügst du über dem jeweiligen Code eine Zeile samt führendem Hastag ein.

# Mein Kommentar zum Code

In den folgenden Beispielcodes ist diese Zeile bereits enthalten, damit du den Überblick behältst.

Ich sehe keine .htaccess-Datei in meinem FTP-Programm

Die .htaccess-Datei muss nicht auf dem Webserver liegen. Wenn du die Datei nicht siehst, ist eventuell keine vorhanden. Andernfalls blendet dein FTP-Programm die Datei auf dem Server aus, da sie mit einem Punkt startet. Beides lässt sich simpel lösen:

Bedenke: Nur Webserver die NCSA kompatibel sind, kennen das Konzept der .htaccess Datei. Der Vorteil dabei, die am weitesten verbreitete Variante des Apache Webservers ist kompatibel.

Erzwinge die Anzeige von „versteckten Dateien“ in deinem FTP-Programm. Meist findet sich eine solche Option in den Einstellungen.

• FileZilla: Menü unter „Server“
• WinSCP: Menü unter „Einstellungen“ –> Listenfenster –> Versteckte Dateien anzeigen (Strg+Alt+H)

Ist keine .htaccess vorhanden, erzeugst du eine Textdatei (txt) und benennst diese passend. Du kannst auch eine leere Text-Datei hochladen und auf dem Server umbenennen. Vereinzelt kann es passieren, dass bestimmte Benutzerrechte vergeben werden müssen. Dies umgehst du, wenn du die Datei direkt auf dem Webserver erzeugst.

Die Datei bearbeiten

Schnapp dir einen Texteditor deiner Wahl und nimm Änderungen an der Datei vor.

• Komfortabler als der Standard-Editor ist unter Windows: Notepad++
• Auf dem Mac kannst du die Datei mit Textedit bearbeiten

Das Abspeichern kann mitunter zu Schwierigkeiten führen. Bei Notepad++ beispielsweise solltest du bei der Auswahl des Dateityps auf „alle Typen“ umschalten. Dann kannst du die Datei ohne Endung speichern. Zum Überprüfen kannst du einen Rechtsklick auf die Datei vollführen, hier klickst du auf Eigenschaften und besuchst den Reiter „Allgemein“. An dieser Stelle sollte .htaccess Datei stehen und nichts anders.

Für Apache-Webserver geeignet

Die .htaccess als Konfigurationsdatei wirst du auf allen gängien Apache-Webservern finden und verwenden. Und Apache selbst ist gängig genug ; ) Alternativ könnte deine Website auf einen nginx-Webserver basieren. Hier kannst du keine htaccess verwenden können, sondern musst die Regeln in NGINX-Regeln umwandeln.^[1]timmehosting.de
: htaccess Converter Aus folgender Anweisung einer Weiterleitung

rewrite ^/mein--alter-blogpost/$ https://www.domainname.de/mein-aktueller-blogpost/ permanent;

wird nach dem Nutzen des nginx-Converters:

rewrite ^/mein--alter-blogpost/$ https://www.domainname.de/mein-aktueller-blogpost/ permanent;

Egal, ob im Verzeichnis deines Hosters eine htaccess liegt (Apache) oder eine nginx-Konfiguration verwendet wird, alle Konfigurationsänderungen werden sofort wirksam. Daher ist ein verantwortungsvoller Umgang wichtig. Fehlerhafte Einstellungen und Konfigurationen in deiner .htaccess-Datei können erhebliche Schäden auf der betroffenen Website verursachen. Daher ist das beschriebene Backup essentiell.

nginx vs. Apache

Beide Server haben ihre eigenen Stärken und sind in bestimmten Szenarien jeweils besser geeignet. Die Wahl zwischen Nginx und Apache hängt letztlich von den spezifischen Anforderungen und dem geplanten Einsatzszenario ab.

• Performance: Nginx hat die Nase vorn bei hoher Last und vielen gleichzeitigen Verbindungen.
• Konfiguration: Nginx bietet eine einfachere und klarere Konfigurationsstruktur.
• Erweiterbarkeit: Apache bietet mehr Module und Erweiterungsmöglichkeiten.
• Anwendungsfälle: Nginx eignet sich besonders gut als Reverse Proxy und für statische Inhalte, während Apache durch seine Flexibilität und breite Unterstützung für dynamische Inhalte punktet.

# BEGIN WordPress

RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

# END WordPress

# BEGIN WordPress (3.5+ Multisite Subdomain)
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]

# add a trailing slash to /wp-admin
RewriteRule ^wp-admin$ wp-admin/ [R=301,L]

RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^(wp-(content|admin|includes).*) $1 [L]
RewriteRule ^(.*\.php)$ $1 [L]
RewriteRule . index.php [L]
# END WordPress

# wp-config.php schützen

< files wp-config.php>
order allow,deny
deny from all
< /files>

RewriteEngine On

# Domainumleitung mit https und www
RewriteCond %{HTTP_HOST} ^deinwp.de [NC]
RewriteRule (.*) https://www.deinwp.de/$1 [R=301,L]

# https-Umleitung eines Unterverzeichnisses
RewriteCond %{HTTPS} off
RewriteRule .* https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

# Interne 301 Weiterleitungen Alt zu Neu
RedirectPermanent /mein--alter-blogpost/ https://www.domainname.de/mein-aktueller-blogpost/

# Kein Image Hotlinking - Ersetzung mit speziellem Bild
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?deinwp.de [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ https://www.deinwp.de/hotlink.jpg [NC,R,L]

# Ordner mit Passwortschutz
AuthName "Admin-Bereich"
AuthType Basic
AuthUserFile /pfadzur/.htpasswd
require valid-user

benutzer:$1$l\l{SWcz$gj79dl7d40HPFwGECKPJA0

# Zugriff auf admin-ajax.php zulassen
<Files admin-ajax.php>
Order allow,deny
Allow from all
Satisfy any
</Files>

# Zugriff auf bestimmte Datei verhindern
 <files datei.php>
 order allow,deny
 deny from all
 satisfy all
 </files>

# Zugriff mit bestimmter IP-Adresse verhindern (Apache 2.2)
order allow,deny
deny from 987.654.3.21
deny from 10.10.10.20
allow from all

# Zugriff mit bestimmter IP-Adresse verhindern (Apache 2.4)
<RequireAll>
    Require all granted
    Require not ip 987.654.3.21
    Require not ip 10.10.10.20
</RequireAll>

# Zugriff eines kompletten IP-Bereichs blockieren (Apache 2.4)
<RequireAll>
    Require all granted
    Require not ip 123.45
</RequireAll>

# Blockiert Bots mit bestimmten Namen im User-Agent
RewriteCond %{HTTP_USER_AGENT} (badbot|evilbot|spam-crawler) [NC]
RewriteRule .* - [F,L]

# Blockiert viele ungewollte Bots (Version 2025)
<IfModule mod_rewrite.c>
RewriteEngine On

# Blockiert Offline-Browser, E-Mail-Sammler und alte Bad Bots
# Enthält die neuesten Ergänzungen wie CherryPicker, Harvest, LWP::Simple etc.
RewriteCond %{HTTP_USER_AGENT} (aipbot|Atomic_Email_Hunter|BlackWidow|CherryPicker|ChinaClaw|ContactBot|craftbot|Crescent|Bloggsi|CHATCATCHER|CopyRightCheck|Custo|DISCo|Download\ Demon|eCatch|EirGrabber|EmailCollector|Email\ Extractor|EmailGrabber|EmailSearch|EmailSiphon|EmailWolf|ExtractorPro|EyeNetIE|FlashGet|GetRight|GetWeb!|Go!Zilla|Go-Ahead-Got-It|GrabNet|Grafula|grub|Harvest|HMView|HTTrack|Image\ Stripper|Image\ Sucker|Indy\ Library|InfoPath|InterGET|Internet\ Ninja|JetCar|JOC\ Web\ Spider|larbin|LeechFTP|LMSPIDER|LWP::Simple|Mass\ Downloader|MIDown\ tool|Mister\ PiX|Navroad|NearSite|NetAnts|NetMechanic|NetSpider|Net\ Vampire|NetZIP|NICEhttp|Nmap|Octopus|Offline\ Explorer|Offline\ Navigator|PageGrabber|Papa\ Foto|pavuk|pcBrowser|RealDownload|ReGet|SHELOB|SIMILARPAGES|SiteSnagger|SmartDownload|SpiderMan|SphereScout|SuperBot|SuperHTTP|Surfbot|thesubot|tAkeOut|Teleport\ Pro|VoidEYE|Web\ Image\ Collector|Web\ Sucker|WebAuto|WebBandit|WebCopier|WebEmailExtractor|WebFetch|WebGo\ IS|WebLeacher|WebReaper|WebSauger|Website\ eXtractor|Website\ Quester|WebStripper|WebWhacker|WebZIP|weneo|Wget|Widow|WWWOFFLE|Xaldon\ WebSpider|Zeus) [NC,OR]

# Blockiert sehr aggressive Crawler von Bytedance (TikTok) und Huawei
RewriteCond %{HTTP_USER_AGENT} (Bytespider|PetalBot) [NC,OR]

# Blockiert gängige SEO-Tools (kann Serverlast senken, bei Bedarf entfernen)
RewriteCond %{HTTP_USER_AGENT} (AhrefsBot|SemrushBot|MJ12bot|DotBot) [NC,OR]

# Blockiert häufig für Spam oder Scans missbrauchte Bibliotheken/Tools
RewriteCond %{HTTP_USER_AGENT} (libwww-perl|python-urllib|python-requests|Nikto) [NC]

# Alles, was zutrifft, blockieren
RewriteRule .* - [F,L]
</IfModule>

# Blockiert Anfragen von bekannten Spam-Domains als Referrer
<IfModule mod_rewrite.c>
RewriteEngine On

# Bekannte Referrer-Spam-Domains
RewriteCond %{HTTP_REFERER} buttons-for-website\.com [NC,OR]
RewriteCond %{HTTP_REFERER} darodar\.com [NC,OR]
RewriteCond %{HTTP_REFERER} floating-share-buttons\.com [NC,OR]
RewriteCond %{HTTP_REFERER} googlsucks\.com [NC,OR]
RewriteCond %{HTTP_REFERER} hulfingtonpost\.com [NC,OR]
RewriteCond %{HTTP_REFERER} ilovevitaly\.com [NC,OR]
RewriteCond %{HTTP_REFERER} makemoneyonline\.com [NC,OR]
RewriteCond %{HTTP_REFERER} semalt\.com [NC,OR]
RewriteCond %{HTTP_REFERER} simple-share-buttons\.com [NC,OR]
RewriteCond %{HTTP_REFERER} social-buttons\.com [NC,OR]
RewriteCond %{HTTP_REFERER} webmonetizer\.net [NC,OR]
RewriteCond %{HTTP_REFERER} 4webmasters\.org [NC,OR]
RewriteCond %{HTTP_REFERER} 100dollars-seo\.com [NC,OR]
RewriteCond %{HTTP_REFERER} best-seo-offer\.com [NC,OR]
RewriteCond %{HTTP_REFERER} blackhatworth\.com [NC,OR]
RewriteCond %{HTTP_REFERER} buttons-for-your-website\.com [NC,OR]
RewriteCond %{HTTP_REFERER} cenoval\.ru [NC,OR]
RewriteCond %{HTTP_REFERER} econom\.co [NC,OR]
RewriteCond %{HTTP_REFERER} event-tracking\.com [NC,OR]
RewriteCond %{HTTP_REFERER} free-share-buttons\.com [NC,OR]
RewriteCond %{HTTP_REFERER} get-free-traffic-now\.com [NC,OR]
RewriteCond %{HTTP_REFERER} humanorightswatch\.org [NC,OR]
RewriteCond %{HTTP_REFERER} priceg\.com [NC,OR]
RewriteCond %{HTTP_REFERER} success-seo\.com [NC,OR]
RewriteCond %{HTTP_REFERER} videos-for-your-business\.com [NC,OR]
RewriteCond %{HTTP_REFERER} share-buttons\.xyz [NC,OR]
RewriteCond %{HTTP_REFERER} traffic2money\.com [NC,OR]
RewriteCond %{HTTP_REFERER} kambasoft\.com [NC,OR]
RewriteCond %{HTTP_REFERER} seo-masters\.org [NC,OR]
RewriteCond %{HTTP_REFERER} social-traffic\.xyz [NC,OR]
RewriteCond %{HTTP_REFERER} floating-buttons\.com [NC,OR]
RewriteCond %{HTTP_REFERER} free-video-tool\.com [NC,OR]
RewriteCond %{HTTP_REFERER} buttons4yourwebsite\.com [NC,OR]
RewriteCond %{HTTP_REFERER} rank-checker\.online [NC]

# Alles, was zutrifft, blockieren
RewriteRule .* - [F,L]
</IfModule>

# 403 Fehler zeigen, wenn Begriffe in der URL auftauchen
RewriteCond %{QUERY_STRING} [^a-z](declare¦char¦set¦cast¦convert¦delete¦drop¦exec¦insert¦meta¦script¦select¦truncate¦update)[^a-z] [NC]
RewriteRule (.*) - [F]

# Verzeichnisinhalt anzeigen
Options +Indexes

# Verzeichnisinhalt verbergen
Options -Indexes

# Auslesen der Benutzer verhindern
RewriteCond %{QUERY_STRING} .*author=(.+.?) [NC]
RewriteRule (.*) /?author= [NC,L,R=301]

## Add trailing slash
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} !(.*)/$
RewriteRule ^(.*)$ https://www.domainname.tld/$1/ [L,R=301]

# Add trailing slash
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_METHOD} GET
RewriteCond %{REQUEST_URI} !(.*)/$
RewriteCond %{REQUEST_FILENAME} !.(css|xml|js|php|scss|webp)$ [NC]
RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1/ [L,R=301]

## Remove trailing slash
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} (.+)/$
RewriteRule ^ %1 [R=301,L]

# Anpassung der PHP Einstellungen
php_value memory_limit 256M
php_value post_max_size 32M
php_value upload_max_filesize 24M
php_value max_execution_time 300

# PHP Version einstellen
AddHandler php56-cgi .php
AddHandler php74-cgi .php
AddHandler php80-cgi .php

# PHP-Version 8.0 einstellen
AddHandler x-httpd-php8.0 .php

# PHP 8.0 mit OPcache 
AddHandler x-httpd-opcache-php8.0 .php

# PHP 8.0 mit OPcache 
AddType application/x-httpd-php8 .php

# HSTS Header aktivieren
Header set Strict-Transport-Security: "max-age=31536000; includeSubDomains;" env=HTTPS

# HSTS Header aktivieren
Header always set Strict-Transport-Security: "max-age=31536000; includeSubDomains;" env=HTTPS;

# HSTS Header mit Preload aktivieren 
Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"

<FilesMatch "\.(jpg|png|gif)$">
    # Hier stehen die Befehle, die auf alle Dateien mit diesen Endungen angewendet werden sollen
</FilesMatch>

# Trackbacks deaktivieren
<FilesMatch "^(xmlrpc\.php|wp-trackback\.php)">
Order Deny,Allow
Deny from all
#Allow from x.x.x.
<FilesMatch>

PDF-Dateien mit Canonical Angabe im HTTP Header auszeichnen

Ein PDF (Doc und weitere Dateiendungen) ist ja eigentlich ein Dokument und kein „echtes“ Web-Element. Aber wenn ein PDF über einen Webserver ausgeliefert wird – also wenn du es online aufrufst, etwa durch einen Link – dann wird es genau wie eine HTML-Seite vom Server an den Browser geschickt. Und dabei wird ein sogenannter HTTP-Header mitgeliefert.

Dieser Header enthält wichtige „Zutaten“, die dem Browser oder auch Suchmaschinen wie Google schmecken sollen. Sie erzählen den Maschinen, wie sie mit dem PDF umgehen sollen. Zum Beispiel: „Das hier ist ein PDF!“ oder „Dies ist nur eine andere Version eines bekannten Inhalts. Nutze für Rankings stattdessen diese HTML-Seite!“ – Letzteres wird durch eine Canonical Angabe im Header geregelt.

Canonical-Tag oder Canonical-Angabe?

Die Canonical-URL wurde ursprünglich im Kontext von HTML-Dokumenten eingeführt, um Suchmaschinen mitzuteilen, welche Version einer Seite als die bevorzugte (kanonische) Version betrachtet werden soll. In diesem Fall wird die Canonical-Information tatsächlich als ein <link>-Tag im <head>-Bereich einer Webseite angegeben:

<link rel="canonical" href="https://www.deinwp.de/htaccess/" />

Da dies der häufigste Anwendungsfall ist, wird die Canonical-Angabe oft mit diesem HTML-Tag gleichgesetzt, obwohl es eine sprachliche Verallgemeinerung darstellt, denn die Information kann auch über andere Arten übermittelt werden. Für Nicht-HTML-Ressourcen wie PDFs oder Bilder kann die kanonische URL über einen Link-Header im HTTP-Response angegeben werden:

Link: https://www.deinwp.de/wp-content/uploads/2025/01/htaccess-uebersicht.pdf; rel=“canonical“

Das PDF selbst hat diesen Header nicht von Haus aus – es ist der Server, der ihn beim Ausliefern „anreicht“. Ohne diesen Header wüssten Suchmaschinen und Browser nicht, was sie mit dem PDF machen sollen. Also: Wenn dein PDF online verfügbar ist, hat es quasi indirekt einen HTTP-Header – und das kann man sich für SEO zunutze machen! Insbesondere dann, wenn deine PDF- bzw. Doc-Datei rankt, anstatt der eigentlichen HTML-Seite

Du kannst die Canonical-Information händisch integrieren oder beispielsweise folgenden Generator nutzen. (Meiner Meinung nach wird dort allerdings eine fehlerhafte Syntax verwendet.)

# Canonical-Angabe für PDFs
<IfModule mod_headers.c>
<Files htaccess-uebersicht.pdf>
Header append Link "<https://www.deinwp.de/htaccess/>; rel=\"canonical\""
</Files>
</IfModule>

Hast du weitere PDF-Dateien, die einen Header erhalten sollen, fügst du diese nach dem schließenden </Files> ein. Dein Befehl startet dementsprechen mit <Files … und endet mit </Files>, wie im Beispiel zu sehen. Möchtest du anstatt einer spezifischen Datei einen kompletten PDF-Ordner auszeichnen, musst du die Direktive <FilesMatch> verwenden und diese mit regulären Ausdrücken bestücken. Dies ermöglicht es, mehrere Dateien basierend auf einem Muster zu behandeln, wie im Abschnitt weiter oben beschrieben. Es genügt tatsächlich diese relative Angabe, denn dein Server weiß, wo er die Datei findet.

Funktioniert meine Canonical-Auszeichnung?

Eine berechtigte Frage, nicht nur, weil ich diese rhetorisch nutze. Du könntest dir nun ein Online-Tool suchen und prüfen lassen, ob dieses die Angabe findet. Einfacher ist es allerdings, wenn du deine lokale Komandozeile hierfür nutzt, denn dafür braucht es nicht viel!

Wenn du Windows als Betriebssystem verwendest, drückst du die Windows-Taste + r und gibst im öffnenden Feld cmd ein. Dann öffnet sich ein Fenster. Deine Komandozeile! Hier angekommen verwenden wir das platformübergreifende Tool curl (ausgesprichen „kurl“). Mit diesem werden Daten von oder zu Servern übertragen und beispielsweise der HTTP-Header angezeigt. Damit dies geschieht wird die Option -I verwendet. Das Tool sendet nun eine HEAD-Anfrage an den Server und zeigt nur die HTTP-Header der Antwort an, ohne den eigentlichen Inhalt der Ressource (z. B. den HTML-Code oder den Dateiinhalt) herunterzuladen. Und genau in diesem Header wollen wir unsere Canonical-Angabe einfügen, also sollte diese hier vorhanden sein!

# Browser Caching
ExpiresActive On
ExpiresByType image/jpg "access 1 month"
ExpiresByType image/jpeg "access 1 month"
ExpiresByType image/gif "access 1 month"
ExpiresByType image/png "access 1 month"
ExpiresByType image/x-icon "access 1 month"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresDefault "access 3 days"

# GZIP Komprimierung aktivieren
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

# mod_deflate aktivieren
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/vtt 
AddOutputFilterByType DEFLATE text/x-component
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/js
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-httpd-fastphp
AddOutputFilterByType DEFLATE application/atom+xml 
AddOutputFilterByType DEFLATE application/json
AddOutputFilterByType DEFLATE application/ld+json 
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject 
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/font-woff2
AddOutputFilterByType DEFLATE application/x-font-woff
AddOutputFilterByType DEFLATE application/x-web-app-manifest+json font/woff
AddOutputFilterByType DEFLATE font/woff 
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon 
</IfModule>

# Weiterlesen nur bei nicht existenten Dateien
RewriteCond %{REQUEST_FILENAME} !-f

# Angabe von Dateinamen, bei denen die folgende Regel geschehen soll
RewriteCond %{REQUEST_FILENAME} !.(css|xml|js|php|scss|webp)$ [NC]

Der Beitrag htaccess – Grundlagen & Beispiele erschien zuerst auf deinWP.de.

Verwende zur Spambekämpfung zunächst die internen WordPress-Einstellungen!

1. WordPress-eigene Einstellungen nutzen

Bevor wir ein externes Plugin installieren, prüfen wir die in WordPress integrierten Funktionen zur Kommentar-Moderation und passen diese eventuell an.

Kommentare zur Überprüfung zurückhalten: Im WordPress-Dashboard Einstellungen > Diskussion. Hier wird festgelegt, dass Kommentare manuell genehmigt werden müssen.

• „Bevor ein Kommentar erscheint, muss der Kommentar manuell freigegeben werden“: Das Kästchen sollte unbedingt aktiviert werden. So hast du die Kontrolle, aber auch mehr Arbeit. Da ich Kommentare für wichtig erachte und eine Diskussion gewinnbringend ist, hilft dir die Kontrolle bei der weiteren Prüfung.

• „Bevor ein Kommentar erscheint, muss der Autor bereits einen genehmigten Kommentar geschrieben haben“: Eine gute Balance. Der erste Kommentar eines Nutzers wird geprüft, alle weiteren werden automatisch freigeschaltet.

Nur ein paar Pixel weiter unten, kannst du innerhalb der Kommentar-Moderation Bedingungen angeben und eine Schwarze Liste pflegen:

Kommentar-Moderation: Hält Kommentare zurück, die eine bestimmte Anzahl von Links enthalten (Spam enthält oft viele Links). Ein guter Wert ist 1 oder 2.

Wenn ein Kommentar eines der folgenden Wörter innerhalb von Inhalt, Autornamen, URL, E-Mail-Adresse, IP-Adresse oder User-Agent-Zeichenkette des Browsers enthält, wird er in der Moderations-Warteschlange gehalten. Ein Wort oder eine IP-Adresse per Zeile. Wortteile werden auch berücksichtigt, also wird durch „press“ auch „WordPress“ gefiltert.

WordPress in der Version 6.8.2

Verbotene Kommentarwörter: Hier solltest du typische Spam-Schlüsselwörter (z.B. „viagra“, „cialis“, Namen bekannter Spam-Bots) oder IP-Adressen eintragen. Kommentare, die diese Wörter enthalten, werden direkt in den Papierkorb verschoben. Insbesondere, wenn du bereits die erste Spam-Flut hinter dir hast, solltest du einige Begriffe kennen.

„Wortteile werden auch berücksichtigt, also wird durch „press“ auch „WordPress“ gefiltert“, wodurch du den Filter spärlich einsetzen solltest.

Wichtige Tipps zur Pflege der Sperrliste:

• Ein Wort pro Zeile: Jedes Wort oder jede Phrase muss in einer eigenen Zeile stehen.
• Keine Groß-/Kleinschreibung: WordPress berücksichtigt die Groß- und Kleinschreibung nicht. Viagra funktioniert also genauso wie viagra.
• Wortbestandteile: Die Sperrliste funktioniert auch bei Wortbestandteilen. Wenn du casino sperrst, wird auch ein Kommentar mit „onlinecasino“ gefunden.
• Regelmäßig erweitern: Schau gelegentlich in Ihren Spam-Ordner. Wenn du neue Muster oder wiederkehrende Wörter entdeckst, die vom Spam-Plugin nicht erwischt wurden, füge diese manuell zur Sperrliste hinzu.
• Nicht übertreiben: Eine zu aggressive Liste kann auch legitime Kommentare blockieren. Beginn daher mit den offensichtlichsten Begriffen und erweitere die Liste bei Bedarf.

Beispiel Blacklist

Hier ist eine Liste typischer Wörter und Muster, die in einer Sperrliste für deutsche und internationale Spam-Kommentare nicht fehlen sollten.

Kategorien und empfohlene Einträge

Es ist sinnvoll, die Liste nach Themen zu sortieren. Ein Wort pro Zeile.

1. Pharma & Gesundheit (Klassiker)

Diese Kategorie ist für den meisten Spam verantwortlich.

cialis
viagra
levitra
pharma
pharmacy
phentermine
tramadol
xanax
hydrocodone
vicodin
diet pills
weight loss
acne treatment

2. Glücksspiel & Wetten

casino
slots
poker
blackjack
roulette
gambling
betting
online-casino
spielautomaten
wettanbieter

3. Finanz-Spam & Schnelles Geld

loan
loans
mortgage
credit
forex
binary options
get rich quick
make money fast
work from home
investment
schnell reich werden
kredit
darlehen

4. Erotik & nicht jugendfreie Inhalte

porn
sex
xxx
adult
escort
nude
naked
hot girls

5. Produktfälschungen & Luxusgüter-Spam

rolex
replica
louis vuitton
gucci
chanel
ugg boots
ray-ban
sunglasses
handbags
luxury

6. Technische & SEO-Spam-Begriffe

Spammer versuchen oft, Backlinks für ihre eigenen Seiten zu generieren.

buy backlinks
SEO service
cheap seo
free traffic
increase website traffic

7. Generische Spam-Ausdrücke & HTML

Oft werden auch bestimmte HTML-Tags missbraucht, um Links oder schädliche Inhalte zu verstecken.

[url=
[/url]
<a href=
.ru
.cn
.xyz
-online
free
download
click here

Kommentare für ältere Beiträge schließen

Spam-Bots zielen oft auf ältere, etablierte Beiträge ab. Das lässt sich mit einer Einstellung verhindern. WordPress kann Kommentare für Beiträge, die älter als eine bestimmte Anzahl von Tagen sind, automatisch schließen. Ich mag diese Option nicht, denn sie verhindert auch die Kommunikation.

• Aktiviere das Kästchen bei „Kommentare zu Beiträgen automatisch schließen, die älter sind als [z.B. 60] Tage“.

Der Beitrag WordPress-Spam-Kommentare stoppen erschien zuerst auf deinWP.de.

GenerateBlocks 2.0.0

Sicherheit

Verhindern, dass angemeldete „Contributors“ private Inhalte abfragen können

Diese Änderung schließt eine potenzielle Sicherheitslücke. Autoren mit eingeschränkten Rechten (sogenannte Contributors) können nun nicht mehr durch bestimmte Abfragen auf Inhalte von privaten Beiträgen oder Seiten zugreifen, für die sie keine Berechtigung haben.

Neuerungen

Alle Blöcke für bessere Leistung und Kontrolle von Grund auf neu geschrieben

Das Herzstück des Updates: Die gesamte Codebasis der Blöcke wurde komplett erneuert. Das Ergebnis ist ein saubererer Code, eine deutlich schnellere Ladezeit (sowohl im Editor als auch auf der Live-Website) und eine präzisere Kontrolle über das Design und Verhalten jedes Elements.

Blöcke der Version 1 bleiben dort, wo sie verwendet werden, erhalten und funktionieren normal weiter

Keine Sorge um bestehende Seiten! Wenn du das Update installierst, werden alle deine mit den alten Blöcken erstellten Inhalte weiterhin perfekt funktionieren. Dies garantiert einen reibungslosen Übergang ohne fehlerhafte Darstellungen.

Blöcke der Version 1 können mit einem einfachen Filter standardmäßig aktiviert werden

Obwohl für neue Inhalte die modernen Blöcke vorgesehen sind, hast du die Flexibilität, bei Bedarf die Blöcke der Version 1 wieder für die Block-Auswahl zu aktivieren. Dies geschieht über einen einfachen Code-Filter und ist nützlich für spezielle Anwendungsfälle.

Element-Block – ersetzt die bisherigen Container- und Grid-Blöcke

Anstelle von separaten Blöcken für Layout-Container und Raster gibt es nun einen einzigen, leistungsfähigeren „Element“-Block. Er vereint die Funktionen beider Blöcke und vereinfacht so die Auswahl.

Der Element-Block bietet im Block-Menü die Varianten „Container“ und „Grid“

Um den Umstieg zu erleichtern, findest du in der Block-Auswahl weiterhin die vertrauten Optionen „Container“ und „Grid“. Dabei handelt es sich nun um voreingestellte Varianten des neuen Element-Blocks, sodass dein Workflow gleich bleibt, du aber die neue Technologie nutzt.

Text-Block – ersetzt die bisherigen Headline- und Button-Blöcke

Ähnlich wie beim Element-Block fasst der neue, flexible „Text“-Block die Funktionen zusammen, die bisher auf die Blöcke für Überschriften (Headline) und Buttons aufgeteilt waren.

Der Text-Block bietet im Block-Menü die Varianten „Headline“, „Text“ und „Button“

Auch hier bleibt der gewohnte Arbeitsablauf erhalten. Beim Hinzufügen siehst du weiterhin die Optionen für „Headline“ oder „Button“, die nun als praktische Varianten des neuen, vielseitigen Text-Blocks fungieren.

Query-Block – ersetzt den bisherigen Query-Loop-Block

Der Block zur Anzeige dynamischer Beitragslisten (z.B. für ein Blog-Archiv) wurde von „Query Loop“ in „Query“ umbenannt und auf der neuen Architektur aufgebaut.

Looper-Block – ersetzt den Grid-Block innerhalb des Query-Blocks

Innerhalb des Query-Blocks ist nun der „Looper“-Block dafür zuständig, das Layout der angezeigten Beiträge zu steuern (z.B. in einem Raster).

Loop-Item-Block – ersetzt das Post-Template (Container) im Query-Block

Dieser Block dient als Vorlage für das Design eines einzelnen Eintrags in deiner Beitragsliste (z.B. wie ein einzelner Blogbeitrag mit Titel, Bild und Textauszug dargestellt wird). Die neue Benennung schafft mehr Klarheit.

„Keine-Ergebnisse“-Block – fügt Inhalte hinzu, die angezeigt werden, wenn eine Abfrage keine Ergebnisse liefert

Mit diesem praktischen Block kannst du ganz einfach eine benutzerdefinierte Nachricht (z.B. „Leider keine Beiträge gefunden.“) gestalten, die automatisch erscheint, wenn eine Beitragsabfrage keine Ergebnisse liefert.

„Seitenzahlen“-Block – fügt eine Seitennummerierung (Paginierung) zu deinem Query-Block hinzu

Ein eigener Block, um unkompliziert eine Seitennummerierung („Seite 1, 2, 3…“) zu deinen Beitragslisten hinzuzufügen und die Navigation zu erleichtern.

Shape-Block – fügt beliebige SVG-Formen zu deinen Seiten hinzu

Dieser neue Block erlaubt es dir, Vektorgrafiken im SVG-Format ganz einfach auf deinen Seiten einzufügen und zu gestalten. Ideal für Icons, Logos oder dekorative Elemente, die ohne Qualitätsverlust skalierbar sein müssen.

Media-Block – ersetzt den bisherigen Image-Block

Der Block zum Hinzufügen von Bildern wurde erneuert und in „Media“-Block umbenannt. Er basiert auf der neuen, performanteren Architektur und ist für zukünftige Medien-Typen gerüstet.

Lokale Blöcke verfügen jetzt über den vollständigen Stil-Editor, der aus den Globalen Stilen von GB Pro bekannt ist

Die extrem leistungsstarke Design-Oberfläche, die bisher den globalen Stilen vorbehalten war, steht dir nun für jeden einzelnen Block zur Verfügung. Das ermöglicht eine nie dagewesene gestalterische Freiheit direkt am Element.

Lokale Blöcke können jetzt für jeden Breakpoint oder jede verschachtelte Regel gestaltet werden

Ein gewaltiger Sprung für das responsive Design. Du kannst das Aussehen eines Blocks direkt für verschiedene Bildschirmgrößen (Desktop, Tablet, Mobil) anpassen. Außerdem kannst du Stile für Zustände (z.B. Hover-Effekte) oder andere komplexe Szenarien definieren.

Design-Optionen im Editor filtern, je nachdem, ob sie einen Wert haben

Die Benutzeroberfläche im Editor wird übersichtlicher. Dir werden nur noch die Design-Optionen angezeigt, die du für einen Block aktiv nutzt. Das schafft Ordnung und hilft dir, dich auf das Wesentliche zu konzentrieren.

Design-Optionen im Editor filtern, je nachdem, ob sie einen Wert erben

Diese Filter-Option erleichtert das Debugging von Designs. Du kannst dir gezielt nur die Stile anzeigen lassen, die ein Block von einem globalen Stil oder einem übergeordneten Element erbt. So siehst du sofort, woher ein Stil kommt.

System für dynamische Tags. Füge dynamische Daten überall in deinen Blöcken ein

Eine der wichtigsten Neuerungen: Du kannst nun Daten direkt aus der WordPress-Datenbank (wie den Beitragstitel, Autorennamen oder das Veröffentlichungsdatum) in jeden beliebigen Block einfügen. Das ist die Grundlage für den Bau von mächtigen, wiederverwendbaren Templates.

Mehrere dynamische Tags können in einen einzigen Block eingefügt werden

Du bist nicht auf ein dynamisches Datum pro Block beschränkt. Erstelle zum Beispiel eine Überschrift wie „Beitrag von [Autorenname] am [Datum]“, indem du mehrere Tags in einem Element kombinierst.

CSS-Variable --gb-container-width für die globale maximale Breite

Für fortgeschrittene Nutzer und Entwickler gibt es nun eine CSS-Variable, die den Wert der globalen maximalen Inhaltsbreite deiner Website enthält. Diese kannst du in eigenem CSS verwenden, um Elemente einfach an der Hauptinhaltsbreite auszurichten.

Geschwindigkeit

Lokale Blöcke generieren ihr CSS und HTML jetzt direkt während der Bearbeitung im Editor

Der Code für deine Blöcke wird in Echtzeit erstellt, während du sie gestaltest. Diese „Live-Kompilierung“ ist effizienter und sorgt für eine präzisere Vorschau des Endergebnisses.

Die Blöcke werden auf der Webseite für eine bessere Leistung als statisches HTML/CSS ausgegeben

Das ist der Schlüssel zur Geschwindigkeit deiner Website. Für deine Besucher wird kein schweres JavaScript oder PHP zur Darstellung der Blöcke benötigt. Stattdessen wird sauberer, statischer HTML- und CSS-Code ausgegeben, was zu extrem schnellen Ladezeiten führt.

Der Beitrag GenerateBlocks 2.x erschien zuerst auf deinWP.de.

Mit folgenden Zeilen in deiner functions.php, deines Child-Themes, kannst die diese HTML-Säuberung deaktivieren und so alle HTML-Tags innerhalb der Biografische Angaben nutzen.

//disable WordPress sanitization to allow more than just $allowedtags from /wp-includes/kses.php
remove_filter('pre_user_description', 'wp_filter_kses');
//add sanitization for WordPress posts
add_filter( 'pre_user_description', 'wp_filter_post_kses');

Doch vorsicht, sobald du es aktiviert hast, werden alle HTML-Eingaben nicht mehr gefiltert und es könnte schadhafter Code darüber eingetragen werden. Achte also bitte darauf, dass alle Autoren und Nutzer deiner WordPress Website entsprechend sorgsdam damit umgehen.

Und nun viel Freude mit den neuen Möglichkeiten.

Der Beitrag HTML-Tags in den Autorendaten (Biografie) erlauben erschien zuerst auf deinWP.de.

Wenn wir nun Inhalte wie Bildergalerien, Teaser-Boxen oder dynamische Elemente optisch auflockern und gleichzeitig effizient anordnen möchte, stoßen wir schnell auf das sogenannte Masonry-Prinzip. Masonry-Grid steht für das „Mauerwerk-Raster“, um es ins deutsche zu holen, wenngleich das eher weniger im Sprachgebrauch genutzt wird. Das Mauerwerk beschreibt also die versetzte Darstellung der Bilder. Statt starrer Zeilen und Spalten orientiert sich dieses Layout an einer organischen, lückenoptimierten Struktur, ähnlich dem Aufbau eines Mauerwerks. Gerade bei unterschiedlich hohen Elementen, welche sonst lästig im einheitlichen Aufbau sind, entfaltet es seine volle Wirkung. Die Umsetzung bringt jedoch Herausforderungen mit sich: Während klassische CSS-Raster schnell an ihre Grenzen stoßen, greifen viele Lösungen auf JavaScript zurück. In diesem Beitrag zeigen wir einen Ansatz, welcher mit einer modernen Variante aufwartet und obendrein mit reinem CSS auskommt.

• Als erstes benötigst du ein Gallery-Block, in dem du deine Bilder einfügst.
• Dieser braucht die Klasse „.dwp-masonry„.
• Den Rest erledigt das nachfolgende CSS.

Die weiteren im CSS genannten Klassen wie „.columns-“ werden durch dem Galerie-Block von WordPress erzeugt. Wir nutzen diese Klassen gleich mit und damit ist sichergestellt, dass du weiterhin die Spalten deiner Galerie im Backend steuern kannst und das Grid genauso dargestellt wird. Auch die Funktion der zufälligen Reihenfolge kannst du weiterhin festlegen.

Hier nun das CSS, welches du in deinem Child-Theme (oder auch im Customizer) unterbringen kannst.

.dwp-masonry.columns-default {
   -webkit-columns: 3;
   -moz-columns: 3;
   columns: 3;
}
.dwp-masonry {
   display:block !important;
}
.dwp-masonry .wp-block-image {
   width:100% !important;
   margin-bottom:var(--wp--style--unstable-gallery-gap) !important;
}
.dwp-masonry.columns-1 {
   -webkit-columns: 1;
   -moz-columns: 1;
   columns: 1;
}
.dwp-masonry.columns-2 {
   -webkit-columns: 2;
   -moz-columns: 2;
   columns: 2;
}
.dwp-masonry.columns-3 {
   -webkit-columns: 3;
   -moz-columns: 3;
   columns: 3;
}
.dwp-masonry.columns-4 {
   -webkit-columns: 4;
   -moz-columns: 4;
   columns: 4;
}
.dwp-masonry.columns-5 {
   -webkit-columns: 5;
   -moz-columns: 5;
   columns: 5;
}
.dwp-masonry.columns-6 {
   -webkit-columns: 6;
   -moz-columns: 6;
   columns: 6;
}
.dwp-masonry.columns-7 {
   -webkit-columns: 7;
   -moz-columns: 7;
   columns: 7;
}
.dwp-masonry.columns-8 {
   -webkit-columns: 8;
   -moz-columns: 8;
   columns: 8;
}

Das ist also eine schnelle und effiziente Möglichkeit, dein WordPress Galerie-Block als Masonry-Grid darzsutellen. Es reicht bereits eine Klasse und ein wenig CSS und du kannst dir zusätzliche Plugins oder gar JavaScript sparen. 🙂

Hier noch ein Beispiel, wie es dann aussehen kann.
Beide Beispiele nutzen exakt die gleichen Bilder und Reihenfolge, lediglich die Klasse „.dwp-masonry“ wurde im Galerie-Block für den CSS-Masonry-Stil ergänzt.

Standard-Galerie im 5er-Raster (ohne Extras)

Standard-Galerie im 5er-Raster mit Masonry-Stil

Der Beitrag CSS: WordPress Galerie-Block in Masonry-Stil erschien zuerst auf deinWP.de.

Mit dem Plugin Lightbox for Gallery & Image Block wird wirklich nur die Funktion in dein WordPress eingefügt.

Es gibt natürlich bereits diverse Erweiterungen im Plugin-Verzeichnis von WordPress oder dein bisheriges Setup brachte diese bereits mit einem Theme oder Plugin mit. Doch welches ist am „besten“ für welchen Zweck und achtet dabei auch auf die Ladezeit deiner Website?

Wir versuchen dir unsere Entscheidungen und Ableitungen mitzugeben, damit du dir das sparen kannst. Warum der Aufwand, fragst du dich? Nun, viele dieser vermeintlichen Lösungen können schnell überladen wirken oder unnötige Extras mit sich bringen, die gegen eine schlanke Lösung sprechen. Sobald dann unnötige Upsells nur für den Lightbox Zweck als Pro-Version angeboten werden, wird es fraglich (für den kleinen Anwendungsfall). Wir wollen also versuchen eine leichtgewichtige Lösung zu finden und schlagen uns durch die breite Palette der Open-Source-Angebote, mit nachhaltigem Gedanken und ohne Marketing-Tricks, damit du das nicht tun musst. 🙂

Wie du eine einfache und schlanke Lighbox für deine Bilder bekommst, erfährst du hier.

Wir werden das Plugin „Lightbox for Gallery & Image Block“ nutzen.

Es ist sehr leichtgewichtig (13 KB / 7 KB komprimiert) aufgebaut und verzichtet komplett auf die Nutzung von jQuery.

Das Plugin erweitert die Standard-Galerie und Bildblöcke um eine schlanke, moderne Lightbox-Funktion, ganz ohne zusätzliche Abhängigkeiten. Es erkennt automatisch, ob ein Beitrag eine Galerie oder ein Bild enthält, und lädt dann baguetteBox.js, ein reines JavaScript-Lightbox-Skript mit minimalistischem Design.

Besonders praktisch: Es ist vollständig rückwärtskompatibel. Das Plugin ersetzt keine Blöcke und integriert sich nahtlos in den bestehenden Editor. Wird es deaktiviert, funktionieren alle Bilder und Galerien weiterhin wie gewohnt, lediglich die Lightbox-Funktion entfällt.

Wichtig: Damit die Lightbox funktioniert, müssen Bilder und Galerien auf die Mediendatei verlinkt werden. Wird „Keine“ oder „Anhang-Seite“ als Linkziel gewählt, wird keine Lightbox aktiviert – was allerdings nützlich sein kann, wenn man gezielt auf die Funktion verzichten möchte.

Merkmale

• Reines JavaScript, kein jQuery oder andere Abhängigkeiten
• Unterstützung für Bildunterschriften
• Responsive Darstellung
• Touch-/Swipe-Gesten werden unterstützt
• Sehr schlank: ca. 13 KB (7 KB komprimiert)
• Minimalistisches, modernes Erscheinungsbild

Kompatibilität

Das Plugin funktioniert mit folgenden Blöcken und Galerie-Plugins:

• Standard Galerie-Block
• Standard Bild-Block
• Medien- und Text-Block
• Galerie im klassischen Editor
• GenerateBlocks Bild-Element (mit aktivierter dynamischer Verlinkung zur Einzeldatei)
• Meow Gallery (inkl. Block-Version)
• CoBlocks Galerie-Layouts (Collage, Masonry, Versetzt, Gestapelt)

Installation

Die Installation erfolgt wie gewohnt über das WordPress-Plugin-Verzeichnis oder per Upload. Nach der Aktivierung erkennt das Plugin automatisch die passenden Inhalte und übernimmt die Lightbox-Funktion – vorausgesetzt, die Verlinkung der Bilder ist korrekt gesetzt.

Der Beitrag Lightbox für Bilder auf deiner WordPress-Seite nutzen erschien zuerst auf deinWP.de.

Es muss nicht immer eine komplexe oder gar umständliche Lösung für vermeintlich kleine Probleme genutzt werden. Hier erfährst du, wie du bei der Inhaltserstellung spezielle Formatierungen für die gewünschte Darstellung nutzen kannst. Was dir im täglichen Internet-Alltag begegnen kann, greifen wir hier kurz auf und bringen Licht ins Dunkel, damit du weißt, wann welche „Keule“ sinnvoll ist und du nicht mit „Kanonen auf Spatzen“ schießen musst.

Doch legen wir lieber mal los, bevor mir noch mehr Phrasen zur Versinnbildlichung einfallen. Worum geht es denn überhaupt?

 

<p>fix & fertig</p>

<p>fix & fertig</p>

­

Dampf­schiff­fahrts­gesell­schafts­kapitän

Dampfschifffahrts­gesellschafts­kapitän

©

&

HTML Text formatieren

Nun hast du erfahren, wie du einzelne Sonderzeichen korrekt darstellen kannst. Damit du diese in einer korrekten Struktur im Text unterbringst, sollst du noch kurz einige HTML-Tags kennenlernen.

Bold vs. Strong

Mit einem Klick auf das große „B“ in der Formatierung wird dein Text gefettet. Du kannst dies auch über den Tastendruck „Ctrl + B“ auslösen. Im Hintergrund wird um den markierten Text eine HTML-Formatierung eingefügt. Leider verwendet WordPress hier den HTML-Tag strong, was streng genommen nicht immer korrekt ist.

Denn <strong> besitzt eine semantische Funktion: Es kennzeichnet Text als besonders wichtig oder bedeutend im Kontext des Inhalts. Das ist vor allem für Suchmaschinen, Screenreader und andere assistive Technologien relevant, da sie so erkennen können, dass dieser Text hervorgehoben werden soll.

Betrachtest du dir nur den gefetteten Text eines Inhaltes, solltest du dadurch eine inhaltliche Zusammenfassung erhalten!

Im Vergleich hierzu steht <b> ausschließlich für die visuelle Hervorhebung. Es signalisiert dem Browser, dass der Text fett dargestellt werden soll, ohne eine besondere inhaltliche Bedeutung zu vermitteln. Insbesondere bei Legenden und Listenpunkten ist dieses visuelle Mittel hilfreich. Die folgenden Fettschreibungen sind daher mittels HTML-Tag <b> ausgezeichnet.

Die praktischen Auswirkungen sind groß:

• Für Barrierefreiheit (Accessibility): Screenreader lesen Text in <strong>-Tags mit besonderer Betonung vor, während sie bei <b>-Tags nur den Stil, nicht aber die Wichtigkeit erkennen.
• Für Suchmaschinenoptimierung (SEO): Suchmaschinen können <strong>-Tags als Signal für wichtige Schlüsselwörter oder Kernaussagen interpretieren, während <b> keine solche Bedeutung hat.
• Für die Gestaltung: Wenn du nur das Aussehen ändern möchtest, solltest du stattdessen besser CSS verwenden (z. B. font-weight: bold;).  <strong> sollte nur für wirklich wichtige Inhalte genutzt werden.

Tag	Optische Wirkung	Bedeutung (Semantik)	Einsatzempfehlung
<b>	Fett	Keine (nur Stil)	Für rein optische Hervorhebung
<strong>	Fett	Wichtiger, bedeutender Text	Für inhaltlich wichtige Aussagen

Da mich diese WordPress-Unzulänglichkeit schon eine Weile nervt und ich zur Anpassung in die HTML-Ansicht wechsle, musste eine praktischere Lösung her. Also wurde diese Formatierungsleiste kurzerhand um eine visuelle Fettschreibung ergänzt.

Die Funktion wird von einer 25-zeiligen JS-Datei mit dem Namen: custom-richtext-formats.js. Der Inhalt sieht wie folgt aus.

const { registerFormatType, toggleFormat } = wp.richText;
const { RichTextToolbarButton } = wp.blockEditor || wp.editor;
const { createElement } = wp.element;

// Neues Format <b> hinzufügen
registerFormatType('custom-format/b-tag', {
    title: 'B fett (visuell)',
    tagName: 'b',
    className: null,
    edit({ isActive, value, onChange }) {
        return createElement(
            RichTextToolbarButton,
            {
                icon: 'editor-bold',
                title: 'B fett (visuell)',
                onClick: () => {
                    onChange(toggleFormat(value, {
                        type: 'custom-format/b-tag'
                    }));
                },
                isActive,
            }
        );
    }
});

Die Datei liegt bei uns im Child-Theme unter /assets/js/ und muss über die functions.php noch angemeldet werden. Hierfür genügen ebenfalls wenige Zeilen Code:

/************************************
    Bold vs. Strong
************************************/
function mein_custom_format_enqueue() {
    wp_enqueue_script(
        'custom-richtext-formats',
        get_stylesheet_directory_uri() . '/assets/js/custom-richtext-formats.js',
        array('wp-rich-text', 'wp-element', 'wp-editor'),
        false,
        true
    );
}
add_action('enqueue_block_editor_assets', 'mein_custom_format_enqueue');

Listentypen

HTML bietet drei grundlegende Listentypen, mit denen du Inhalte strukturiert und übersichtlich darstellen kannst. Ungeordnete Listen (<ul>) und geordnete Listen (<ol>) können über den Editor abgerufen werden. Diese können zudem verschachtelt werden. Allerdings kennen die wenigsten Definitionslisten (<dl>). Diese kannst du verwenden, wenn Begriffe erklärt oder Zuordnungen geschaffen werden sollen.

Absätze und Textstruktur

Sogar bei der Erstellung von Absätzen kann es zu semantischen Unklarheiten kommen. So ist <p> semantisch als Absatz ausgezeichnet, <div> dagegen ist rein strukturell und hat keine inhaltliche Bedeutung. Dadurch verbessert der semantische Absatz die Zugänglichkeit für Algorithmen (Suchmaschinen, KI-Systeme), ein <div> trägt nicht zum besseren Verständnis bei.

• <br>: Für einen einfachen Zeilenumbruch innerhalb eines Absatzes, aber kein neuer Absatz4.
• <pre>: Für vorformatierten Text, bei dem Zeilenumbrüche und Leerzeichen erhalten bleiben (z.B. bei Gedichten oder Code).
• <hr>: Fügt eine horizontale Linie ein, um Abschnitte oder Themen zu trennen, aber kein eigentlicher Absatz4.
• Semantische Container wie <section>, <article>, <aside>, <main>: Dienen zur Gliederung größerer Inhaltsbereiche, aber nicht speziell für einzelne Absätze.

Der Beitrag HTML-Sonderzeichen für den täglichen Bedarf erschien zuerst auf deinWP.de.

WordPress ist wie ein offenes Haus. Jeder darf rein, jeder darf mitgestalten. Von Hobby-Bloggern bis hin zu professionellen Entwicklern; alle tragen ihren Teil dazu bei. Das ist kein elitärer Kreis, sondern ein echtes Miteinander. Genau das ist der Kern der Sache: WordPress ist Open Source. Und das heißt eben auch, dass niemand allein die Richtung vorgibt. Es ist ein Gemeinschaftsprojekt.

Dazu kommt: Die Einstiegshürde ist niedrig. Man braucht keine teuren Lizenzen, keine Programmierkenntnisse am Anfang. Dadurch fühlen sich viele willkommen. Und wer sich willkommen fühlt, bleibt und gibt irgendwann etwas zurück. Ob in Foren, durch Plugins, Themes oder Übersetzungen. Diese Dynamik bringt eine Energie mit sich, die man selten in der Tech-Welt findet.

Ein weiterer Punkt: WordCamps und Meetups. Das sind keine trockenen Entwicklerkonferenzen, sondern echte Treffen auf Augenhöhe. Da geht’s um Austausch, Inspiration, manchmal auch einfach nur um Gemeinschaftsgefühl. Viele Freundschaften und Geschäftsbeziehungen sind dort schon entstanden. Zumeist in erwähnter Reihenfolge.

Die Community macht WordPress menschlich. Sie sorgt dafür, dass es nicht nur ein Stück Software ist, sondern ein lebendiges Ökosystem. Und genau das spürt man bei jeder Hilfestellung im Forum, bei jedem Beitrag in einem Blog. Auf Basis dieses Gefühls ist auch deinWP entstanden. Das ist mehr als Technik. Das ist Herzblut.

WordCamps

Ein WordCamp ist eine informelle, von der Community organisierte Konferenz rund um WordPress. Diese Veranstaltungen richten sich an alle, die sich für WordPress interessieren. Von Gelegenheitsnutzern, über Blogger und Designer bis hin zu Entwicklern und Core-Contributoren. Wobei sicherlich Entwickler unserer Einschätzung nach in der Mehrzahl anzutreffen sind.

WordCamps finden meist ein- bis zweitägig statt und bieten ein vielfältiges Programm mit Vorträgen, Workshops und Diskussionsrunden zu allen möglichen Themen rund um WordPress. Häufig gibt es zusätzlich einen sogenannten Contributor Day, an dem gemeinsam an der Weiterentwicklung von WordPress gearbeitet wird; beispielsweise durch Programmierung, Übersetzungen, Dokumentation oder Support.²

Das Besondere an WordCamps ist die offene, freundliche Atmosphäre: Jeder ist willkommen, unabhängig vom Erfahrungsstand. Die Veranstaltungen werden ehrenamtlich von Mitgliedern der lokalen WordPress-Community organisiert und sind nicht gewinnorientiert. Die Teilnahmegebühren sind daher meist sehr niedrig.³

Maik und René haben 2023 das Erste in Leipzig organisiert und in dem Zusammenhang ein Novum erstellt. Denn es wurde bewusst mit einigen Konventionen gebrochen, um Vorbild zu sein.⁴

WordCampLeipzig 2025

Die 2025er-Ausgabe fand am 17. Mai 2025 erneut im Ost-Passage Theater statt. Nach wie vor wurde es bewusst als „kleinstes WordCamp der Welt“ organisiert, um eine besonders persönliche und nachhaltige Atmosphäre zu schaffen. Die Teilnehmerzahl war auf 90 begrenzt, um den Austausch zwischen Besuchern, Vortragenden und dem Organisationsteam zu fördern.

Nachhaltig in Erinnerung geblieben ist uns der Vortrag von Christoph Daum, wie er das Backend beschleunigte.

• XHProf
• Filter posts_clauses
• Funktion dbDelta()
• Optimierung der Taxonomien, wie im Beispiel von 11bytes angegeben (Da der Link derzeit nicht funktioniert, haben wir diesen hier entfernt)

Konkrete Tipps werden wir noch testen und sicherlich in eigenen Artikeln verarbeiten.

Zudem möchten wir etwas aus dem Orga-Alltag berichten und sobald wir unsere Notizen durchgesehen haben, konkrete Aufgaben notieren.

Recaps 2025

• Alle Vorträge auf WordPress.tv
• Maja Benke findet den minimalistischen Ansatz sympathisch
• Christoph Daum mag die echten Begegnungen

Der Beitrag WordPress Community erschien zuerst auf deinWP.de.