Thêm lớp vào before_widget từ trong một widget tùy chỉnh


10

Tôi có một tiện ích tùy chỉnh đơn giản yêu cầu chiều rộng của nó (được sử dụng sau này trong giao diện người dùng). Trường chiều rộng là một menu thả xuống chọn, vì vậy người dùng có các tùy chọn được xác định trước.

Tôi sẽ có nhiều phiên bản của widget, mỗi cái sẽ có thiết lập chiều rộng riêng.

Bây giờ, trong mã widget của tôi, tôi có đoạn mã sau:

echo $before_widget;

kết quả là:

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

Những gì tôi muốn làm là bằng cách nào đó móc vào $before_widgetvà thêm lớp của riêng tôi (chiều rộng được chỉ định từ danh sách thả xuống được chọn). Vì vậy, tôi muốn đánh dấu sau:

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

Và nếu không có lớp được chỉ định thì tôi muốn thêm class="col480".

Làm thế nào để tôi đạt được điều này?

Cảm ơn vì sự giúp đỡ! Dasha

Câu trả lời:


14

Aha, vì vậy $before_widgetbiến là một chuỗi đại diện cho phần tử div : <div class="widget my" id="my-widget-1">. Vì vậy, tôi đã kiểm tra chuỗi $before_widgetcon "class" và thêm $widget_widthgiá trị của mình vào chuỗi đó.

Mã này là từ tập tin widget tùy chỉnh của tôi:

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
}

Tôi muốn thêm $widget_widthbiến của mình vào phần tử div widget trong mã widget của riêng tôi (trong khi tôi có quyền truy cập dễ dàng vào $widget_widthbiến).

Hy vọng rằng có ý nghĩa và sẽ giúp đỡ một ai đó.

Cảm ơn, Dasha


công việc tốt - đã giúp tôi giải quyết vấn đề về widget - cảm ơn :)
Q Studio

10

bạn có thể sử dụng dynamic_sidebar_paramshook bộ lọc để tìm widget của bạn và thêm các lớp của bạn vào nó:

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

Cảm ơn vi đa trả lơi. Tôi sẽ có rất nhiều phiên bản của tiện ích tùy chỉnh của mình, mỗi tiện ích có chiều rộng cụ thể của riêng chúng. Đó là lý do tại sao tôi muốn thêm lớp bổ sung trong chính mã widget, thay vì thông qua bộ lọc. Hy vọng điều đó có ý nghĩa?
dashaluna

tùy chọn cá thể cũng được lưu trong bảng tùy chọn để bạn có thể lấy nó từ đó một khi bạn biết id widget bằng cách sử dụngget_option('widget-name')
BaiNET

1
cảm ơn sự giúp đỡ của bạn! Tôi xin lỗi tôi không thực sự hiểu giải pháp của bạn :( Và tôi muốn tất cả mã nằm trong tệp tiện ích tùy chỉnh của mình, trong khi tôi có thể dễ dàng truy cập vào biến chiều rộng. Tôi đã kết thúc việc hack $before_widgetchuỗi. theo dõi đúng phát hiện ra đó $before_widgetlà một chuỗi. Cảm ơn một lần nữa :)
dashaluna

Đây sẽ là một tùy chọn ưa thích vì nó sử dụng các bộ lọc wordpress thay vì chỉnh sửa các tệp chủ đề
rhysclay 15/03/2017

6

Một cách khác mà tôi tìm thấy để thêm một lớp cho một tiện ích tùy chỉnh là sử dụng khóa ' tên lớp ' của hàm xây dựng của bạn như trong:

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

Và hãy chắc chắn sử dụng ' before_widget ' mặc định trong chủ đề của bạn hoặc nếu bạn sử dụng register_sidebar()trong function.php, hãy làm như thế này:

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

Sau đó, trên mọi phiên bản của tiện ích con của bạn, bạn sẽ có lớp 'tiện ích tên lớp của tôi' như thế này:

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

Bạn cũng có thể gọi hàm tạo của cha trước và sau đó nối bất kỳ tên lớp nào bạn muốn:

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

đầu tiên thêm một lớp giữ chỗ tùy chỉnh trong hàm tạo

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

Sau đó thay thế nó bằng lớp / es bạn chọn dựa trên các tùy chọn widget như thế này

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

Bạn có thể tìm thấy các chi tiết với ví dụ tại http://satishgandham.com/2017/03/adding-dynamic-groupes-custom-wordpress-widgets/


0

Bạn có thể thử bộ lọc này:

/**
 * 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;
}
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.