So geht's: Beitragsbild Spalte im WordPress Admin hinzufügen

Beitragsbild-Spalte hinzufügen

Artikel wurde aktualisiert am 12.10.2016

Wir fügen der WordPress-Admin Post-Auflistung eine neue Spalte mit dem Beitragsbild hinzu. Das geht einfach und ressourcenschonend über ein PHP-Snippet in der functions.php, oder mit einem WordPress Plugin.

Dieser Artikel zeigt dir, wie du die Spalte mit dem Featured-Image im WordPress Admin hinzufügst.

functions.php

Deine functions.php finden
Deine functions.php finden

Die Änderungen nehmen wir in der Theme-Datei vor.

Du findest die Datei functions.php im Verzeichnis deines Themes. Dort wo auch die index.php deines Themes liegt.
Pfad: /wp-content/themes/DEINTHEME/functions.php

Mit einem FTP-Client wie Filezilla kannst du dieses File downloaden und mit einem Texteditor bearbeiten.

Beitragsbild-Spalte Code

Neue Spalte mit den Beitragsbildern im WordPress Admin
Neue Beitragsbilder im WordPress Admin

Zuerst bemühen wir die WordPress Filter manage_posts_columns und manage_pages_columns, mit denen wir die Auflistung der Posts und Pages um eine Spalte erweitern. In unserem Fall hab ich die neue Spalte sinngemäß Image beschriftet. WordPress übersetzt das dann im deutschsprachigen Admin mit Bild.

Hätte ich nur die neue Spalte hinzugefügt, würde diese ganz am Ende angehängt. Das gefällt mir aber nicht, ich möchte das Featured Image gleich am Anfang haben.
Also habe ich das Array $columns noch mal mit allen Spalten neu aufgebaut und die Spalte j0e_image_thumb gleich ganz am Anfang nach der Checkbox eingereiht.

Wenn du die Beitragsbilder nur bei den Beiträgen oder Seiten haben möchtest, kannst du diejenige add_filter Anweisung einfach weglassen.

// Add featured image column to admin panel - posts AND pages
// Add new column as second
function j0e_add_image_column($columns){

	$columns = array(
		'cb' => '<input type="checkbox">',
		'j0e_image_thumb' => __('Image'),
		'title' => __( 'Title' ),
		'author' => __( 'Author' ),
		'categories' => __( 'Categories' ),
		'tags' => __( 'Tags' ),
		'comments' => __( 'Comments' ),
		'date' => __( 'Date' )
	);

	return $columns;
}
add_filter('manage_posts_columns', 'j0e_add_image_column', 5);
add_filter('manage_pages_columns', 'j0e_add_image_column', 5);

Beitragsbild abfragen und einfügen

Eine neue Spalte ohne Daten und Inhalt können wir nicht gebrauchen. Also müssen wir der Spalte j0e_image_thumb jetzt noch einen Wert zuweisen.
Dafür brauchen wir den WordPress Action Hook namens manage_posts_custom_column und manage_pages_custom_column.

Zuerst frage ich noch ab, ob dem Artikel überhaupt ein Beitragsbild zugewiesen wurde. Ist das nicht der Fall, wird die Funktion mit einem break beendet.
Ist ein Bild vorhanden, wird noch die Bildadresse abgefragt und mit einem <img> Tag ausgegeben. Die Größe hab ich einfach auch 40px in der Breite angegeben. So passt das Bild schön in die Tabelle.

// Give the new column a value
function j0e_display_image_column($column_name, $post_id){
  switch($column_name){
    case 'j0e_image_thumb':
      $post_thumbnail_id = get_post_thumbnail_id($post_id);
      if ($post_thumbnail_id) {
        $post_thumbnail_img = wp_get_attachment_image_src( $post_thumbnail_id, 'thumbnail' );
        echo '<img width="40" src="' . $post_thumbnail_img[0] . '">';
      }
      break;
  }
}
add_action('manage_posts_custom_column', 'j0e_display_image_column', 5, 2);
add_action('manage_pages_custom_column', 'j0e_display_image_column', 5, 2);

