Mit dem Plugin Admin Columns¹ können Spalten in die Übersichtsseiten im Backend von WordPress hinzugefügt werden, die beispielsweise die Inhalte von Benutzerdefinierten Feldern ausgeben können.

Im folgendem Beispiel sollen diese Tabellendatenzellen, entsprechend dem Inhalt, mit bestimmten CSS-Befehlen formatiert werden.

Die Tabellendatenzellen ohne Inhalt können mit dem :empty-Selektor² angesprochen werden:

<style>
    td[data-colname="SPALTENNAME"]:empty {
        background: rgb(233, 30, 99); 
    }
</style>

Erklärung: Im CSS-Beispiel wurde der [attribute=value]-Selektor³ verwendet, damit nur die Tabellendatenzellen der Spalte mit dem Spaltennamen "SPALTENNAME" einen pinken Hintergrund erhalten:

Weil die :contains-Pseudo-Klasse⁴ veraltet ist, wird im nächsten Schritt der Inhalt der Tabellendatenzellen mit jQuery ausgelesen:

<script>
    var $ = jQuery;
    $( function() {
        $( "td" ).each( function() {
            var $this = $( this );
            $this.attr( "data-content", $this.text() );
        } );
    } );
 </script>

Der ausgelesene Inhalt (z. B. "ja", "nein") wird hierbei als Wert einem Attribut (z. B. data-content, class) hinzugefügt⁵, so dass sich der [attribute*=value]-Selektor zum Formatieren der Tabellendatenzellen verwenden lässt:

<style>
    td[data-colname="SPALTENNAME"]:empty {
        background: rgb(233, 30, 99);
    }
    td[data-colname="SPALTENNAME"][data-content*="ja"] {
        background: rgb(76, 175, 80);
        color: white;
    }
    td[data-colname="SPALTENNAME"][data-content*="nein"] {
        background: rgb(255, 235, 59);
        color: black;
    }
 </style>

Erklärung: Anders als beim [attribute=value]-Selektor, bei dem der angesprochene Wert (engl. value) eines Atrributes genau festgelegt ist, kann der Wert beim [attribute~=value]-Selektor auch nur Teil einer Zeichenkette sein.

In WordPress kann dies mit folgender Funktion im Backend integriert werden. Füge den folgenden Codeschnipsel in die Datei functions.php des aktiven (Child-)Themes oder in ein seitenspezifisches Plugin ein:

function change_td_color() {
    echo ' 
        <style>
            td[data-colname="SPALTENNAME"]:empty {
                background: rgb(233, 30, 99); 
            }
            td[data-colname="SPALTENNAME"][data-content*="ja"] {
                background: rgb(76, 175, 80);
                color: white;
            }
            td[data-colname="SPALTENNAME"][data-content*="nein"] {
                background: rgb(255, 235, 59);
                color: black;
            }
        </style>
        <script> 
            var $ = jQuery;
            $( function() {
                $( "td" ).each( function() {
                    var $this = $(this);
                   $this.attr( "data-content", $this.text() );
                });
            });
        </script>
    ';
}
add_action( 'admin_head', 'change_td_color' );

Tipp: Du kannst die Funktion change_td_color() dem Action Hook 'wp_footer'⁶ (anstatt dem Action Hook 'admin_head'⁷) mitgeben, wenn du Tabellendatenzellen im Frontend formatiert ausgeben möchtest.

Links

• 1↑ Plugin Admin Columns:
  de.wordpress.org/​plugins/​codepress-admin-columns
• 2↑ w3schools.com CSS :empty Selector:
  w3schools.com/​cssref/​sel_empty.asp
• 3↑ w3schools.com CSS [attribute=value] Selector:
  w3schools.com/​cssref/​sel_attribute_value.asp
• 4↑ w3.org 6.6.6 Content pseudo-class:
  w3.org/​TR/​2001/​CR-css3-selectors-20011113/​#content-selectors
• 5↑ jQuery API Documentation .attr():
  api.jquery.com/​attr
• 6↑ w3schools.com CSS [attribute*=value] Selector:
  w3schools.com/​cssref/​sel_attr_contain.asp
• 7↑ Code Reference do_action( 'wp_footer' ):
  developer.wordpress.org/​reference/​hooks/​wp_footer
• 8↑ Code Reference do_action( 'admin_head' ):
  developer.wordpress.org/​reference/​hooks/​admin_head