Tambahkan kelas ke before_widget dari dalam widget khusus


10

Saya memiliki widget khusus sederhana yang meminta lebarnya (yang digunakan kemudian di ujung depan). Bidang lebar adalah dropdown pilih, sehingga pengguna memiliki opsi yang telah ditentukan.

Saya akan memiliki banyak contoh widget saya, masing-masing akan memiliki pengaturan lebar sendiri.

Sekarang, dalam kode widget saya, saya memiliki kode berikut:

echo $before_widget;

yang mengakibatkan:

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

Apa yang ingin saya lakukan adalah entah bagaimana menghubungkan ke $before_widgetdan menambahkan kelas saya sendiri (lebar yang ditentukan dari dropdown pilih). Jadi, saya ingin markup berikut:

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

Dan jika tidak ada kelas yang ditentukan maka saya ingin menambahkan class="col480".

Bagaimana saya mencapai ini?

Terimakasih atas bantuannya! Dasha

Jawaban:


14

Aha, sehingga $before_widgetvariabel adalah string yang mewakili elemen div: <div class="widget my" id="my-widget-1">. Jadi saya memeriksa $before_widgetsub-string "class" dan menambahkan $widget_widthnilai saya ke dalamnya.

Kode ini dari file widget khusus saya:

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
}

Saya ingin menambahkan $widget_widthvariabel saya ke elemen div widget dalam kode widget saya sendiri (sementara saya memiliki akses mudah ke $widget_widthvariabel).

Semoga itu masuk akal dan akan membantu seseorang.

Terima kasih, Dasha


kerja bagus - membantu saya keluar dengan masalah widget - terima kasih :)
Q Studio

10

Anda dapat menggunakan dynamic_sidebar_paramsfilter hook untuk menemukan widget Anda dan menambahkan kelas Anda ke dalamnya:

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

Terima kasih balasannya. Saya akan memiliki banyak contoh widget khusus saya masing-masing dengan lebar spesifik mereka sendiri. Itu sebabnya saya ingin menambahkan kelas tambahan di dalam kode widget itu sendiri, bukan melalui filter. Harapan itu masuk akal?
dashaluna

baik contoh opsi disimpan dalam tabel opsi sehingga Anda bisa mendapatkannya dari sana setelah Anda tahu id widget menggunakanget_option('widget-name')
Bainternet

1
terima kasih banyak atas bantuan anda! Maaf saya tidak benar-benar memahami solusi Anda :( Dan saya ingin semua kode berada dalam file widget khusus saya, sementara saya dapat dengan mudah mengakses variabel lebar. Saya akhirnya meretas $before_widgetstring. Jawaban Anda membuat saya pada jalur yang tepat menemukan itu $before_widgetadalah string. Terima kasih lagi :)
dashaluna

Ini akan menjadi pilihan yang lebih disukai karena menggunakan filter wordpress daripada mengedit file tema
rhysclay

6

Cara lain yang saya temukan untuk menambahkan kelas untuk widget khusus adalah dengan menggunakan kunci ' classname ' dari fungsi konstruk Anda seperti di:

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

Dan pastikan untuk menggunakan default ' before_widget ' di tema Anda atau jika Anda menggunakan register_sidebar()di function.php, lakukan seperti ini:

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

Kemudian pada setiap instance widget Anda, Anda akan memiliki kelas 'widget my-class-name' seperti ini:

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

Anda juga dapat memanggil induk konstruktor terlebih dahulu dan kemudian menambahkan nama kelas apa pun yang Anda inginkan:

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

pertama-tama tambahkan kelas placeholder khusus di konstruktor

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

Kemudian gantilah dengan kelas / pilihan Anda berdasarkan pada opsi widget seperti ini

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

Anda dapat menemukan detailnya dengan contoh di http://satishgandham.com/2017/03/adding-dynamic-classes-custom-wordpress-widgets/


0

Anda dapat mencoba filter ini:

/**
 * 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;
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.