So ändern Sie die angezeigten Bildgrößen in WordPress

Ausgewählte Bilder werden in WordPress auf verschiedene Weise verwendet, je nachdem, welches Thema Sie verwenden. Die meisten Themes verwenden vorgestellte Bilder als Miniaturvorschau eines der Bilder in einem Beitrag oder einer Seite, die normalerweise auf der Homepage und den Archivseiten angezeigt werden.

Diese Funktionalität wurde mit WordPress 2.9 eingeführt und war ursprünglich als „Post-Thumbnails“ bekannt. Die meisten WordPress-Themes (einschließlich unserer eigenen) verwenden jetzt vorgestellte Bilder für viele andere Zwecke, z. B. in Bildergalerien, Feature-Slidern und Seitenkopfbildern. In unserem Full-Frame-Thema wird das vorgestellte Bild beispielsweise zum Hintergrundbild des Beitrags.

Vorgestellte Bilder sind natürlich sehr wichtig für Kreative und alle, die eine WordPress-Seite erstellen, die viele Bilder enthält. Um die vorgestellten Bilder in einem beliebigen Thema der Millimeterpapierpresse zu verwenden, müssen Sie lediglich ein vorgestelltes Bild aus dem Link auf der rechten Seite des Bildschirms im Post-Editor auswählen.

Wenn die in Ihrem Design festgelegte Standardbildgröße für Ihre Zwecke funktioniert, großartig. Wenn nicht, ist es möglich, die Größe mit einer kleinen Codebearbeitung zu ändern.

Warum möchten Sie die angezeigte Bildgröße ändern? Neben dem Vergrößern oder Verkleinern von Thumbnail-Galerien möchten Sie vielleicht auch das Seitenverhältnis der Abmessungen ändern. Angenommen, Sie sind Landschaftsfotograf und Ihr Portfolio besteht aus weitläufigen Panoramen. Wenn in diesem Fall das Standardbild des Themas quadratisch ist, wird es am Ende den größten Teil Ihres Bildes beschneiden. Sie können dies beheben, indem Sie die Abmessungen manuell auf etwas passenderes anpassen.

Ändern der angezeigten Bildgröße in functions.php

Um die Standardgröße der vorgestellten Bilder zu ändern, müssen Sie einige Codes in der Datei functions.php ändern. Auf diese Datei kann entweder per FTP zugegriffen werden oder Sie bearbeiten sie direkt im WordPress-Dashboard unter Darstellung > Editor. Ich würde immer den ersteren Ansatz dem letzteren vorziehen.

Bevor Sie Änderungen an dieser Datei vornehmen, sollten Sie immer sicherstellen, dass Sie eine Sicherungskopie der Originalversion haben, falls etwas schief geht. Wenn Sie die ursprünglichen Themendateien noch nicht auf Ihrem Computer haben, stellen Sie sicher, dass Sie mindestens die Datei functions.php herunterladen und in einem Sicherungsordner speichern.

Es gibt zwei verschiedene Möglichkeiten, die Größe eines vorgestellten Bildes zu ändern. Verwenden Sie den folgenden Code, um die Größe proportional zu ändern (dh um ein Dehnen oder Komprimieren des Bildes zu vermeiden):

 set_post_thumbnail_size( 50, 50 ); // 50 Pixel breit und 50 Pixel hoch, Größenänderungsmodus

Sie können auch die Größe des Bildes ändern, indem Sie es mit diesem Code zuschneiden:

 set_post_thumbnail_size( 50, 50, true ); // 50 Pixel breit und 50 Pixel hoch, Crop-Modus

Dies legt die Standardgröße der vorgestellten Bilder fest.

Zusätzliche Bildgrößen hinzufügen

Es ist auch möglich, beliebig viele zusätzliche Bildgrößen hinzuzufügen, indem Sie für jede Bildgröße eine zusätzliche Codezeile hinzufügen:

 add_image_size( 'Kategorie-Daumen', 300, 9999 ); // 300 Pixel breit (und unbegrenzte Höhe)

Sie können diese neue Größe dann in Ihrer Designvorlage mit dem folgenden Code verwenden:

 <?php the_post_thumbnail( 'Kategorie-Daumen' ); ?>

Diese Funktion ist praktisch, wenn Sie vorgestellte Bilder auf verschiedene Arten anzeigen möchten. Beispielsweise möchten Sie vielleicht eine Thumbnail-Größe für Ihre Bildergalerien und eine größere Größe für Ihren Post-Header festlegen.

Denken Sie daran, dass die von Ihnen hochgeladenen Bilder mindestens so groß sein müssen wie die Abmessungen, die Sie für Ihre vorgestellten Bilder festgelegt haben. Wenn Sie kleinere Bilder hochladen, werden sie vergrößert und sehen am Ende verpixelt und verschwommen aus.

Erstellen Sie Ihre vorgestellten Bilder neu

Das Ändern der angezeigten Bildgröße wirkt sich erst ab dem Zeitpunkt der Änderung des Codes auf Uploads aus. Alle vorherigen Uploads wurden mit den ursprünglichen Abmessungen gespeichert, sodass Sie sie neu generieren müssen.

