Ajouter une classe à before_widget depuis un widget personnalisé

10

J'ai un simple widget personnalisé qui demande sa largeur (qui sera utilisé plus tard dans le frontal). Le champ de largeur est une liste déroulante de sélection, de sorte qu'un utilisateur dispose d'options prédéfinies.

J'aurai plusieurs instances de mon widget, chacune aura sa propre configuration de largeur.

Maintenant, dans mon code de widget, j'ai le code suivant:

echo $before_widget;

qui se traduit par:

<div class="widget my" id="my-widget-1"></div>

Ce que j'aimerais faire, c'est en quelque sorte accrocher à $before_widget et ajouter ma propre classe (la largeur spécifiée dans le menu déroulant de sélection). Donc, je veux le balisage suivant:

<div class="widget my col480" id="my-widget-3"></div>

Et si aucune classe n'est spécifiée, je souhaite ajouter class="col480" .

Comment puis-je y parvenir?

Merci pour votre aide! Dasha

    
posée dashaluna 01.06.2011 - 14:00

5 réponses

14

Aha, la variable $before_widget est une chaîne représentant l'élément div: <div class="widget my" id="my-widget-1"> . J'ai donc vérifié la sous-chaîne "classe" dans $before_widget et y ai ajouté ma valeur $widget_width .

Le code provient de mon fichier de widget personnalisé:

function widget( $args, $instance ) {
  extract( $args );
  ... //other code

  $widget_width = !empty($instance['widget_width']) ? $instance['widget_width'] : "col300";
  /* Add the width from $widget_width to the class from the $before widget */
  // no 'class' attribute - add one with the value of width
  if( strpos($before_widget, 'class') === false ) {
    // include closing tag in replace string
    $before_widget = str_replace('>', 'class="'. $widget_width . '">', $before_widget);
  }
  // there is 'class' attribute - append width value to it
  else {
    $before_widget = str_replace('class="', 'class="'. $widget_width . ' ', $before_widget);
  }
  /* Before widget */
  echo $before_widget;

  ... //other code
}

Je voulais ajouter ma variable $widget_width à l'élément div du widget dans mon propre code de widget (alors que j'avais un accès facile à la variable $widget_width ).

J'espère que cela a du sens et aidera quelqu'un.

Merci, Dasha

    
réponse donnée dashaluna 02.06.2011 - 17:30
9

vous pouvez utiliser le crochet de filtrage dynamic_sidebar_params pour trouver votre widget et y ajouter vos classes:

add_filter('dynamic_sidebar_params', 'add_classes_to__widget'); 
function add_classes_to__widget($params){
    if ($params[0]['widget_id'] == "my-widget-1"){ //make sure its your widget id here
        // its your widget so you add  your classes
        $classe_to_add = 'col480 whatever bla bla '; // make sure you leave a space at the end
        $classe_to_add = 'class=" '.$classe_to_add;
        $params[0]['before_widget'] = str_replace('class="',$classe_to_add,$params[0]['before_widget']);
    }
    return $params;
} 
    
réponse donnée Bainternet 01.06.2011 - 15:03
6

Une autre façon d'ajouter une classe à un widget personnalisé consiste à utiliser la clé ' nom de classe "de votre fonction de construction, comme dans:

class My_Widget_Class extends WP_Widget {
// Prior PHP5 use the children class name for the constructor…
// function My_Widget_Class()
       function __construct() {
            $widget_ops = array(
                'classname' => 'my-class-name',
                'description' => __("Widget for the sake of Mankind",'themedomain'),
            );
            $control_ops = array(
                'id_base' => 'my-widget-class-widget'
            );
   //some more code after...

   // Call parent constructor you may substitute the 1st argument by $control_ops['id_base'] and remove the 4th.
            parent::__construct(@func_get_arg(0),@func_get_arg(1),$widget_ops,$control_ops);
        }
}

Et assurez-vous d'utiliser la valeur par défaut before_widget dans votre thème ou si vous utilisez register_sidebar() dans function.php, procédez comme suit:

//This is just an example.
register_sidebar(array(
          'name'=> 'Sidebar',
            'id' => 'sidebar-default',
            'class' => '',//I never found where this is used...
            'description' => 'A sidebar for Mankind',
            'before_widget' => '<aside id="%1$s" class="widget %2$s">',//This is the important code!!
            'after_widget' => '</aside>',
            'before_title' => '<h3>',
            'after_title' => '</h3>',
        ));

Ensuite, sur chaque instance de votre widget, vous aurez la classe 'widget my-class-name' comme ceci:

<aside class="widget my-class-name" id="my-widget-class-widget-N"><!-- where N is a number -->
  <h3>WIDGET TITLE</h3>
  <p>WIDGET CONTENT</p>
</aside>

Vous pouvez également appeler d'abord le constructeur parent, puis ajouter le nom de classe de votre choix:

class My_Widget_Class extends WP_Widget {
    // Better defining the parent argument list …
    function __construct($id_base, $name, $widget_options = array(), $control_options = array())
    {    parent::__construct($id_base, $name, $widget_options, $control_options);
         // Change the class name after
         $this->widget_options['classname'].= ' some-extra';
    }
}
    
réponse donnée anou 12.02.2014 - 14:52
1

ajoutez d'abord une classe d'espaces réservés 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 );
}
?>

Ensuite, remplacez-le par la classe / les choix 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'] );
}
?>

Vous pouvez trouver les détails avec l'exemple à enlace

    
réponse donnée Satish Gandham 12.03.2017 - 19:27
0

Vous pouvez essayer ce filtre:

/**
 * This function loops through all widgets in sidebar 
 * and adds a admin form value to the widget as a class name  
 *  
 * @param array $params Array of widgets in sidebar
 * @return array
*/

add_filter( 'dynamic_sidebar_params', 'nen_lib_add_class_to_widget' );
function nen_lib_add_class_to_widget( $params )
{
    foreach( $params as $key => $widget )
    {
        if( !isset($widget['widget_id']) ) continue;

        // my custom function to get widget data from admin form (object)
        $widget_data = nen_get_widget_data($widget['widget_id']) ;

        // check if field excists and has value
        if( isset($widget_data->wm_name) && $widget_data->wm_name )
        {
            // convert and put value in array
            $classes = array( sanitize_title( $widget_data->wm_name ) );

            // add filter, to be able to add more
            $classes = apply_filters( 'nen_lib_add_class_to_widget' , $classes , $widget['widget_id'] , $widget , $widget_data  );

            // get 'before_widget' element, set find and replace
            $string     = $params[$key]['before_widget'];
            $find       = '"widget ';
            $replace    = '"widget '.implode( ' ' , $classes ).' ';

            // new value
            $new_before = str_replace( $find , $replace , $string ) ;

            // set new value
            $params[$key]['before_widget'] = $new_before;
        }
    }
    return $params;
}
    
réponse donnée nenontwerp 03.10.2018 - 19:56

Lire d'autres questions sur les étiquettes