Sidebar-Widgets – dynamisches CSS: Problem mit Widget-Titel

', 'before_title' => '
', 'after_title' => '
', ) ); ...

und die Sidebar wird aufgerufen mit:

 

Die Sache ist gut gemacht, aber … in zwei Bedingungen:

Wenn der Widget-Titel aktiv ist

… es lädt …

 
  • widget title...
    widget contents here...

Wenn der Widget-Titel leer ist

… es lädt …

 
  • widget contents here...

Jetzt mit meinem CSS ist das Aussehen der dynamischen Widgets wie folgt:
meine dynamischen Widgets

Wie ich das Problem identifiziert habe, gibt es in der register_sidebar() function nur 4 Möglichkeiten:

  1. before_widget
  2. after_widget
  3. vor_title
  4. nach_title

Bei diesen kann es nur zwei Bedingungen geben:

  • Widget Titel Aktiv: Laden 1,2,3,4
  • Widget Title abwesend: Laden Sie nur 1,2

Also mit meinem functions.php Code, der

vollständig verpasst, wenn das Titelfeld leer bleibt. Und so sieht der Inhalt des Widgetbereichs ohne 4-seitiges Auffüllen eingefasst aus und sieht hässlich aus.

PROBLEM

Wenn ich padding: 3%; setze padding: 3%; in .widget ändert es das Aussehen des Widget-Titels und nimmt Padding um es herum, und es sieht auch schlecht aus.
dynamisches Widget mit Padding in .widget

Aber es triggers das Aussehen des widget-titels-less widgets.

WAHRSCHEINLICHE LÖSUNG

Also habe ich über eine Lösung nachgedacht, wenn ich ein bedingtes CSS erstellen kann, wie:

   .widget{ my default css; }    .widget{ padding: 3% !important; }   

Aber leider! Es gibt KEIN SOLCHES wie active_widget_title() soweit ich weiß.

Also, ohne, wie kann ich dieses sehr kleine Problem des Entwurfs der dynamischen Widgets lösen?

BEARBEITEN:

Und das schockierendste Problem ist: Wenn der Titel fehlt, gibt es eine

Fehlfunktion, weil die Struktur dort passiert sieht:

 
  • widget contents here...

Ein end-div (

) ohne Startwert. Das macht ein Massaker an der Vorlage. 🙁

Solutions Collecting From Web of "Sidebar-Widgets – dynamisches CSS: Problem mit Widget-Titel"

Keine gute Lösung … aber ist eine Lösung: jquery verwenden.

 register_sidebar( array ( 'name' => 'Left Widget Area', 'id' => 'primary_widget_area', 'before_widget' => '
  • ', 'after_widget' => '
  • ', 'before_title' => '', ) );

    und der JS

     jQuery().ready(function($) { $('.invisible-title').each(function() { var title = $(this).html(); var widgetid = $(this).data('widget'); $( '#' + widgetid ).find('.widget-title').html(title); $(this).remove(); }); }); 

    Der gut aussehende rote Balken wird immer angezeigt, leer, wenn kein Titel.

    Und wenn Sie keinen roten Balken wünschen, wenn kein Titel vorhanden ist, und auch eine Anpassung in diesem Fall? Kein Problem. Ändern Sie die oben genannten mit:

     jQuery().ready(function($) { $('.widget').each(function() { var $title = $(this).find('.invisible-title'); if ( ! $title.length ) { $(this).css('padding','3%').find('.widget-title').remove(); } else { $(this).find('.widget-title').html($title.html()); $title.remove(); } }); }); 

    Und wenn Sie möchten, dass einige Widget immer die Titelleiste haben und einige andere nur, wenn es einen Titel gibt? Kein Problem mehr. Wenn WordPress das Widget druckt, fügt es classn hinzu, damit Sie erkennen können, welches Widget ist. Z.B. Standard-Wordpress-Text-Widget wird “Widget_text” -class haben.

     jQuery().ready(function($) { $('.widget').each(function() { var $title = $(this).find('.invisible-title'); if ( ( ! $title.length ) && $(this).hasClass('widget_text') ) { $(this).css('padding','3%').find('.widget-title').remove(); } else { $(this).find('.widget-title').html($title.html()); $title.remove(); } }); }); 

    Detailliertere Widget-Auswahl? Tipp: Jedes Widget hat eine eindeutige ID …