Layout SVG

WP: Custom Category Image Upload ohne Plugin

Zuletzt bearbeitet am: 13.10.2021

In diesem Beitrag geht es darum, wie man einen eigenen WordPress Category Image Upload, ohne Plugin erstellt. Die Kategorienbilder werden im WordPress-Customizer verwaltet.

Image by pixelcreatures (https://pixabay.com/de/photos/cms-wordpress-265126/)

Image by pixelcreatures (https://pixabay.com/de/photos/cms-wordpress-265126/)

WordPress (Stand: Version 5.8) bringt von Grund auf keine Funktion mit sich, mit der man Bilder für die jeweiligen Kategorien einstellen und verwalten kann. Zwar bietet WordPress im Bereich Kategorien im Feld Beschreibung die Möglichkeit ein Bild hochzuladen, allerdings ist die Verwendung des Bildes je nach Bedarf sehr eingeschränkt. Zum Beispiel kann das Bild an sich im Code nicht einfach abgerufen werden.

Eine andere Option Kategorienbilder hochladen und verwalten zu können, sind Plugins. Da es nicht unbedingt zu empfehlen ist, seine WordPress-Seite übermäßig mit Plugins zu überladen, kommt mit diesem Beitrag eine Option, bei der Du mit wenigen Zeilen Code deinen eigenen Kategorienbilder-Bereich erstellen kannst.

Der Category Image Customizer

Die Kategorienbilderverwaltung wird im WordPress-Customizer integriert. Somit nutzt man eine WordPress eigene Funktionen und ist nicht auf externe Applikationen angewiesen.

Der benutzerdefinierte Einstellungsbereich im Customizer
Der benutzerdefinierte Einstellungsbereich im Customizer
Benutzerdefinierter Bilder Uploadbereich
Benutzerdefinierter Bilder Uploadbereich

Wie funktioniert es?

Der Code zum erstellen des Category Image Uploads besteht aus zwei Teilen. Zum einem aus der Funktion die einen benutzerdefinierten Bereich im Customizer erzeugt…

function categories_images_customizer($wp_customize) {

  /* Add custom section */
  $wp_customize->add_section( 'category_image_customizer' , array(
    'title'       => __( 'Category Images', 'my_theme' ),
    'description' => 'Stelle ein Bild für die Kategorien ein',
  ));

  /* Default Image */
  $wp_customize->add_setting( 'category_image', array(
    'default' => get_template_directory_uri().'/images/default-image.jpg'
  ));
 
  /* Add control */
  $wp_customize->add_control( new WP_Customize_Image_Control(
      $wp_customize, 'category_image', array(
        'label'    => __( 'Category Image', 'my_theme' ),
        'section'  => 'category_image_customizer',
        'settings' => 'category_image',
      )
    )
  );
}
add_action('customize_register', 'categories_images_customizer');

…und dem foreach-Loop der durch die verschiedenen Kategorien iteriert.

$categories = get_categories();
foreach($categories as $category) {

}

Die beiden „Code-Teile“ werden zusammengefasst und in der functions.php definiert.

function categories_images_customizer($wp_customize) {

  /* Add custom section */
  $wp_customize->add_section( 'category_image_customizer' , array(
    'title'       => __( 'Category Images', 'my_theme' ),
    'description' => 'Stelle ein Bild für die Kategorien ein',
  ));

  $categories = get_categories();
  foreach($categories as $category) {

    $categoryName = $category->name;

    /* Default Image */
    $wp_customize->add_setting( 'category_image_' . $categoryName . '', array(
      'default' => get_template_directory_uri().'/images/default-image.jpg'
    ));

    /* Add control */
    $wp_customize->add_control( new WP_Customize_Image_Control(
        $wp_customize, 'category_image_' . $categoryName . '', array(
          'label'    => __( 'Category Image ' . $categoryName . '', 'my_theme' ),
          'section'  => 'category_image_customizer',
          'settings' => 'category_image_' . $categoryName . '',
        )
      )
    );
  }
}
add_action('customize_register', 'categories_images_customizer');

Was ist passiert? Die Funktion zur Einstellung des Default Images, sowie die Funktion WP_Customize_Image_Control befinden sich nun innerhalb der foreach-Schleife, die durch die Kategorien iteriert. Durch die Variable $categoryName wird innerhalb der Arrays für jede einzelne Kategorie jeweils ein Default Image und die Einstellungen für den Image Upload erzeugt.

Die Katogierenbilder können nun z.B. in der category.php durch folgenden Code abgerufen werden.

<?php foreach((get_the_category()) as $category){
  $categoryName = $category->name;
} ?>

<img src="<?php echo get_theme_mod('category_image_' . $categoryName . ''); ?>" />

Je nach Bedarf kann die Funktion auch für andere Anwendungsfälle benutzt werden, zum Beispiel wenn man einen angepassten Kategoriensubtitel anzeigen möchte.

Bilderupload für alle Kategorien

Hinweis

WordPress sieht eine Kategorie erst dann als „Aktiv“ an, wenn ihr mindestens ein Beitrag zugeordnet wurde. Wenn Du also im Editor eine neue Kategorie anlegst, wird sie erst in dem benutzerdefinierten Category Image Customizer sichtbar, wenn Du der Kategorie einen Beitrag zugeordnet hast.

Hat dir der Beitrag gefallen?

Dann lass gerne einen Like da.

x
Vielen Dank für deine Bewertung
Layout SVG Bottom

Kommentar verfassen

Deine Email-Adresse wird nicht veröffentlicht.
Erforderliche Felder sind mit * gekennzeichnet

Layout SVG Bottom