web-dev-qa-db-fra.com

Ajouter une classe à before_widget pour tous les widgets avec une liste déroulante et un compteur

Certains widgets prédéfinis offrent la possibilité d'utiliser un élément select (liste déroulante) et/ou un compteur après chaque entrée. Comment puis-je ajouter les classes CSS widget-with-dropdown ou widget-with-counters à ces widgets?

Il existe déjà des solutions pour les widgets personnalisés , les identifiants de la barre latérale connus ou les positions , mais je dois inspecter les paramètres de l'instance actuelle et je veux intercepter toutes les positions ou tous les widgets possibles (si ils suivent le schéma de nommage WordPress).

theme-developmentwidgetsfilterscsssidebar
3
fuxia

Les classes CSS sont appliquées dans la fonction dynamic_sidebar(). Il n'y a pas de filtre spécifique pour cela:

// Substitute HTML id and class attributes into before_widget
$classname_ = '';
foreach ( (array) $wp_registered_widgets[$id]['classname'] as $cn ) {
    if ( is_string($cn) )
        $classname_ .= '_' . $cn;
    elseif ( is_object($cn) )
        $classname_ .= '_' . get_class($cn);
}
$classname_ = ltrim($classname_, '_');
$params[0]['before_widget'] = sprintf($params[0]['before_widget'], $id, $classname_);

Mais il existe un filtre pour $params juste après ce bloc de code:

$params = apply_filters( 'dynamic_sidebar_params', $params );

Pour obtenir les paramètres du widget actuel, nous devons rechercher dans la variable globale $wp_registered_widgets une entrée avec la clé $params[ 0 ][ 'widget_id' ].
Si elle existe, elle a une instance de classe comme rappel, et nous pouvons utiliser la méthode get_settings() de cet objet pour… bien… obtenir les paramètres.
Le tableau retourné a probablement une clé égale à $params[1][ 'number' ].
Un tableau est à nouveau associé à cette clé. Ici, nous pourrions trouver une autre clé dropdown (ou count) avec une valeur de 0 ou 1.
S'il s'agit de 1, nous ajoutons les nouvelles classes à la chaîne dans $params[0]['before_widget'].

Je pense que cela est plus facile à lire en tant que code:

is_admin() || add_filter( 'dynamic_sidebar_params', 'wpse_widget_classes' );

/**
 * Add classes for widgets with counters or dropdowns.
 *
 * @param  array $params
 * @return array
 */
function wpse_widget_classes( $params ) {

    global $wp_registered_widgets;

    $classes     = array();
    $instance_id = $params[1][ 'number' ];
    $widget_id   = $params[ 0 ][ 'widget_id' ];
    $settings    = $wp_registered_widgets[ $widget_id ][ 'callback' ][ 0 ]->get_settings();

    if ( empty ( $settings[ $instance_id ] ) )
        return $params;

    if ( ! empty ( $settings[ $instance_id ][ 'dropdown' ] ) )
        $classes[] = 'widget-with-dropdown';

    if ( ! empty ( $settings[ $instance_id ][ 'count' ] ) )
        $classes[] = 'widget-with-counters';

    if ( empty ( $classes ) )
        return $params;

    $params[0]['before_widget'] = str_replace(
        'class="',
        'class="' . join( ' ', $classes ) . ' ',
        $params[0]['before_widget']
    );

    return $params;
}
4
fuxia

Ou, vous pouvez simplement utiliser un plugin:

Les deux plugins font à peu près la même chose que @toscho a montré dans sa réponse.

Widget CSS Classes plugin

$this_id    = $params[0]['id']; // Get the id for the current sidebar we're processing
$widget_id  = $params[0]['widget_id'];
$widget_obj = $wp_registered_widgets[$widget_id];
$widget_num = $widget_obj['params'][0]['number'];

Lien source vers v1.2.1

Custom plugin Classes plugin

global $wp_registered_widgets;
$widget_id    = $params[0]['widget_id'];
$widget_obj    = $wp_registered_widgets[$widget_id];
$widget_opt    = get_option($widget_obj['callback'][0]->option_name);
$widget_num    = $widget_obj['params'][0]['number'];

Lien source vers v1.1

Juste pour prouver que @toscho a raison et qu'il ne semble y avoir aucune autre option.

0
divydovy

ajoutez d'abord une classe d'espace réservé personnalisée dans le constructeur

<?php
public function __construct() {
   $widget_ops  = array(
      'classname'                   =>; 'widget_text eaa __eaa__', //__eaa__ is my placeholder css class
      'description'                 =>; __( 'AdSense ads, arbitrary text, HTML or JS.','eaa' ),
      'customize_selective_refresh' =>; true,
   );
   $control_ops = array( 'width' =>; 400, 'height' =>; 350 );
   parent::__construct( 'eaa', __( 'Easy AdSense Ads &amp; Scripts', 'eaa' ), $widget_ops, $control_ops );
}
?>

Puis remplacez-le par la ou les classes de votre choix en fonction des options de widget telles que celle-ci.

<?php
if ( $instance['no_padding'] ) {
   $args['before_widget'] = str_replace( '__eaa__', 'eaa-clean', $args['before_widget'] );
}
?>

Nous utilisons l’espace réservé pour limiter les incidences du code HTML d’avant_widget sur la fonctionnalité de notre plugin.

Vous pouvez trouver les détails avec l'exemple à http://satishgandham.com/2017/03/adding-dynamic-classes-custom-wordpress-widgets/

0
Satish Gandham