Agregar clase a before_widget desde un widget personalizado

10

Tengo un widget personalizado simple que solicita su ancho (que se usa más adelante en el extremo delantero). El campo de ancho es un menú desplegable de selección, por lo que un usuario tiene opciones predefinidas.

Tendré muchas instancias de mi widget, cada una tendrá su propia configuración de ancho.

Ahora, en mi código de widget tengo el siguiente código:

echo $before_widget;

que resulta en:

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

Lo que me gustaría hacer es engancharse de alguna manera en $before_widget y agregar mi propia clase (el ancho especificado del menú desplegable de selección). Por lo tanto, quiero el siguiente marcado:

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

Y si no hay una clase especificada, quiero agregar class="col480" .

¿Cómo logro esto?

¡Gracias por ayuda! Dasha

    
pregunta dashaluna 01.06.2011 - 14:00

5 respuestas

14

Aha, entonces la variable $before_widget es una cadena que representa el elemento div: <div class="widget my" id="my-widget-1"> . Así que verifiqué $before_widget para la subcadena "clase" y le agregué mi valor $widget_width .

El código es de mi archivo de widget personalizado:

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
}

Quería agregar mi variable $widget_width al elemento div del widget dentro de mi propio código de widget (mientras tenía un acceso fácil a la variable $widget_width ).

Espero que tenga sentido y ayude a alguien.

Gracias, Dasha

    
respondido por el dashaluna 02.06.2011 - 17:30
9

puedes usar dynamic_sidebar_params filter hook para encontrar tu widget y agregarle clases:

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;
} 
    
respondido por el Bainternet 01.06.2011 - 15:03
6

Otra forma que encontré para agregar una clase para un widget personalizado es usar la tecla ' classname ' de tu función de construcción como en:

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);
        }
}

Y asegúrese de usar el valor predeterminado ' before_widget ' en su tema o si usa register_sidebar() en function.php, hágalo así:

//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>',
        ));

Luego, en cada instancia de su widget, tendrá la clase 'widget my-class-name' de esta manera:

<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>

También puede llamar primero al constructor principal y luego agregar el nombre de clase que desee:

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';
    }
}
    
respondido por el anou 12.02.2014 - 14:52
1

primero agregue una clase de marcador de posición personalizada en el constructor

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

Luego sustitúyalo por la clase de su elección en función de las opciones de widget como esta

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

Puedes encontrar los detalles con el ejemplo en enlace

    
respondido por el Satish Gandham 12.03.2017 - 19:27
0

Puedes probar este filtro:

/**
 * 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;
}
    
respondido por el nenontwerp 03.10.2018 - 19:56

Lea otras preguntas en las etiquetas