Jalara Studio

veröffentlicht am

Tabellendatenzellen (<td>) je nach Inhalt mit CSS formatieren

# #


Mit dem Plugin Admin Columns1 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-Selektor2 angesprochen werden:

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

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

Weil die :contains-Pseudo-Klasse4 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ügt5, 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'6 (anstatt dem Action Hook 'admin_head'7) mitgeben, wenn du Tabellendatenzellen im Frontend formatiert ausgeben möchtest.

Links

Buchempfehlung

Anzeige | Affiliate-Link*

2017 erschien im O'reilly Verlag das neue über 1000 Seiten starke CSS-Standard­werk CSS: The Definitive Guide: Visual Presentation for the Web des Frontend-Entwicklers Eric A. Meyer. (Derzeit nur in Englisch erhältlich.)