Kann ich Elemente in der Backend-Widget-Liste individuell gestalten?

UPDATE Refrazierte die Frage

Auf der Backend-Widget-Seite widgets.php gibt es eine Liste der verfügbaren Widgets. Elemente in dieser Liste haben dieselben classn und eine dynamisch generierte ID , die sich ändert, wenn ein neues Widget (alphabetisch) in die Liste eingefügt wird. Es gibt also keine zuverlässige Möglichkeit, CSS auf einzelne Elemente in der Liste zu lenken.

Gibt es eine andere Möglichkeit, einzelne Elemente in der Widgetliste zu stylen?

Alte, engere Frage

Ich habe ein Thema, das ein Schriftart-Symbol in seinem vollständigen Namen enthält. Es ist global so definiert:

 $theme_data = wp_get_theme(); // Retrieves the theme data from style.css $theme_name = $theme_data['Name']; $theme_icon = ''; $theme_full_name = $theme_icon . ' ' . $theme_name; 

Ich kann $theme_full_name in Menüs, $theme_full_name und so weiter verwenden. Es gibt jedoch eine Ausnahme. Das Theme enthält zwei Widgets, die auch $theme_full_name in ihrem Namen haben (der zweite Parameter im Konstruktor ). Auf der Seite widgets.php im Admin erscheint nur der Themenname. Anscheinend wird das Icon entfernt (vermutlich ist alles HTML im Widget-Namen).

Gibt es eine Möglichkeit, das Schriftart-Symbol im Widget-Namen beizubehalten?

Solutions Collecting From Web of "Kann ich Elemente in der Backend-Widget-Liste individuell gestalten?"

Wie @MarkKaplun in einem Kommentar erwähnt, ist es mit CSS möglich. Auch mit Javascript.

CSS-Ansatz

Sehen wir uns das Kalender- Widget als Beispiel an.

Die ID für das Widget in der Liste der verfügbaren Widgets lautet wie folgt:

 widget-{integer}_calendar-__i__ 

und in der Seitenleiste ist es:

 widget-{integer}_calendar-{integer} 

Wenn wir das Kalender-Dashcon vor dem Widgettitel anzeigen möchten, können wir z. B. ein benutzerdefiniertes Stylesheet für die Datei widgets.php die widgets.php

 div[id*="_calendar-"].widget .widget-title h3:before{ content: "\f145"; font-family: dashicons; margin-right: 0.5rem; } 

Hier verwenden wir *= , um eine Teilzeichenfolge innerhalb des ID-Selektors zu finden.

Es wird so angezeigt:

Kalender

Bei Bedarf können wir dies weiter auf die rechten oder linken Teile beschränken:

 #widgets-right #widgets-left 

oder die verfügbaren Widgets:

 #available-widgets 

Die Seite widgets.php wird auch body.widgets-php falls dies für allgemeine Stylesheets benötigt wird.

In der Tat wird im Backend durch die Zeile (WP 4.6) in der function wp_widget_control gesamte HTML-Name vom wp_widget_control :

 $widget_title = esc_html( strip_tags( $sidebar_args['widget_name'] ) ); 

Nun gibt es keine offensichtliche Möglichkeit, strip_tags abzufangen, da es sich um eine php-function handelt, aber esc_html ist eine WP-function, die einen Filter hat. Also können wir nicht verhindern, dass das Icon / HTML entfernt wird, aber wir können es mit dem Filter wieder hinzufügen. So was:

 add_filter ('esc_html','wpse243718_add_icon_to_widget_name'); function wpse243718_add_icon_to_widget_name ($safe_text) { global $theme_icon; global $theme_name; global $pagenow; if ( ($pagenow == 'widgets.php') && (substr($safe_text, 0, strlen($theme_name)) == $theme_name) ) return $theme_icon . ' ' . $safe_text; else return $safe_text; } 

Dieser Code geht davon aus, dass der Name des Widgets mit $theme_name beginnt, aber Sie können natürlich auch andere Arten der Erkennung verwenden oder Ihren Titel mit allen Arten von HTML füllen.