Bring frischen Wind in Deine WordPress-Beitragsübersicht

Hast Du auch das Gefühl, dass Deine WordPress-Beitragsübersicht mal ein Update vertragen könnte? Ich hab da ein paar einfache Tricks für Dich, wie Du sie richtig aufpolieren kannst. Mit ein paar cleveren Snippets fügst Du Infos wie die Wortanzahl und die Lesezeit hinzu, sorgst für ein flexibles Layout und machst die Verwaltung Deiner Beiträge mit sortierbaren Spalten kinderleicht. Dein WordPress-Backend wird dadurch nicht nur benutzerfreundlicher, sondern sieht auch viel moderner aus. 

Als ich neulich durch ein paar WordPress-Blogs gestöbert habe, bin ich auf etwas gestoßen, das mich sofort begeistert hat: Ein Snippet auf dem Blogpiloten, das eine Spalte für das Beitragsbild in die Beitrags- und Seitenübersicht einfügt. Ich dachte mir gleich, das ist genau das, was mein Admin-Bereich braucht, um übersichtlicher zu werden. 

<?php

/**
 * Add featured image column to WP admin panel - posts AND pages
 * See: https://bloggerpilot.com/featured-image-admin/
 */

// Set thumbnail size
add_image_size( 'j0e_admin-featured-image', 60, 60, false );

// Add the posts and pages columns filter. Same function for both.
add_filter('manage_posts_columns', 'j0e_add_thumbnail_column', 2);
add_filter('manage_pages_columns', 'j0e_add_thumbnail_column', 2);
function j0e_add_thumbnail_column($j0e_columns){
  $j0e_columns['j0e_thumb'] = __('Image');
  return $j0e_columns;
}
 
// Add featured image thumbnail to the WP Admin table.
add_action('manage_posts_custom_column', 'j0e_show_thumbnail_column', 5, 2);
add_action('manage_pages_custom_column', 'j0e_show_thumbnail_column', 5, 2);
function j0e_show_thumbnail_column($j0e_columns, $j0e_id){
  switch($j0e_columns){
    case 'j0e_thumb':
    if( function_exists('the_post_thumbnail') )
      echo the_post_thumbnail( 'j0e_admin-featured-image' );
    break;
  }
}

// Move the new column at the first place.
add_filter('manage_posts_columns', 'j0e_column_order');
function j0e_column_order($columns) {
  $n_columns = array();
  $move = 'j0e_thumb'; // which column to move
  $before = 'title'; // move before this column

  foreach($columns as $key => $value) {
    if ($key==$before){
      $n_columns[$move] = $move;
    }
    $n_columns[$key] = $value;
  }
  return $n_columns;
}

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

Das Ganze hat bei mir dann direkt die Frage aufgeworfen: Warum nicht noch mehr nützliche Infos in die Beitragsübersicht einbauen? Außerdem wollte ich das Layout ein bisschen aufhübschen. So sind ein paar Snippets entstanden, die ich Dir hier vorstellen möchte. 

Ich zeige Dir, wie Du Deine WordPress-Beitragsübersicht so anpassen kannst, dass alles aufgeräumter und einfacher wird. Mit diesen kleinen Anpassungen sieht Dein Admin-Bereich nicht nur besser aus, er funktioniert auch besser. 

Snippets einfügen: So geht’s mit dem Plugin Code Snippets

Bevor Du loslegst, zeige ich Dir schnell, wie Du die Snippets in Deine Seite einbindest. Das geht ganz easy mit dem Plugin Code Snippets. Damit musst Du nicht in die functions.php-Datei Deines Themes eingreifen. Hier kommt die Anleitung: 

Installation des Plugins Code Snippets

Öffne Dein WordPress-Dashboard, gehe zu „Plugins“ und dann auf „Installieren“.Gib in die Suchleiste „Code Snippets“ ein und klicke auf „Jetzt installieren“.Sobald das Plugin installiert ist, klickst Du auf „Aktivieren“. 

Neues Snippet hinzufügen

Du findest jetzt im Dashboard den neuen Menüpunkt „Snippets“.Klicke auf „Snippets“ und dann auf „Neu hinzufügen“, um ein neues Snippet zu erstellen. Gib dem Snippet einen aussagekräftigen Namen, wie „Wortanzahl in Beitragsübersicht“.Kopiere das Snippet, das Du verwenden möchtest, und füge es in das Codefeld ein.Stell sicher, dass „Nur im Adminbereich ausführen“ ausgewählt ist, damit das Snippet nur im Backend aktiv ist.Klicke auf „Speichern und aktivieren“, und schon ist Dein Snippet aktiv. 

