ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
  • Bloggen
  • WordPress
  • E-Mail Marketing
  • SEO
  • Soziale Netzwerke
  • Mehr
    • Tutorials
    • Shopify
    • Bewertungen
    • Tipps
    • Sicherheit
    • Software und Dienste
    • Verkehrserzeugung
    • Anfängerleitfaden
    • Showcase
Search
  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt
© 2022 Themelocal. Alle Rechte vorbehalten.
Lektüre: So erstellen Sie zusätzliche Bildgrößen in WordPress
Aktie
Benachrichtigung Zeig mehr
Aa
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
Aa
  • Bloggen
  • WordPress
  • E-Mail Marketing
  • SEO
  • Soziale Netzwerke
  • Mehr
Search
  • Bloggen
  • WordPress
  • E-Mail Marketing
  • SEO
  • Soziale Netzwerke
  • Mehr
    • Tutorials
    • Shopify
    • Bewertungen
    • Tipps
    • Sicherheit
    • Software und Dienste
    • Verkehrserzeugung
    • Anfängerleitfaden
    • Showcase
Folge uns
  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt
© 2022 Themelocal. Alle Rechte vorbehalten.
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren > Blog > Tutorials > So erstellen Sie zusätzliche Bildgrößen in WordPress
Tutorials

So erstellen Sie zusätzliche Bildgrößen in WordPress

Zuletzt aktualisiert: November 19, 2021 12:26 am
ThemeLocal vor 2 Jahren 7 Minuten Mindestlesezeit
Aktie
7 Minuten Mindestlesezeit
Aktie

Möchten Sie zusätzliche Bildgrößen in WordPress erstellen?

Contents
Warum zusätzliche Bildgrößen in WordPress erstellen?Registrieren zusätzlicher Bildgrößen für Ihr ThemaAnzeige zusätzlicher Bildgrößen in Ihrem WordPress-ThemeRegenerieren zusätzlicher BildgrößenAktivieren zusätzlicher Bildgrößen für Ihren Beitragsinhalt

Standardmäßig erstellt WordPress automatisch mehrere Kopien von Bild-Uploads in verschiedenen Größen. Darüber hinaus können WordPress-Themes und -Plugins auch ihre eigenen Bildgrößen erstellen.

In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach zusätzliche Bildgrößen in WordPress erstellen und auf Ihrer Website verwenden.

Warum zusätzliche Bildgrößen in WordPress erstellen?

Normalerweise verarbeiten alle gängigen WordPress-Themes und -Plugins Bildgrößen sehr gut. Zum Beispiel kann Ihr WordPress-Theme zusätzliche Größen erstellen, die als Miniaturansichten auf Archivseiten verwendet werden können.

Manchmal entsprechen diese Bildgrößen jedoch nicht Ihren eigenen Anforderungen. Möglicherweise möchten Sie eine andere Bildgröße in einem Child-Theme oder einem Post-Grid-Layout verwenden.

Sie können dies tun, indem Sie in WordPress zusätzliche Bildgrößen erstellen und diese Größen dann aufrufen, wenn Sie sie benötigen.

Lassen Sie uns jedoch einen Blick darauf werfen, wie Sie in WordPress zusätzliche Bildgrößen erstellen.

Registrieren zusätzlicher Bildgrößen für Ihr Thema

Die meisten WordPress-Themes, einschließlich aller Top-WordPress-Themes, unterstützen standardmäßig die Funktion Miniaturansichten (vorgestelltes Bild).

Wenn Sie jedoch ein benutzerdefiniertes WordPress-Theme erstellen, müssen Sie die Unterstützung für Beitrags-Miniaturansichten hinzufügen, indem Sie der Datei functions.php Ihres Themes den folgenden Code hinzufügen.

add_theme_support( 'post-thumbnails' );

Sobald Sie die Unterstützung für Post-Thumbnails aktiviert haben, können Sie jetzt die Funktionalität zum Registrieren zusätzlicher Bildgrößen mithilfe der Funktion add_image_size() verwenden.

Die Funktion add_image_size wird im folgenden Format verwendet:

add_image_size( 'name-of-size', width, height, crop mode );

Beispielcode kann wie folgt aussehen:

add_image_size( 'sidebar-thumb', 120, 120, true ); // Hard Crop Mode
add_image_size( 'homepage-thumb', 220, 180 ); // Soft Crop Mode
add_image_size( 'singlepost-thumb', 590, 9999 ); // Unlimited Height Mode

