Adicione classe ao before_widget de dentro de um widget personalizado

10

Eu tenho um widget personalizado simples que pede sua largura (que é usada mais tarde no front end). O campo de largura é um menu suspenso de seleção, portanto, um usuário tem opções predefinidas.

Eu terei muitas instâncias do meu widget, cada uma terá sua própria configuração de largura.

Agora, no meu código de widget, tenho o seguinte código:

echo $before_widget;

que resulta em:

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

O que eu gostaria de fazer é de alguma forma ligar a $before_widget e adicionar minha própria classe (a largura especificada na lista suspensa). Então, quero a seguinte marcação:

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

E se não houver nenhuma classe especificada, eu quero adicionar class="col480" .

Como faço para isso?

Obrigado pela ajuda! Dasha

    
por dashaluna 01.06.2011 / 14:00

5 respostas

14

Aha, então a variável $before_widget é uma string representando o elemento div: <div class="widget my" id="my-widget-1"> . Então, verifiquei o $before_widget da subcadeia "class" e adicionei meu $widget_width a ele.

O código é do meu arquivo 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
}

Eu queria adicionar minha variável $widget_width ao elemento div do widget dentro do meu próprio código do widget (embora eu tivesse acesso fácil à variável $widget_width ).

Espero que isso faça sentido e ajude alguém.

Obrigado, Dasha

    
por dashaluna 02.06.2011 / 17:30
9

você pode usar o gancho de filtro dynamic_sidebar_params para encontrar seu widget e adicionar suas classes a ele:

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

Outra forma encontrada para adicionar uma classe a um widget personalizado é usar a chave ' classname ' da sua função de construção, como em:

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

E não se esqueça de usar o padrão ' before_widget ' no seu tema ou se você usar register_sidebar() em function.php, faça assim:

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

Então, em todas as instâncias do seu widget, você terá a classe 'widget my-class-name' assim:

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

Você também pode chamar o construtor pai primeiro e, em seguida, anexar qualquer nome de classe desejado:

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

primeiro adicione uma classe de espaço reservado personalizada no construtor

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

Em seguida, substitua-o pelas classes de sua escolha com base nas opções do widget como esta

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

Você pode encontrar os detalhes com o exemplo em enlace

    
por Satish Gandham 12.03.2017 / 19:27
0

Você pode tentar 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;
}
    
por nenontwerp 03.10.2018 / 19:56