Spaltenbreite anpassen

Zu guter Letzt passe ich die Spaltenbreite noch an. Ohne Begrenzung wäre die Column etwa 300px breit, was ja viel zu viel wäre.

Mittels CSS verpasse ich der CSS-Klasse column-j0e_image_thumb die Breite von 40px, genau so wie dem Bild. Damit fügt sich unsere neue Featured Image Spalte perfekt ein.
Ich nutze den Hook admin_head, um den CSS-Code im Bereich des WordPress-Admins auszugeben.

// Format the column width with CSS
function j0e_add_admin_styles() {
	echo '<style>.column-j0e_image_thumb {width: 40px;}</style>';
}
add_action('admin_head', 'j0e_add_admin_styles');

Schon wird dir das Beitragsbild im WordPress-Admin angezeigt.
Kopiere diese drei Snippets in deine functions.php und speichere sie neu ab.

Den gesamten Code hab ich auch auf Github bereitgestellt.

Weiterführende Links

Falls du dich noch näher einlesen möchtest, oder meinen Code noch erweitern willst, findest du alle notwendigen Informationen im WordPress Codex:

https://codex.wordpress.org/Plugin_API/Filter_Reference/manage_posts_columns
https://codex.wordpress.org/Plugin_API/Filter_Reference/manage_$post_type_posts_columns
https://codex.wordpress.org/Plugin_API/Action_Reference/manage_posts_custom_column
https://codex.wordpress.org/Plugin_API/Action_Reference/admin_head

WordPress Plugins

Falls du mit einem Texteditor und etwas PHP so gar nicht zurechtkommst, gibt es auch einige fertige Plugins, die dir die gleichen Funktionen, wie das Functions-Snippet bieten.

Featured Image Admin Thumb

Featured Image Admin Thumb

Dieses Plugin kommt mit den meisten Features. Leider wird das Featured Thumbnail in der letzten Spalte angezeigt.
Gut finde ich aber die Funktion, direkt in der Beitragsliste ein Beitragsbild festzulegen. Das können die Mitbewerber nicht.
Featured Image Admin Thumb ist kostenlos im Plugin-Verzeichnis erhältlich.

Add Featured Image Column

Add Featured Image Column

Sehr gut finde ich das Plugin Add Featured Image Column. Es fügt das Bild genau in die richtige Position ein und wird scheinbar auch noch gewartet.
Ich glaube darauf würde meine Wahl fallen.

Featured Image Column

Featured Image Column Plugin

Das WordPress Plugin Featured Image Column macht das gleiche wie mein Code weiter oben. Einstellungen gibt es keine.
Das Plugin ist kostenlos, wurde aber schon zwei Jahren nicht mehr upgedated.

Featured Image Column Display

Featured Image Column Display

Dieses Plugin gibt es erst seit zwei Wochen. Hier wird die Neue Spalte am Ende der Liste angezeigt. Für meinen Geschmack aber zu groß, was viel Platz verschwendet.
Featured Image Column Display ist ebenfalls kostenlos downloadbar.

Fazit

Wenn du weißt was die Datei functions.php ist und wie du da zusätzlichen Code einfügst, ist die einfachste Variante ganz oben beschrieben.
Damit musst du nicht noch ein zusätzliches Plugin installieren und hast volle Kontrolle über die neuen Funktionen.

Für technisch weniger versierte Leser eigenen sich die Plugins gut. Direkt aus dem WordPress Admin installieren und Spaß an der neuen Funktion haben.

Wenn du allerdings auf ein Premium Theme wie Divi zurückgreifen möchtest, kannst du dir den Aufwand vielleicht sparen. Manche Themes binden die Spalte standardmäßig mit ein.

Premium Plugins findest du auf CodeCanyon.

Verfasst in: WordpressTags: , ,

Willst du an der Diskussion teilnehmen?


Kommentar verfassen

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

Kommentar *

Name *
E-Mail *
Webseite