Aggiungi classe a before_widget da un widget personalizzato


10

Ho un semplice widget personalizzato che chiede la sua larghezza (che verrà utilizzato in seguito nel front-end). Il campo larghezza è un menu a discesa selezionato, quindi un utente ha opzioni predefinite.

Avrò molte istanze del mio widget, ognuna avrà la propria configurazione di larghezza.

Ora, nel mio codice widget ho il seguente codice:

echo $before_widget;

che si traduce in:

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

Quello che mi piacerebbe fare è in qualche modo agganciarmi $before_widgete aggiungere la mia classe (la larghezza specificata dal menu a discesa Seleziona). Quindi, voglio il seguente markup:

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

E se non è stata specificata alcuna classe, allora voglio aggiungere class="col480".

Come posso raggiungere questo obiettivo?

Grazie per l'aiuto! Dasha

Risposte:


14

Ah, quindi la $before_widgetvariabile è una stringa che rappresenta div elemento: <div class="widget my" id="my-widget-1">. Quindi ho controllato la $before_widgetsotto-stringa "class" e ho aggiunto il mio $widget_widthvalore.

Il codice proviene dal mio file widget personalizzato:

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
}

Volevo aggiungere la mia $widget_widthvariabile all'elemento div del widget all'interno del mio codice del widget (mentre avevo un facile accesso alla $widget_widthvariabile).

Spero che abbia un senso e aiuterà qualcuno.

Grazie Dasha


bel lavoro - mi ha aiutato con un problema con il widget - grazie :)
Q Studio

10

puoi usare il dynamic_sidebar_paramsfiltro hook per trovare il tuo widget e aggiungere le tue classi ad esso:

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

Grazie per la risposta. Avrò molte istanze del mio widget personalizzato, ognuna con la propria larghezza specifica. Ecco perché volevo aggiungere ulteriore classe all'interno del codice del widget stesso, anziché tramite filtro. Spero che abbia senso?
dashaluna,

bene le opzioni di istanza sono salvate nella tabella delle opzioni in modo da poterle ottenere da lì una volta che conosci l'id del widget usandoget_option('widget-name')
Bainternet

1
Grazie mille per il vostro aiuto! Mi dispiace di non capire davvero la tua soluzione :( E volevo che tutto il codice fosse nel mio file widget personalizzato, mentre potevo facilmente accedere alla variabile width. Ho finito per hackerare la $before_widgetstringa. La tua risposta mi ha portato sul pista giusta scoprendo che $before_widgetè una stringa. Grazie ancora :)
dashaluna

Questa sarebbe un'opzione preferita in quanto utilizza filtri wordpress anziché modificare i file dei temi
rhysclay

6

Un altro modo che ho trovato per aggiungere una classe per un widget personalizzato è usare il tasto ' classname ' della tua funzione di costruzione come in:

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 assicurati di usare predefinito ' before_widget ' nel tuo tema o se lo usi register_sidebar()in function.php, fallo in questo modo:

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

Quindi su ogni istanza del tuo widget, avrai la classe 'widget my-class-name' in questo modo:

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

Puoi anche chiamare prima il costruttore principale e quindi aggiungere qualsiasi nome di classe desideri:

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

1

prima aggiungi una classe segnaposto personalizzata nel costruttore

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

Quindi sostituiscilo con le classi di tua scelta in base alle opzioni del widget in questo modo

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

Puoi trovare i dettagli con l'esempio su http://satishgandham.com/2017/03/adding-dynamic-classes-custom-wordpress-widgets/


0

Puoi provare questo 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;
}
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.