Wenn Sie nur wenige Bilder in der Größe ändern müssen, können Sie sie erneut manuell hochladen. Wenn Sie mehr als eine Handvoll haben, verwenden Sie am besten ein Plugin wie Regenerate Thumbnails, um die ganze harte Arbeit für Sie zu erledigen. Auf dieses Plug-in kann über das Menü „Extras“ zugegriffen werden, und es passt die Größe eines oder mehrerer der von Ihnen ausgewählten Bilder in Ihrer Mediengalerie an.

Machen Sie Ihre Bearbeitungen mit einem Child-Theme zukunftssicher

Das Problem beim direkten Bearbeiten Ihrer functions.php -Datei besteht darin, dass diese verloren gehen, wenn eine neue Version des Designs veröffentlicht wird und Sie es aktualisieren müssen. Sie können sich den hinzugefügten Code notieren und ihn in die neue Datei functions.php einfügen, aber das kann mühsam werden, besonders wenn Sie viele Änderungen vornehmen oder wenn häufig neue Versionen des Themas herauskommen.

Die Verwendung eines Child-Themes löst dieses Problem, da bei einer Aktualisierung des Parent-Themes das Child-Theme intakt bleibt. Wenn Sie Änderungen am Code eines Designs vornehmen, entweder in der Datei functions.php oder in den Stylesheets oder anderen Dateien, empfiehlt es sich immer, ein untergeordnetes Design zu verwenden.

Wir haben bereits eine vollständige Anleitung zum Erstellen eines untergeordneten Themas im Blog, aber hier ist, was Sie für unsere Zwecke wissen müssen.

Um ein Child-Theme zu erstellen, verbinde dich per FTP mit deiner Seite und erstelle einen neuen Ordner in /wp-content/themes/ für dein neues Child-Theme. Es ist üblich, den Ordner nach dem Thema zu benennen, das Sie bearbeiten möchten, mit dem Zusatz „-child“. Beispiel: „awesome-child“, wenn Sie ein Child-Theme des Awesome-Themes erstellen.

Sie müssen ein Stylesheet in Ihrem Child-Theme-Ordner erstellen, auch wenn Sie nicht beabsichtigen, das CSS zu bearbeiten. Erstellen Sie eine neue Datei namens style.css und fügen Sie den folgenden Code ein:

 /*
Themenname: Ehrfürchtiges Kind
Design-URI: http://example.com/awesome-child/
Beschreibung: Awesome Child Theme
Autor: Millimeterpapierpresse
Autoren-URI: http://example.com
Vorlage: Super
Version: 1.0.0
Tags: hell, dunkel, responsives Layout, barrierefrei
Textdomäne: awesome-child
*/

@Import-URL(../awesome/style.css");

/* =Themenanpassung beginnt hier
-------------------------------------------------- ------------ */

Ändern Sie den Themennamen und andere Details nach Bedarf.

Um die Funktion zum Ändern des vorgestellten Bildes in Ihr Child-Theme hinzuzufügen, müssen Sie eine neue functions.php -Datei erstellen, also fahren Sie fort und tun Sie dies im Child-Theme-Verzeichnis. Diese Datei wird zusätzlich zur functions.php des übergeordneten Themes geladen.

Das Template für functions.php sieht so aus:

 <?php //Öffnendes PHP-Tag

// Funktionen

?> // PHP-Tag schließen

Sie können dann Ihren Bildgrößenanpassungscode zwischen den PHP-Tags hinzufügen, sodass Sie am Ende so etwas erhalten:

 <?php // PHP-Tag öffnen

if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 150, 150, true ); // Standardabmessungen des Post-Thumbnails (beschnitten)

// zusätzliche Bildgrößen
// Löschen Sie die nächste Zeile, wenn Sie keine zusätzlichen Bildgrößen benötigen
add_image_size( 'Kategorie-Daumen', 300, 9999 ); //300 Pixel breit (und unbegrenzte Höhe)
}

?> // PHP-Tag schließen

Wenn Sie mit der Erstellung des Codes Ihres untergeordneten Designs fertig sind, müssen Sie es aktivieren. Sie können dies über das Site-Dashboard unter Administration Panels > Appearance > Themes tun. Suchen Sie Ihr untergeordnetes Thema in der Liste und klicken Sie auf Aktivieren.

Bewundern Sie Ihre neu verkleinerten Beitragsbilder

Das Ändern der Größe von vorgestellten Bildern und das Hinzufügen neuer Bildgrößen ist eine ziemlich einfache Aufgabe, erfordert jedoch einige Codebearbeitungen. Aus diesem Grund ziehen es einige Benutzer vor, ein Plugin zu verwenden, um die Bildgröße zu ändern, aber das Hinzufügen zusätzlicher Plugins ist immer ein Sicherheitsrisiko. Unter die Haube zu kommen und einige einfache Änderungen am Code vorzunehmen, kann wirklich dazu beitragen, Ihr Vertrauen in die Verwendung von WordPress aufzubauen, und wird es Ihnen erleichtern, Themen anzupassen und sie wirklich zu Ihren eigenen zu machen.