web-dev-qa-db-fra.com

Ajouter une classe à before_widget depuis un widget personnalisé

J'ai un widget personnalisé simple qui demande sa largeur (qui est utilisé plus tard dans le front-end). 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 de nombreuses 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 raccorder à $before_widget et ajouter ma propre classe (la largeur spécifiée dans la liste déroulante 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 arriver?

Merci pour l'aide! Dasha

widgetshackscore-modifications
10
dashaluna

Aha, la variable $before_widget est donc une chaîne représentant l'élément div: <div class="widget my" id="my-widget-1">. J'ai donc vérifié le $before_widget pour la sous-chaîne "class" 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

14
dashaluna

vous pouvez utiliser le crochet de filtre 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;
}
9
Bainternet

Une autre méthode que j'ai trouvée pour ajouter une classe à un widget personnalisé consiste à utiliser la clé ' classname ' 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 d'abord appeler le constructeur parent, puis ajouter le nom de classe souhaité:

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';
    }
}
6
anou

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'] );
}
?>

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

1
Satish Gandham

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;
}
0
nenontwerp