Snippets verwalten

Du kannst so viele Snippets hinzufügen, wie Du möchtest, und sie nach Belieben aktivieren oder deaktivieren. Jedes Snippet bleibt separat, sodass Du sie einfach verwalten kannst, ohne dass andere Teile Deiner Website beeinflusst werden. 

Snippets testen 

Nach dem Aktivieren eines Snippets schaust Du am besten direkt in die Beitragsübersicht im Backend. Sieht alles so aus, wie Du es Dir vorgestellt hast? Falls nicht, kein Problem – Du kannst das Snippet jederzeit anpassen oder deaktivieren. 

Mit dem Plugin Code Snippets passt Du Deine WordPress-Seite im Handumdrehen an, ohne direkt in die Theme-Dateien eingreifen zu müssen. Es ist eine super einfache Lösung für die Anpassungen, die ich Dir hier vorgestellt habe. 

Mach mehr aus Deiner WordPress-Beitragsübersicht

Vielleicht kennst Du das: Die Standardansicht Deiner WordPress-Beitragsübersicht tut, was sie soll – aber so richtig zufrieden bist Du nicht. Wie wäre es, wenn Du zusätzliche Infos wie die Anzahl der Wörter, die geschätzte Lesedauer oder das Datum der letzten Aktualisierung direkt in der Übersicht sehen könntest? So sparst Du Dir das lästige Öffnen jedes einzelnen Beitrags. Ich zeige Dir, wie Du das ganz einfach mit ein paar Snippets hinbekommst. 

Zeige die Wortanzahl an

Erstes Snippet: Damit kannst Du eine neue Spalte einfügen, die Dir zeigt, wie viele Wörter jeder Beitrag hat. Das ist super praktisch, wenn Du schnell die Länge Deiner Beiträge checken möchtest.

// Spalte für die Wortanzahl hinzufügen
add_filter('manage_posts_columns', 'add_word_count_column');
function add_word_count_column($columns) {
    $columns['word_count'] = __('Word Count');
    return $columns;
}

// Wortanzahl für jeden Artikel berechnen und anzeigen
add_action('manage_posts_custom_column', 'show_word_count_column', 10, 2);
function show_word_count_column($column, $post_id) {
    if ($column === 'word_count') {
        $content = get_post_field('post_content', $post_id);
        $word_count = str_word_count(strip_tags($content));
        echo $word_count . ' Wörter';
    }
}

Dieses kleine Snippet fügt eine Spalte namens „Word Count“ hinzu und zeigt Dir die Wörteranzahl direkt an. Die Anzahl wird direkt aus dem Inhalt des Beitrags gezogen und in der Spalte angezeigt. 

Wie lange dauert das Lesen?

Zweites Snippet: Die geschätzte Lesedauer. Mit diesem Snippet fügst Du eine Spalte hinzu, die Dir sagt, wie lange es ungefähr dauert, einen Beitrag zu lesen. 

// Spalte für die geschätzte Lesezeit hinzufügen
add_filter('manage_posts_columns', 'add_reading_time_column');
function add_reading_time_column($columns) {
    $columns['reading_time'] = __('Estimated Reading Time');
    return $columns;
}

// Geschätzte Lesezeit für jeden Artikel berechnen und anzeigen
add_action('manage_posts_custom_column', 'show_reading_time_column', 10, 2);
function show_reading_time_column($column, $post_id) {
    if ($column === 'reading_time') {
        $content = get_post_field('post_content', $post_id);
        $word_count = str_word_count(strip_tags($content));
        $reading_time = ceil($word_count / 200); // Geschätzte Lesegeschwindigkeit: 200 Wörter pro Minute
        echo $reading_time . ' min Lesezeit';
    }
}

Das Snippet berechnet die Lesedauer anhand einer durchschnittlichen Lesegeschwindigkeit von 200 Wörtern pro Minute und gibt Dir die Zeit in Minuten an. 

Letztes Update im Blick

Drittes Snippet: Kennst Du das, wenn Du wissen willst, wann Du einen Beitrag zuletzt aktualisiert hast? Diese Spalte zeigt Dir genau das an – das Datum und die Uhrzeit der letzten Aktualisierung. 

