Wenn Sie ein neues Theme auf WordPress installieren, passt der Slider fast nie zu Ihren Inhaltsdimensionen. Sie haben Screenshots im Format 16:9, Produktcover, quadratische Bilder, und das Theme beschneidet sie auf seine eigenen Proportionen. Die Hälfte des Bildausschnitts geht verloren, und die Hauptpräsentation Ihrer Website sieht aus, als wäre sie mit geschlossenen Augen zusammengestellt worden.

Dabei handelt es sich nicht um einen Theme-Fehler. Es sind fest codierte Einstellungen, die an drei Stellen sitzen: Registrierung der Thumbnail-Größe in functions.php, der CSS-Container des Sliders und die Ausgabe-Templates. Die vierte Ebene ist das Neuerstellen bereits hochgeladener Bilder in der neuen Größe. Korrigieren Sie alle vier, und der Slider sitzt perfekt.

Nachfolgend eine schrittweise Aufschlüsselung am Beispiel des Classy-Themes von WPExplorer. Die Logik ist jedoch universell: Jedes klassische Theme mit einem Nivo-Slider oder einem benutzerdefinierten Slider, der add_image_size verwendet, bearbeitet dieselben Dateien.

💡 Kurzüberblick:

• Ändern Sie add_image_size in der functions.php, das steuert das Zuschneiden beim Hochladen
• Bearbeiten Sie width und height des Containers in der style.css, damit das Layout nicht zusammenbricht
• Aktualisieren Sie die Attribute width und height in den Templates nivo.php und content.php, damit der Browser das img nicht verzerrt
• Führen Sie „Regenerate Thumbnails" über Ihre Medienbibliothek aus, alte Bilder werden in der neuen Größe neu erstellt

Der gesamte Prozess wird in diesem Video gezeigt:

Schritt 1. Thumbnail-Größe in der functions.php ändern

Wenn WordPress ein Bild hochlädt, verarbeitet es dieses in allen registrierten Größen. Die Registrierung erfolgt über die Funktion add_image_size. Das Theme deklariert einen 980×400-Slider, Sie benötigen jedoch 1200×500, also müssen Sie hier bearbeiten.

Öffnen Sie die functions.php des Themes. Pfad: Design → Theme-Datei-Editor im Admin-Bereich oder per FTP unter /wp-content/themes/theme-name/. In Classy befindet sich die add_image_size-Zeile für den Slider etwa in Zeile 122:

1
add_image_size( 'nivo-slider', 980, 400, true );

Der erste Parameter ist die Breite, der zweite die Höhe, der dritte (true) steht für hartes Zuschneiden. Wenn Sie false setzen, passt WordPress das Bild entlang der kleineren Seite an, ohne zu beschneiden. Klingt verlockend, aber der Slider kann dann in der Höhe von Bild zu Bild „schwimmen".

Setzen Sie Ihre Werte ein und speichern Sie:

1
add_image_size( 'nivo-slider', 1200, 500, true );

Ab diesem Zeitpunkt werden alle neuen Uploads auf Ihre Größe zugeschnitten. Die alten noch nicht, dazu kommen wir in Schritt 4.

Schritt 2. CSS-Container korrigieren

Sie haben die Thumbnail-Größe geändert. Aber der Slider-Container im Layout lebt noch mit den alten Werten aus dem CSS. Das Bild wird korrekt geladen, aber der Block beschneidet es entweder oder lässt leeren Raum an den Rändern.

In Classy wird der Nivo-Slider-Container in der style.css, Zeilen 1132-1140, beschrieben:

1
#slider_nivo {
2
    position: relative;
3
    width: 980px;
4
    margin-top: -30px;
5
    margin-left: -25px;
6
    margin-right: -25px;
7
    margin-bottom: 30px;
8
    height: 400px;
9
    overflow: hidden;
10
}

Ändern Sie width und height auf Ihre Werte:

1
#slider_nivo {
2
    position: relative;
3
    width: 1200px;
4
    margin-top: -30px;
5
    margin-left: -25px;
6
    margin-right: -25px;
7
    margin-bottom: 30px;
8
    height: 500px;
9
    overflow: hidden;
10
}

