Verwenden von benutzerdefinierten Bildgrößen in Ihrem Design und Ändern der Größe vorhandener Bilder

In diesem Tutorial erfahren Sie, wie Sie Bilder in benutzerdefinierten Größen erstellen, die Sie in Ihrem WordPress-Design verwenden können. Warum benutzerdefinierte Bildgrößen verwenden? Sie müssen also nicht jedes Bild bearbeiten, das Sie in die Medienbibliothek hochladen. Auf diese Weise werden für jedes hochgeladene Bild alle benutzerdefinierten Bildgrößen automatisch generiert. Sie kann mit der Mediengalerie oder aus der Schleife in den Beitrag oder die Seite eingefügt werden. Lesen Sie weiter, um herauszufinden, wie.


Schritt 1 Definieren von benutzerdefinierten Bildgrößen

Damit Ihr Design benutzerdefinierte Bildgrößen unterstützt, müssen Sie die Datei functions.php in Ihrem Designordner bearbeiten. Öffne die functions.php deines Themes und überprüfe, ob du eine Zeile hast, die so aussieht:

add_action ('after_setup_theme', 'Funktionsname');

Dieser Hook wird während der Initialisierung eines Themes aufgerufen. Es wird im Allgemeinen verwendet, um grundlegende Setup-, Registrierungs- und Initialisierungsaktionen für ein Design auszuführen, wobei "Funktionsname" der Name der aufzurufenden Funktion ist.

Wenn Sie eine solche Zeile gefunden haben, finden Sie auch die Methode mit demselben Namen wie der 2. Parameter dieser add_action-Methode.

Wenn Sie keine Zeile finden, die so aussieht, sollten Sie sie hinzufügen und außerdem einen Methodennamen als zweiten Parameter erstellen:

add_action ('after_setup_theme', 'setup'); Funktionssetup () //…

Um jetzt Miniaturansichten für Ihr Design zu aktivieren, fügen Sie der oben definierten Methode die folgenden Zeilen hinzu:

function setup () //… add_theme_support ('post-thumbnails'); // Diese Funktion ermöglicht die Unterstützung von Post-Thumbnails für ein Design. // So aktivieren Sie nur Beiträge: // add_theme_support ('post-thumbnails', array ('post')); // Nur für Beiträge und benutzerdefinierte Beitragstypen aktivieren: // add_theme_support ('post-thumbnails', array ('post', 'movie')); // Eine neue Bildgröße registrieren. // Dies bedeutet, dass WordPress eine Kopie des Beitragsbilds mit den angegebenen Abmessungen erstellt, // wenn Sie ein neues Bild hochladen. Registrieren Sie so viele wie nötig. // Hinzufügen von benutzerdefinierten Bildgrößen (Name, Breite, Höhe, Ausschnitt) add_image_size ('featured-image', 620, 200, true); //…

Schritt 2 Anzeigen von Bildern mit benutzerdefinierten Größen

Einfügen eines benutzerdefinierten Bilds in den Post mithilfe der Mediengalerie

Um ein Bild in einen Beitrag oder eine Seite aus der Mediengalerie einzufügen, fügen Sie den folgenden Filter in die Datei functions.php ein:

add_filter ('image_size_names_choose', 'custom_image_sizes_choose'); Funktion custom_image_sizes_choose ($ size) $ custom_sizes = array ('featured-image' => 'Featured Image'); return array_merge ($ size, $ custom_sizes); 

In diesem Code werden Ihre benutzerdefinierten Bildgrößen mit der in WordPress definierten zusammengeführt, sodass das folgende Bild angezeigt wird.

Fügen Sie ein benutzerdefiniertes Bild in die Schleife ein

Um beispielsweise das Bild mit dem Namen "Featured-Image" anzuzeigen, müssen Sie in der Schleife folgende Zeilen hinzufügen:

 'Featured-Image')); endif; ?>

Dies prüft, ob der Beitrag / Seite ein Bild angehängt hat, und gibt ein aus Tag mit dem Bild in der gewünschten Größe.


Schritt 3 Ändern der Größe vorhandener Bilder

Für diese Aufgabe gibt es ein Plugin, das helfen kann, Thumbnails neu erstellen. Es kann alle, einen Stapel oder einzelne Bilder neu generieren. Wenn Sie die Bildgröße ändern und neu generieren, werden Bilder mit den vorherigen Abmessungen nicht gelöscht.


Beispiel

Angenommen, Sie möchten diese Funktion in Ihrem Thema verwenden. Von dem / wp-content / themes / Name des Themes Ordner öffnen Functions.php mit Ihrem bevorzugten Texteditor. Wenn dein Thema keine hat after_setup_theme Aktion definiert, müssen Sie eine hinzufügen. Der Code für die benutzerdefinierten Bildgrößen wird der definierten Methode hinzugefügt.

Hinweis: Dies sind reservierte Bildgrößennamen: Daumen, Miniaturbild, mittelgroß, groß, Postminiaturbild. Durch das Hinzufügen einer benutzerdefinierten Bildgröße mit einem reservierten Namen werden die vordefinierten Werte überschrieben.

add_action ('after_setup_theme', 'setup'); function setup () //… add_theme_support ('post-thumbnails'); // Diese Funktion ermöglicht die Unterstützung von Postminiaturen für ein Design. Add_image_size ('header', 600, 200, true); // Header-Bild add_image_size ('custom-size1', 400, 200); // 400 Pixel breit und 200 Pixel hoch, proportional proportional skaliert add_image_size ('custom-size2', 400, 200, true); // 400 Pixel breit und 200 Pixel hoch, beschnitten //…

Bearbeiten der content.php oder content-single.php oder content-page.php Dateien können Sie das Bild mit der entsprechenden Größe für den Post-Header anzeigen, indem Sie es unter oder unter den Post-Titel setzen.

Fügen Sie den folgenden Filter hinzu, um die anderen zwei benutzerdefinierten Größen aus der Mediengalerie auszuwählen:

add_filter ('image_size_names_choose', 'custom_image_sizes_choose'); Funktion custom_image_sizes_choose ($ size) $ custom_sizes = array ('custom-size1' => 'Meine benutzerdefinierte Größe 1', 'custom-size2' => 'Meine benutzerdefinierte Größe 2'); return array_merge ($ size, $ custom_sizes); 

Ein reales Beispiel, wie das funktioniert und wie es verwendet werden kann: gurde.com


Verweise

  • add_action ()
  • after_setup_theme
  • add_theme_support ()
  • add_image_size ()
  • the_post_thumbnail ()

Nächster

So erstellen Sie eine Galerie mit benutzerdefinierten Bildgrößen und fügen Sie JavaScript hinzu, um die Bilder zu zoomen und zwischen ihnen zu wechseln (Maus und Tastatur).