问题描述

我有一个简单的自定义小工具,要求其宽度 (稍后在前端使用) 。宽度字段是选择下拉列表,因此用户具有预定义的选项。

我将有很多我的小工具的实例,每个都将有自己的宽度设置。

现在,在我的小工具代码中,我有以下代码:

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"

我该如何实现?

感谢帮助!大傻

最佳解决方案

Aha,所以 $before_widget 变量是一个表示 div 元素的字符串:<div class="widget my" id="my-widget-1"> 。所以我检查了 $before_widget 的”class” sub-string,并添加了我的 $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 变量) 。

希望有意义并且会帮助某人。

谢谢大沙

次佳解决方案

您可以使用 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;
} 

第三种解决方案

我发现为自定义窗口小工具添加一个类的另一种方法是使用您的构造函数的’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’,或者如果在 function.php 中使用 register_sidebar(),请执行以下操作:

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

参考文献

注:本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意,可以加入我们改善翻译效果:薇晓朵技术论坛。