// Spalte für das letzte Update hinzufügen
add_filter('manage_posts_columns', 'add_last_updated_column');
function add_last_updated_column($columns) {
    $columns['last_updated'] = __('Zuletzt aktualisiert');
    return $columns;
}

// Daten für die Spalte 'Zuletzt aktualisiert' hinzufügen
add_action('manage_posts_custom_column', 'show_last_updated_column', 10, 2);
function show_last_updated_column($column_name, $post_id) {
    if ($column_name === 'last_updated') {
        $last_updated = get_post_modified_time('d.m.Y H:i', false, $post_id);
        if ($last_updated) {
            echo 'Zuletzt aktualisiert am ' . $last_updated;
        } else {
            echo __('Nie');
        }
    }
}

Noch besser: Du kannst diese Spalte sortierbar machen und Deine Beiträge nach dem letzten Update ordnen. 

// Spalte sortierbar machen
add_filter('manage_edit-post_sortable_columns', 'make_last_updated_column_sortable');
function make_last_updated_column_sortable($columns) {
    $columns['last_updated'] = 'modified';
    return $columns;
}

Mit diesen kleinen Änderungen hast Du eine viel übersichtlichere Beitragsübersicht und kannst Deine Inhalte einfacher verwalten und schneller Entscheidungen treffen.

Zeit für ein schickes Layout 

Hand aufs Herz: Die Standardansicht der WordPress-Beitragsübersicht ist nicht gerade ein Hingucker. Mit einem flexiblen Layout, das moderne Designprinzipien wie Flexbox nutzt, kannst Du die Übersicht nicht nur übersichtlicher, sondern auch optisch ansprechender gestalten. Ich zeige Dir, wie Du das ganz einfach umsetzen kannst. 

Flexbox-Layout für die Beitragsübersicht

Flexbox ist ein richtig praktisches CSS-Tool, mit dem Du Deine Beitragsübersicht in WordPress aufpeppen kannst. Es hilft Dir, die Beiträge in einem flexiblen Raster anzuordnen, das sich automatisch an verschiedene Bildschirmgrößen anpasst. Das Ergebnis? Eine moderne und benutzerfreundliche Übersicht, die einfach gut aussieht. 

Hier ist ein Snippet, mit dem Du Deine WordPress-Beitragsübersicht in ein flexibles Layout verwandelst:

function custom_admin_flexbox_optimized_layout_v4() {
    $screen = get_current_screen();
    if ($screen->id === 'edit-post') {  // Prüft, ob die aktuelle Seite die Beitragsübersicht ist
        echo '
        <style>
        /* Flexbox Layout für die Beiträge */
        .wp-list-table tbody {
            display: flex;
            flex-wrap: wrap;
            gap: 20px; /* Abstand zwischen den Karten */
            justify-content: flex-start;
            padding: 0;
        }

        /* Anpassungen für Spaltenüberschriften */
        .wp-list-table thead, .wp-list-table tfoot {
            display: block; /* Macht die Spaltenüberschriften sichtbar */
            width: 100%;
            box-sizing: border-box;
        }

        .wp-list-table thead th, .wp-list-table tfoot th {
            padding: 10px;
            text-align: left;
            font-weight: bold;
            border-bottom: 2px solid #ddd;
            background: #f9f9f9;
        }

        /* Jede Karte (ein Beitrag) */
        .wp-list-table tbody tr {
            display: flex;
            flex-direction: column;
            background: #fff;
            border: 1px solid #ddd;
            padding: 15px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            width: calc(33.333% - 20px); /* Drei Spalten Layout */
            box-sizing: border-box;
            margin: 0;
            overflow: hidden;
        }

        /* Inhalt der Karten */
        .wp-list-table tbody td {
            display: block;
            margin: 0;
            padding: 0;
            border: none;
            width: 100%;
        }

        /* Alle Spalten mit "column-" im Klassennamen */
        .wp-list-table tbody td[class*="column-"] {
            width: 100%; /* Nehmen den vollen Platz ein */
        }

        /* Spezifische Anpassungen für Kategorien, Tags und Datum */
        .wp-list-table tbody td.column-categories,
        .wp-list-table tbody td.column-tags,
        .wp-list-table tbody td.column-date {
            margin-top: 10px;
            font-size: 14px;
        }
        </style>
        ';
    }
}
add_action('admin_head', 'custom_admin_flexbox_optimized_layout_v4');

Was macht der Code eigentlich?

