사용자 정의 위젯에서 before_widget에 클래스 추가


10

너비를 묻는 간단한 사용자 정의 위젯이 있습니다 (프론트 엔드에서 나중에 사용됨). 너비 필드는 선택 드롭 다운이므로 사용자는 사전 정의 된 옵션을 갖습니다.

위젯의 인스턴스가 많이 있으며 각각 자체 너비 설정이 있습니다.

이제 위젯 코드에 다음 코드가 있습니다.

echo $before_widget;

결과 :

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

내가하고 싶은 것은 어떻게 든 $before_widget내 자신의 클래스 (선택 드롭 다운에서 지정된 너비)에 연결 하고 추가하는 것입니다. 따라서 다음 마크 업을 원합니다.

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

그리고 클래스가 지정되어 있지 않으면 추가하고 싶습니다 class="col480".

어떻게하면 되나요?

도와 주셔서 감사합니다! 다샤

답변:


14

Aha, $before_widget변수는 div 요소를 나타내는 문자열 <div class="widget my" id="my-widget-1">입니다. 그래서 $before_widget"class"하위 문자열을 확인하고 내 $widget_width값을 추가 했습니다.

코드는 내 사용자 정의 위젯 파일에서 가져온 것입니다.

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
}

$widget_width내 자신의 위젯 코드 내에서 위젯 div 요소에 변수 를 추가하고 싶었습니다 ( 변수에 쉽게 액세스 할 수있는 동안 $widget_width).

그것이 의미가 있고 누군가를 도울 것입니다 희망.

고마워, Dasha


좋은 일-위젯 문제로 나를 도와주었습니다-감사합니다 :)
Q Studio

10

dynamic_sidebar_params필터 후크를 사용 하여 위젯을 찾고 클래스를 추가 할 수 있습니다.

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

답장을 보내 주셔서 감사합니다. 각각의 고유 너비를 가진 많은 사용자 정의 위젯 인스턴스가 많이 있습니다. 그래서 필터를 통하지 않고 위젯 코드 자체에 클래스를 추가하고 싶었습니다. 그게 말이 되길 바래?
dashaluna

잘 인스턴스 옵션은 옵션 테이블에 저장되므로 다음을 사용하여 위젯 ID를 알면 거기에서 얻을 수 있습니다.get_option('widget-name')
Bainternet

1
도와 주셔서 정말로 고맙습니다! 죄송합니다. 솔루션을 이해하지 못합니다 :( 그리고 너비 변수에 쉽게 액세스 할 수있는 동안 모든 코드가 내 사용자 정의 위젯 파일에 포함되기를 원했습니다. $before_widget문자열 을 해킹하게 되었습니다. 그것이 $before_widget문자열 이라는 것을 발견하는 올바른 길 . 다시 감사합니다 :)
dashaluna

테마 파일을 편집하는 대신 워드 프레스 필터를 사용하기 때문에 선호되는 옵션입니다.
rhysclay

6

사용자 정의 위젯에 클래스를 추가하는 또 다른 방법 은 다음과 같이 구문 함수 의 ' classname '키 를 사용하는 것입니다.

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

그리고 테마에서 기본 ' before_widget '을 사용하거나 register_sidebar()function.php에서 사용하는 경우 다음 과 같이하십시오.

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

그런 다음 위젯의 모든 인스턴스에서 다음과 같이 'widget my-class-name'클래스를 갖습니다.

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

부모 생성자를 먼저 호출 한 다음 원하는 클래스 이름을 추가 할 수도 있습니다.

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

먼저 생성자에 사용자 정의 자리 표시 자 클래스를 추가하십시오.

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

그런 다음 다음과 같은 위젯 옵션을 기반으로 선택한 클래스로 바꿉니다.

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

자세한 내용은 http://satishgandham.com/2017/03/adding-dynamic-classes-custom-wordpress-widgets/ 에서 확인할 수 있습니다 .


0

이 필터를 사용해보십시오 :

/**
 * 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;
}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.