Sie können die Titelleiste von Wordpress Widgets im Admin-Bereich bearbeiten?

Question

Ich biete eine Möglichkeit für Mobile Widgets und Desktop-Widgets in allen benutzerdefinierten Widgets, die ich erstelle, also denke ich, es wäre eine gute Idee, um anzugeben, ob ein Widget Mobile/Desktop im Titel des Widget-Bereichs im Backend ist um zu helfen, diesen Abschnitt benutzerfreundlicher zu machen.

Gibt es einen Filter, der verwendet werden kann, um ein Bild in der Titelleiste von Widgets (links neben dem Widgettitel) zu laden, um ein Mobile/Desktop-Symbol zu identifizieren, welches aktive Widgets Desktop und sind Welche aktiven Widgets sind mobil, ohne das Widget zu öffnen, um in den Optionen zu sehen?

Gibt es einen Haken irgendwo in WordPress, um dies nur im Backend Admin widgets.php Seite zu erfassen? Möchte PHP-Hook für das Laden von Seiten verwenden. Verwenden Sie jQuery bereits, wenn die Option von Mobile auf Desktop wechselt und umgekehrt. Es ist die anfängliche Belastung der Widgets-Seite, die mich dazu veranlasst, dies zu tun.

Möglich?

Beispiel unten, wenn möglich auf initial widgets.php Seite einfach von innerhalb und erweiterte WP_Widgets-Klassendatei zu laden? Oder Filter, Aktionen, etc ...

Also habe ich versucht, die folgenden wie dies in der Widget-Klasse zu tun, die WP_Widget erweitert:

function __construct() { 

     parent::__construct(
      'social_media_widget', 
      __('Social Media Widget', 'mydomain') 
     ); 

     add_filter('dynamic_sidebar_params', array($this, 'my_sidebar_params'), 10, 1); 

    } 

    function my_sidebar_params($params) { 

     $sidebar_id = $params[0]['id']; 

     if (is_admin() && $params[0]['widget_name'] == 'Social Media Widget') 
     { 
      $_widget = get_option('widget_social_media_widget'); 

      if (!empty($_widget) && isset($_widget[$params[1]['number']])) 
      { 
       // $platform is being set in here as "desktop" because if I do a var_dump, it gives me "desktop", however, the image is not showing in the titlebar using before_title below... why? 
       $platform = isset($_widget[$params[1]['number']]['platform']) ? $_widget[$params[1]['number']]['platform'] : ''; 
      } 

      if (!empty($platform)) 
      { 
       $params[0]['before_title'] = '<img src="' . get_stylesheet_directory_uri() . '/img/' . $platform . '-icon.png" alt="' . $platform . ' menu" class="menu-icon ' . $platform . '-icon" />'; 
      } 
     } 
    return $params; 
} 

So $ Plattform der richtige Wert jetzt, aber das Bild wird nicht vor dem Titel in der Titelleiste des Bereichs Admin Widgets angefügt, so dass ich nicht sicher bin, warum es nicht zeigt ... Wenn ich Echo $params[0]['before_title'] das Bild zeigt, aber nicht in der richtige Ort. Ich brauche das Bild innerhalb des Tags <h3> des Titels des Widgets, wenn möglich. Irgendwelche Ideen?

Answer 1

Wenn Sie den WP-Code schnüffeln, werden Sie zwei Dinge sehen:

1. , dass Wordpress die Tags aus dem Titel wird Strippen, weshalb Ihr Bild entfernt zu werden. Dies ist aus der WP Core-Datei „widgets.php“:

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

2. Dass es keine Haken, Aktionen oder Filter, damit Sie sie manipulieren.

Also, du wirst kreativ werden müssen.

Ein Weg wäre, zu versuchen, die ID des Widgets zu nutzen. Dies ist jedoch etwas schwierig, da der WP-Code die IDs absichtlich verwaltet, so dass sie auch dann eindeutig sind, wenn Sie das gleiche Widget mehrfach hinzugefügt haben.

Also, lassen Sie sich die „aktuelle-Kommentare“ Widget als ein Beispiel dafür, wie Sie diese umgeht vielleicht in der Lage:

Die ID der ersten „recent-Kommentare“ Widget in der Schnittstelle ist widget-17_recent-comments-2 gezeigt, Die ID des zweiten "recent-comments" Widgets ist widget-9_recent-comments-3, usw. Sie erhalten die Idee.

Lassen Sie uns das Stück, das recent-comments sagt, nutzen.

Um dies zu tun, müssen wir auf einige der "funner" CSS-Selektoren tippen: den contains Selektor. In diesem Fall würde ich [id*="_recent-comments-"] empfehlen. Achten Sie besonders auf zu Beginn _ und Ende - - dies wird dazu beitragen sicherzustellen, dass Ihre Stile nicht auf andere Widgets mit IDs, die einen Teil des Selektors enthalten können, angewendet werden.

Mit diesem kleinen Stück von Informationen, können wir ein Bild bekommen jetzt in unserem h3 als Hintergrund zeigen:

div[id*="_recent-comments-"] h3 { 
    color: red; /* if you want to manipulate the title color */ 
    padding-left: 35px; /* to create some space for our image */ 
    /* obviously adjust this as needed */ 
    background: transparent url(http://placehold.it/20x20) 5px center no-repeat; 
    /* your other styles here ... */ 
}