Wenn Sie jetzt bemerken, haben wir drei verschiedene Arten von Bildgrößen angegeben. Jeder hat verschiedene Modi wie hartes Zuschneiden, weiches Zuschneiden und unbegrenzte Höhe.

Lassen Sie uns jedes Beispiel behandeln und wie Sie es in Ihren eigenen Projekten verwenden können.

1. Hard-Crop-Modus

Wie Sie vielleicht bemerken, wird nach der Höhe ein „echter“ Wert hinzugefügt. Dies weist WordPress an, das Bild genau auf die von uns definierte Größe zuzuschneiden (in diesem Fall 120 x 120 Pixel).

Diese Methode wird verwendet, um sicherzustellen, dass alles genau verhältnismäßig ist. Diese Funktion schneidet das Bild je nach Größe automatisch entweder von den Seiten oder von oben und unten zu.

Beispiel für hartes Zuschneiden von Bildern

2. Soft-Crop-Modus

Standardmäßig ist der Soft-Cropping-Modus aktiviert, weshalb Sie nach der Höhe keinen zusätzlichen Wert sehen. Diese Methode ändert die Größe des Bildes proportional, ohne es zu verzerren. Sie erhalten also möglicherweise nicht die gewünschten Abmessungen. Normalerweise entspricht es der Breitenabmessung und die Höhen sind je nach Proportion jedes Bildes unterschiedlich. Eine Beispielanzeige würde so aussehen:

Beispiel für weiche Ernte

Unbegrenzter Höhenmodus

Es gibt Zeiten, in denen Sie super lange Bilder haben, die Sie in Ihrem Design verwenden möchten, aber Sie möchten sicherstellen, dass die Breite begrenzt ist. Infografiken sind beispielsweise in der Regel sehr lang und in der Regel breiter als die Inhaltsbreite.

In diesem Modus können Sie eine Breite angeben, die Ihr Design nicht unterbricht, während die Höhe unbegrenzt bleibt.

Unbegrenzter Höhenmodus

Anzeige zusätzlicher Bildgrößen in Ihrem WordPress-Theme

Nachdem Sie nun die Funktionalität für die gewünschten Bildgrößen hinzugefügt haben, können Sie sich die Anzeige in Ihrem WordPress-Theme ansehen. Öffnen Sie die Designdatei, in der Sie das Bild anzeigen möchten, und fügen Sie den folgenden Code ein:

<?php the_post_thumbnail( 'your-specified-image-size' ); ?>

Hinweis: Dieses Code-Bit muss in die Post-Schleife eingefügt werden.

Das ist alles, was Sie wirklich tun müssen, um die zusätzlichen Bildgrößen in Ihrem WordPress-Theme anzuzeigen. Sie sollten es wahrscheinlich mit dem Styling umwickeln, das Ihren Bedürfnissen entspricht.

Regenerieren zusätzlicher Bildgrößen

Wenn Sie dies nicht auf einer brandneuen Site tun, müssen Sie wahrscheinlich Thumbnails neu generieren.

Die Funktion add_image_size() generiert nur die Größen ab dem Zeitpunkt, an dem sie zum Thema hinzugefügt wurde. Das bedeutet, dass Post-Bilder, die vor der Aufnahme dieser Funktion hinzugefügt wurden, keine neuen Größen mehr haben.

Um dies zu beheben, müssen Sie die neue Bildgröße für ältere Bilder neu generieren. Dies wird durch das Plugin namens . leicht gemacht Miniaturansichten regenerieren. Sobald Sie das Plugin installiert und aktiviert haben, wird eine neue Option unter dem Menü hinzugefügt: Tools » Miniaturansichten regenerieren

Miniaturansichten neu generieren

Sie sehen die Option, Miniaturansichten für alle Bilder oder nur die vorgestellten Bilder neu zu generieren. Wir empfehlen, alle Bilder neu zu generieren, um unerwartetes Verhalten oder beschädigte Bilder zu vermeiden.

Weitere Informationen finden Sie in unserem Artikel zum einfachen Regenerieren neuer Bildgrößen in WordPress.

Aktivieren zusätzlicher Bildgrößen für Ihren Beitragsinhalt

Obwohl Sie in Ihrem Theme Bildgrößen aktiviert haben, ist die Verwendung nur auf Ihr Theme beschränkt, was keinen Sinn macht.

Alle Bildgrößen werden unabhängig davon generiert. Warum also nicht sie dem Autor des Beitrags zur Verwendung innerhalb des Beitragsinhalts zur Verfügung stellen.

Sie können dies tun, indem Sie der Funktionsdatei Ihres Themes den folgenden Code hinzufügen.

