WordPress Theme erweitern und programmieren
WordPress & Co

Für jede Kategorie in WordPress ein eigenes Bild verwenden

In den letzten Jahren hat sich viel in unserem Lieblings-CMS getan. Früher war es eine reine Blog-Software und heute werden auch große Webseiten damit verwaltet. Aber eines ist immer gleich geblieben. Die Kategorien haben wie die Schlagwörter in ihrer anfänglichen Form überlebt. Und bei Blogs arbeiten wir sehr viel mit Bildern. Jeder Post sollte zumindest ein Beitragsbild haben. Aber in der Hitze des Gefechts vergisst du genau diese zwei Klicks. Dann ist praktisch, wenn zumindest ein Bild für die Kategorie automatisch angezeigt wird.

Dies lässt sich eigentlich ganz einfach über eine eigene Funktion in der Datei functions.php des aktiven Themas erledigen. Falls diese Datei bei Dir nicht existiert, kannst Du sie einfach erstellen. Du musst nur als erste Zeile <?php und als letzte Zeile ?> schreiben. Aber besser erstellst du dir ein Child-Theme und verwendest dort die Datei für die Themefunktionen.

Zusätzlich hilft es Dir sicher, wenn Du mit ShortCodes ein wenig umgehen kannst. Ich habe bereits Posts dazu geschrieben: Einen Shortcode im WordPress-Theme und nicht im Post verwenden erklärt wie Du ShortCodes außerhalb des Loops und Editors verwendet und Einen ShortCode verwenden um ein Inserat im Post anzuzeigen beschreibt wie Du eigene ShortCodes definieren kannst.

Aber jetzt zu unserer Funktion. Wie immer kannst Du sie 1:1 übernehmen. Die Erklärung des Codes ist wie gewohnt als Bemerkungen innerhalb der Funktion ausgeführt.

//Kategoriebilder zu einem Post hinzufuegen
function mtdn_AddCatImage($content) {
  //Post importieren
  global $post;
  //Kategorien des Posts holen
  $cats = get_the_category($post->ID);
  //Namen der ersten Kategorie holen 
  $category = $cats[0]->cat_name;
  //Bild zusammenstellen (ueber Slug der Kategorie)
  $catImage = get_bloginfo('template_url')."/images/categories/cat-".
              strtolower($cats[0]->slug).".jpg";
  //Pruefen ob im Post Bilder vorhanden sind
  $searchimages = '~<img alt="" />]* />~';
  preg_match_all($searchimages, $content, $images);
  $imagesCount = count($images[0]);
  //ShortCode initialisieren
  $scImage = "";
  //Falls in der Einzelansicht oder auf der Startseite
  if (is_single() || is_home()) {
    //Wenn keine Bilder vorhanden sind
    if ($imagesCount == 0) {
    //->cat_name = Name der Kategorie
    //->description = Beschreibung der Kategorie
    //Falls keine Beschreibung vorhanden ist, den Namen verwenden
    $caption = $cats[0]->description;
    if ($caption == "") {$caption = $cats[0]->cat_name;} 
    //ShortCode zusammenstellen
    $scImage = '<img class="size-medium" title="'.$category.
               '" src="'.$catImage.'" alt="'.$category.
               '" width="100" height="100" /> ';
    }
  } else {
    //Falls auf Suche, Archiv oder aehnlichen Seiten
    //Leere caption einfuegen --> Format bleib erhalten aber es gibt keine Beschriftung
    $scImage = '<img class="size-medium" title="'.$category.
               '" src="'.$catImage.'" alt="'.$category.'" width="75" height="75" /> ';
  }
  //Falls ein ShortCode zusammengestellt wurde, diesen ausgeben
  if (!empty($scImage)) {
    //ShortCode 'uebersetzen'
    $sCode = do_shortcode($scImage);
    //Falls eine Auflistung der Posts erfolgt, Shortcode direkt ausgeben, da WordPress
    //the_excerpt von Bildern bereinigt. Sonst in den content integrieren
    if (is_single() || is_home()) {
      $content = $sCode.$content;
    } else {
      echo $sCode;
    }
  }
  //Veraenderten Content zurueckgeben
  return $content;
}
//Filter fuer den gesamten Inhalt aktivieren
add_filter('the_content', 'tmdn_AddCatImage');
//Filter fuer den Auszug aus einem Post aktivieren
add_filter('the_excerpt', 'tmdn_AddCatImage');

Nun musst Du nur mehr die Kategoriebilder zusammenstellen. Sie müssen im Verzeichnis images/categories/ liegen, mit cat- beginnen, danach musst du den Slug der Kategorie in Kleinbuchstaben verwenden und sie müssen von Typ jpg sein

1 Kommentar
  1. Janine
    Janine
    7. August 2023 um 9:13

    Klappt leider nicht mehr. Schade! Fehlermeldung:
    Deine PHP-Code-Änderungen wurden aufgrund eines Fehlers in Zeile 308 der Datei wp-includes/class-wp-hook.php zurückgesetzt. Bitte beheben und versuchen, erneut zu speichern.

    Uncaught TypeError: call_user_func_array(): Argument #1 ($callback) must be a valid callback, function „tmdn_AddCatImage“ not found or invalid function name in wp-includes/class-wp-hook.php:308
    Stack trace:
    #0 wp-includes/plugin.php(205): WP_Hook->apply_filters()
    #1 wp-includes/post-template.php(255): apply_filters()
    #2 wp-content/themes/Divi/page.php(46): the_content()
    #3 wp-includes/template-loader.php(106): include(‚…‘)
    #4 wp-blog-header.php(19): require_once(‚…‘)
    #5 index.php(17): require(‚…‘)
    #6 {main}
    thrown

    Antworten
Hinterlasse eine Antwort

Deine eMail-Adresse wird nicht veröffentlicht. Pflichtfelder sind mit * markiert.