Wichtige Nuance: Dies bearbeitet speziell den Nivo-Slider. Der Content Slider in Classy passt die Höhe automatisch basierend auf dem Inhalt an, den müssen Sie nicht anfassen. In anderen Themes ist die Logik dieselbe: Finden Sie den Selektor für den spezifischen Slider, den Sie ändern, und verändern Sie nicht die benachbarten.

Schritt 3. Attribute in Templates aktualisieren

add_image_size liefert die URL des korrekten Thumbnails. Aber das HTML-Markup des Sliders enthält fest codierte width="980" height="400". Bleiben die alten Werte stehen, wird der Browser das Bild strecken oder stauchen, um sie zu erfüllen. Ergebnis: unscharfes oder verzerrtes Bild, obwohl die Quelle korrekt ist.

In Classy müssen zwei Dateien bearbeitet werden.

Nivo Image Slider, Datei includes/sliders/nivo.php, Zeilen 32-36:

1
<a href="<?php echo $slidelink ?>" title="<?php the_title(); ?>">
2
  <img src="<?php echo $featured_image[0]; ?>" 
3
       alt="<?php the_title(); ?>" 
4
       width="1200" height="500" />
5
</a>

Content Slider für Bild-Slides, Datei includes/sliders/content.php, Zeilen 29-36:

1
<a href="<?php echo $slidelink ?>" title="<?php the_title(); ?>">
2
  <img src="<?php echo $featured_image[0]; ?>" 
3
       alt="<?php the_title(); ?>" 
4
       width="1200" height="500" />
5
</a>

Bearbeiten Sie beide, speichern Sie. Wenn das Theme background-image im CSS anstelle von <img> verwendet, fassen Sie die Templates nicht an, Schritt 2 genügt.

Schritt 4. Alte Bilder neu generieren

In Schritt 1 haben wir add_image_size geändert. Neue Uploads werden korrekt zugeschnitten. Aber alle Bilder in der Medienbibliothek, die vor der Bearbeitung hochgeladen wurden, sind in der alten Größe gespeichert. Der Slider greift darauf zu und erhält die falschen Proportionen.

Lösung: das Plugin Regenerate Thumbnails. Es geht die gesamte Medienbibliothek durch und erstellt Thumbnails in den aktuell registrierten Größen neu. Standardinstallation: Plugins → Installieren → Suche nach „Regenerate Thumbnails" → Installieren → Aktivieren.

Nach der Aktivierung: Werkzeuge → Regenerate Thumbnails → „Regenerate All Thumbnails". Bei einer großen Bibliothek dauert der Vorgang einige Minuten, das Plugin stößt die Neugenerierung aller deklarierten Größen für jedes Bild an.

Das Plugin kann auch ungenutzte Thumbnail-Größen löschen und so Serverplatz freigeben. Nach einmaliger Ausführung benötigen Sie es nicht mehr: Alle zukünftigen Uploads durchlaufen den neuen add_image_size-Wert.

Wenn Sie Konsolenzugriff auf den Server haben, ist WP-CLI schneller:

1
wp media regenerate --yes

Kein HTTP-Request-Overhead, und es läuft nicht in Timeouts bei großen Bibliotheken.

Was tun, wenn der Slider immer noch nicht funktioniert

Manchmal haben Sie alle vier Schritte abgeschlossen, aber der Slider verhält sich merkwürdig. Gehen Sie diese Checkliste durch:

• CSS-Spezifität: Ihre neuen width/height-Angaben werden von einem spezifischeren Selektor im Theme überschrieben. Öffnen Sie den Browser-Inspektor und prüfen Sie, welche Regel tatsächlich auf das Element angewendet wird.
• Cache: Browser-Cache leeren (Strg+F5). Wenn Sie ein Server-Caching-Plugin wie WP Rocket oder LiteSpeed Cache verwenden, leeren Sie auch diesen.
• Child-Theme: Wenn Sie das Parent-Theme direkt bearbeiten, werden Änderungen beim nächsten Update überschrieben. Erstellen Sie ein Child-Theme und verschieben Sie Ihre Bearbeitungen dorthin.
• Responsive: Ist die Container-Breite größer als die Seitenbreite? Auf Mobilgeräten läuft der Slider über den Rand. Fügen Sie max-width: 100% und height: auto in einer Media Query für mobile Geräte hinzu.