function wpb_custom_image_sizes( $size_names ) {
    $new_sizes = array(
        'homepage-thumb' => 'Homepage Thumbmail', 
        'singlepost-thumb' => 'Infographic Single Post'
    );
    return array_merge( $size_names, $new_sizes );
}
add_filter( 'image_size_names_choose', 'wpb_custom_image_sizes' );

Vergessen Sie nicht, Ihre Änderungen zu speichern, nachdem Sie den Code hinzugefügt haben.

Sie können jetzt ein Bild in einen WordPress-Beitrag oder eine WordPress-Seite hochladen. In den Bildblockeinstellungen sehen Sie Ihre benutzerdefinierten Bildgrößen unter der Option „Bildgröße“.

Wählen Sie Ihre benutzerdefinierte Bildgröße im Post-Editor

Sie und andere Autoren, die an Ihrer Website arbeiten, können diese Größenoptionen jetzt beim Hinzufügen von Bildern zu Beiträgen und Seiten auswählen.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie zusätzliche Bildgrößen in WordPress erstellen. Vielleicht möchten Sie auch unseren Artikel über die besten Bildkomprimierungs-Plugins für WordPress und unseren WordPress-Leistungsleitfaden lesen, um die Geschwindigkeit Ihrer Website zu verbessern.

Verwandter Beitrag

TicWatch Pro 5 vs. Pixel Watch: Die vier wichtigsten Dinge, die Sie wissen sollten

So deaktivieren Sie das Passwort auf dem MacBook (2023)

So verkleinern Sie auf einem Mac: Fenster und gesamter Bildschirm (2023)

So aktivieren Sie den Inkognito-Modus in Google Chrome

Mein iPhone kann keine Anrufe tätigen, aber SMS senden! Hier finden Sie die Lösung (2023)

MARKIERTE: Bildgrößen, erstellen, Sie, WordPress, zusätzliche
ThemeLocal November 19, 2021 November 19, 2021
Teile diesen Artikel
Facebook Twitter Pinterest Whatsapp Whatsapp
Aktie
Was denkst du?
Liebe0
Traurig0
Glücklich0
Schläfrig0
Wütend0
kein Kommentar0
Zwinkern0
Vorheriger Artikel So erstellen Sie Großhandelskunden mit Shopify
Nächster Artikel So erstellen Sie ein benutzerdefiniertes WordPress-Suchformular (Schritt für Schritt)
Hinterlasse einen Kommentar

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Berühmter Post

Wie können Sie sehen, wer Ihr LinkedIn-Profil angesehen hat?
Wie man
Nvidia RTX 4060 Ti vs. RTX 3060 Ti: Lohnt sich die 4000er-Serie?
Gegen
Logitech C505 HD Testbericht
Technische Bewertungen
Schnellladung: Der angebliche Temperatursensor des Pixel 8 Pro zeigt, dass wir die Smartphone-Spitzenleistung erreicht haben
Technische Bewertungen
Beats Studio Buds+ vs. Studio Buds: Was ist der Unterschied?
Gegen
Diese 2 TB PS5-SSD ist derzeit unglaublich günstig
Angebote

También podría gustarte

Gegen

TicWatch Pro 5 vs. Pixel Watch: Die vier wichtigsten Dinge, die Sie wissen sollten

vor 5 Stunden 4 Minuten Mindestlesezeit
Wie man

So deaktivieren Sie das Passwort auf dem MacBook (2023)

vor 6 Stunden 4 Minuten Mindestlesezeit
Wie man

So verkleinern Sie auf einem Mac: Fenster und gesamter Bildschirm (2023)

vor 21 Stunden 7 Minuten Mindestlesezeit
Wie man

So aktivieren Sie den Inkognito-Modus in Google Chrome

vor 1 Tag 3 Minuten Mindestlesezeit
Wie man

Mein iPhone kann keine Anrufe tätigen, aber SMS senden! Hier finden Sie die Lösung (2023)

vor 1 Tag 7 Minuten Mindestlesezeit
Wie man

So überprüfen Sie die technischen Daten Ihres PCs

vor 2 Tagen 3 Minuten Mindestlesezeit
Wie man

So bearbeiten Sie gesendete Nachrichten in WhatsApp

vor 2 Tagen 3 Minuten Mindestlesezeit
Bloggen

So nutzen Sie KI, um ein produktiverer Blogger zu werden

vor 3 Tagen 8 Minuten Mindestlesezeit
Zeig mehr
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
Folge uns

© 2022 Themelocal. Alle Rechte vorbehalten.

  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt
Welcome Back!

Sign in to your account

Passwort vergessen?