Zuerst schaut der Code mal nach, ob Du gerade in der Beitragsübersicht unterwegs bist. So wird sicherstellt, dass die Änderungen auch nur dort greifen, wo sie sollen. 

Dann sorgt der Code dafür, dass Deine Beiträge in hübschen „Karten“ angezeigt werden, die in drei Spalten angeordnet sind. Und das Beste: Du kannst den Abstand zwischen den Karten so einstellen, wie es Dir am besten gefällt. 

Auch die Überschriften passen sich dem neuen Layout an. So sieht alles schön ordentlich aus und passt perfekt zusammen. 

Warum ist Flexbox so praktisch?

Übersichtlich: Das dreispaltige Layout bringt Ordnung rein. Du siehst direkt, was wichtig ist, ohne lange suchen zu müssen. Anpassungsfähig: Ob am Schreibtisch oder unterwegs – das Layout sieht überall gut aus, passt sich also perfekt an.Frischer Style: Deine Beitragsübersicht wirkt nicht nur moderner, sondern macht auch richtig was her. Es ist einfach schön, damit zu arbeiten. 

Mit diesem Snippet wird Deine WordPress-Beitragsübersicht nicht nur nützlicher, sondern auch richtig schick – und das Arbeiten damit wird ein echtes Vergnügen. 

Mit diesem Snippet wird Deine WordPress-Beitragsübersicht zu viel mehr als nur einer Liste – sie wird zu einem modernen, benutzerfreundlichen Tool, das Dir die Arbeit erleichtert und einfach Freude bereitet. 

Noch mehr Möglichkeiten, Deine WordPress-Beitragsübersicht zu verbessern

Wenn Du Deine Beitragsübersicht weiter anpassen möchtest, gibt es noch ein paar coole Ideen, die Du ausprobieren könntest:

1. Spalten nach Deinen Wünschen anordnen

• Du kannst die Reihenfolge der Spalten ganz nach Deinen Bedürfnissen anpassen. So hast Du die wichtigsten Infos immer zuerst im Blick.
• Außerdem kannst Du Spalten, die Du nicht brauchst, einfach ausblenden. Das sorgt für eine aufgeräumte Übersicht.

2. Benutzerdefinierte Felder hinzufügen

• Falls Du in Deinen Beiträgen benutzerdefinierte Felder verwendest, wäre es doch praktisch, diese auch in der Übersicht zu sehen, oder? So hast Du alle wichtigen Infos für Dein Projekt auf einen Blick.

3. Plugins für noch mehr Kontrolle

• Es gibt jede Menge Plugins, die Dir noch mehr Funktionen für die Verwaltung der Beitragsübersicht bieten. Wenn Du mehr Kontrolle über die Anzeige und Organisation Deiner Beiträge möchtest, könnten diese Plugins genau das Richtige für Dich sein.

4. Google Search Console-Daten integrieren

• Eine richtig spannende Möglichkeit ist es, die Daten aus der Google Search Console direkt in Deiner Beitragsübersicht anzuzeigen.
• Stell Dir vor, Du könntest sehen, wie viele Klicks, Impressionen oder die durchschnittliche Position ein Artikel in den Suchergebnissen hat – und das alles direkt in Deiner Übersicht. Das hilft Dir, die Performance Deiner Beiträge im Auge zu behalten und gezielt zu optimieren.

Zum Schluss noch ein Tipp

Probier die Snippets doch einfach mal aus und pass sie an, wie es Dir am besten gefällt. So bekommst Du genau das, was Du für Deinen Alltag brauchst.

Wenn Du Deine WordPress-Beitragsübersicht mit ein paar zusätzlichen Spalten und einem neuen Layout aufpeppst, wirst Du schnell merken, wie viel einfacher alles wird. Plötzlich hast Du eine viel bessere Übersicht, und Dein Backend sieht gleich viel moderner aus.

Stell Dir vor, Du kannst direkt sehen, wie viele Wörter ein Beitrag hat, wie lange er etwa zu lesen ist und wann Du ihn zuletzt aktualisiert hast. Das macht das Verwalten Deiner Inhalte nicht nur einfacher, sondern auch viel angenehmer.

Diese kleinen Änderungen sorgen dafür, dass Dein WordPress-Backend nicht nur besser aussieht, sondern auch richtig praktisch wird. Du wirst merken, dass Du effizienter arbeiten kannst, ohne viel zusätzlichen Aufwand.