問題描述

我有一個簡單的自定義小工具,要求其寬度 (稍後在前端使用) 。寬度字段是選擇下拉列表,因此用户具有預定義的選項。

我將有很多我的小工具的實例,每個都將有自己的寬度設置。

現在,在我的小工具代碼中,我有以下代碼:

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 輔助翻譯的英文資料結果。如果您對結果不滿意,可以加入我們改善翻譯效果:薇曉朵技術論壇。