Theme-Update hat alles zerstört: So schützen Sie sich

Der Hauptschmerz beim Bearbeiten des Parent-Themes: Updates überschreiben Dateien, und Ihre Änderungen verschwinden. Der Slider kehrt stillschweigend zu den Werkseinstellungen zurück.

Der korrekte Ansatz ist ein Child-Theme. Verlagern Sie drei Dinge dorthin:

• Überschreiben Sie add_image_size in der functions.php des Child-Themes über den after_setup_theme-Hook;
• Überschreiben Sie CSS, die style.css des Child-Themes wird nach dem Parent geladen, Ihre Regeln gewinnen durch die Kaskade;
• Slider-Templates, kopieren Sie nivo.php und content.php mit derselben Ordnerstruktur (includes/sliders/) in das Child-Theme. WordPress greift automatisch auf die Version aus dem Child zu.

Danach stellen Parent-Theme-Updates keine Bedrohung mehr für Ihre Größen dar.

⁉️🤔 Häufig gestellte Fragen

Muss ich alle drei Dateien bearbeiten: functions.php, style.css und Templates?

Ja, sonst bleibt das Ergebnis unvollständig. Nur add_image_size ohne CSS geändert, und der Container beschneidet das neue Bild. Ohne Templates verzerrt der Browser das Bild auf die alten width/height-Werte, und es wird unscharf. Drei Bearbeitungen ergeben eine konsistente Dimensionierung über alle Ebenen: Thumbnail-Registrierung → Container → HTML-Attribute.

Muss ich die content.php anfassen, wenn ich nur den Nivo-Slider verwende?

Nein. content.php ist für den Content Slider, den, der Text und Bilder aus Beiträgen zieht. Wenn der Content Slider auf der Website nicht genutzt wird, können Sie die Datei überspringen. Aber im Zweifelsfall dauert die Bearbeitung eine Minute, besser, Sie machen beides.

Löscht das Plugin Regenerate Thumbnails meine Originale?

Nein. Das originale, vollauflösende Bild bleibt unberührt. Das Plugin erstellt nur Thumbnails neu: die Größen, die über add_image_size und Einstellungen → Medien registriert sind. Die Option zum Löschen ungenutzter Größen berührt das Original ebenfalls nicht, sie bereinigt „verwaiste" Thumbnails, die nicht im Theme oder in Plugins deklariert sind.

Was, wenn add_image_size nicht im Theme ist und der Slider anders funktioniert?

Einige moderne Themes verwenden add_image_size nicht für den Slider. Stattdessen laden sie das Originalbild und steuern die Größe über CSS: object-fit: cover oder background-size: cover. In diesem Fall genügt Schritt 2, bearbeiten Sie nur den CSS-Container. Prüfen Sie im Browser-Inspektor, welche URL tatsächlich im Slider geladen wird: Wenn es image.jpg ohne einen Suffix wie -980x400 ist, benötigen Sie die Schritte 1 und 4 nicht.

Brauche ich ein Backup, bevor ich die functions.php bearbeite?

Unbedingt. Ein Tippfehler in der functions.php, und die Website stürzt mit einem White Screen of Death ab. Laden Sie die Datei vor der Bearbeitung per FTP herunter oder kopieren Sie den Inhalt in einen Texteditor. Wenn die Website abstürzt, laden Sie die originale functions.php wieder hoch, die Website ist sofort wieder da.

Benutzerdefinierter Slider: abschließende Aufschlüsselung

Der Algorithmus ist universell für jedes klassische WordPress-Theme: Größenregistrierung → CSS-Container → HTML-Templates → alte Bilder neu generieren. Vier Schritte, und der Slider arbeitet in Ihren Proportionen, ohne Beschnitt oder Unschärfe.

Die Hauptsache ist, das Parent-Theme nicht direkt zu bearbeiten. Verlagern Sie Änderungen in ein Child-Theme, sobald Sie bestätigt haben, dass die Größen passen. Dann setzt kein Update den Slider auf die Werkseinstellungen zurück.