如何覆盖Siteorigin中的现有字段？

Question

我想为现有字段类型color创建一个自定义字段，这是Siteorigin包中的默认字段。基本上，我需要为color字段类型创建自己的UI和后端逻辑。

由于这个字段在许多地方都使用，如果我可以直接覆盖字段类型，那么每个地方都会自动工作。

我搜索了很多次，还挖掘了小部件包的源代码等等，但是找不到我需要的东西，甚至我尝试用0优先级(最高)加载我的字段文件夹，但是没有工作。它仍然显示默认的颜色字段类型。

有人能告诉我一些操作或过滤器，这样我就可以用相同类型的color取消注册和重新注册了吗？或者其他可能的解决办法？

更新

我的问题重点是Siteorigin，Bundle插件。

我不想仅仅覆盖任何样式变量，而是要覆盖现有字段。经过一些研究，我发现了两个可以用来覆盖现有字段的过滤器：

// Give other plugins a way to modify this form.
$form_options = apply_filters( 'siteorigin_widgets_form_options', $form_options, $this );
$form_options = apply_filters( 'siteorigin_widgets_form_options_' . $this->id_base, $form_options, $this );

这两个过滤器在类form_options()中的方法SiteOrigin_Widget中被调用，但是这个方法被调用如下：

public function form( $instance, $form_type = 'widget' ) {

    if( $form_type == 'widget' ) {
        if( empty( $this->form_options ) ) {
            $this->form_options = $this->form_options();
        }
        $form_options = $this->form_options;
    }

...
...

}

但是看起来$this->form_options从来都不是空的，因此，方法$this->form_options()从来没有被调用过，这反过来也不会应用过滤器siteorigin_widgets_form_options和siteorigin_widgets_form_options_<id_base>。

因此，使用这种方法修改表单字段的机会就变成了zero。

我基本上需要的是。有一个现有的字段color，我还有另一个自定义字段adv-color。现在，挑战是将color字段的所有实例重写为adv-color，从而覆盖该字段的每个实例。但是，这仍然是一个希望。

请告诉我，如果我的方法是错误的，或有其他方法来解决这个问题。例(S)是/非常期望的。

Answer 1

有人能告诉我一些操作或过滤器，这样我就可以用相同类型的color取消注册和重新注册了吗？或者其他可能的解决办法？

我不认为有一种方法可以取消注册和重新注册color字段类型(或生成器)。

但是，如果您想自定义字段的UI (甚至完全改变它的外观n‘class )，您可以创建一个PHP class，它扩展了其中一个classes：SiteOrigin_Widget_Field_Base、SiteOrigin_Widget_Field_Text_Input_Base或SiteOrigin_Widget_Field_Color。下面是一个简单的例子：

// File: class-my-siteorigin-widget-field-color.php
class My_SiteOrigin_Widget_Field_Color extends SiteOrigin_Widget_Field_Color {

    public function enqueue_scripts() {
        // Enqueues custom CSS and/or JS files, if any.

        wp_enqueue_script( 'my-script', 'path/to/file.js', [ 'jquery' ], '20180601' );
        wp_enqueue_style( 'my-custom-stylesheet', 'path/to/file.css', [], '20180601' );
    }

    // Here you can modify the field's UI to your liking. Even a totally new UI.
    protected function render_field( $value, $instance ) {
        ?>
        <b>Text before</b>
        <input type="<?php echo esc_attr( $this->input_type ) ?>"
               name="<?php echo esc_attr( $this->element_name ) ?>"
               id="<?php echo esc_attr( $this->element_id ) ?>"
                 value="<?php echo esc_attr( $value ) ?>"
                 <?php $this->render_data_attributes( $this->get_input_data_attributes() ) ?>
                 <?php $this->render_CSS_classes( $this->get_input_classes() ) ?>
            <?php if ( ! empty( $this->placeholder ) ) echo 'placeholder="' . esc_attr( $this->placeholder ) . '"' ?>
            <?php if( ! empty( $this->readonly ) ) echo 'readonly' ?> />
        <i>Text after</i>
        <?php
    }

    // See `SiteOrigin_Widget_Field_Base` for all the properties and methods you
    // can extend. See also `SiteOrigin_Widget_Field_Text_Input_Base`, which is
    // being extended by `SiteOrigin_Widget_Field_Color`.
}

然后，您应该在/在class的init钩子中加载WordPress。示例：

add_action( 'init', function(){
    require_once __DIR__ . '/includes/class-my-siteorigin-widget-field-color.php';
} );

然后，要强制color字段使用自定义class (上面)，将class名称前缀添加到下面的$prefixes array：

add_filter( 'siteorigin_widgets_field_class_prefixes', function( $prefixes ){
    return array_merge( [ 'My_SiteOrigin_Widget_Field_' ], $prefixes );
} );

不幸的是，您不能从unset列表中删除SiteOrigin_Widget_Field_Color，因为上面的过滤器只允许您过滤class名称前缀。

但是在上面的示例回调中，自定义My_SiteOrigin_Widget_Field_Color将首先被SiteOrigin小部件绑定插件“看到”；因此，color字段将使用自定义class代替默认的class--即SiteOrigin_Widget_Field_Color。

有关此问题的详细信息，请参阅SiteOrigin_Widget_Field_Factory::get_class_prefixes()和整个SiteOrigin_Widget_Field_Factory源代码。和SiteOrigin_Widget::form()。

另请参阅：

• SiteOrigin_Widget_Field_Base
• SiteOrigin_Widget_Field_Text_Input_Base
• SiteOrigin_Widget_Field_Color

更新

但是看起来$this->form_options从来都不是空的，因此，方法$this->form_options()从来没有被调用过，这反过来也不会应用过滤器siteorigin_widgets_form_options和siteorigin_widgets_form_options_<id_base>。 因此，使用这种方法修改表单字段的机会就变成了zero。

下面的示例可能对您有所帮助：(或者更确切地说，它对我很有用)

// Extends the fields for the Button widget.
// @see SiteOrigin_Widget_Button_Widget::get_widget_form()
// @see SiteOrigin_Widget::form_options()
add_filter( 'siteorigin_widgets_form_options_sow-button', function( $form_options, $widget ){
    if ( isset( $form_options['button_icon'] ) ) {
        // `icon_color` is an existing/built-in field for the Button widget. So
        // in this example, we change the `label` from 'Icon color' to 'Icon
        // default color'.
        $form_options['button_icon']['fields']['icon_color']['label'] = 'Icon default color';

        // Or you could completely override the field:
        /*
        $form_options['button_icon']['fields']['icon_color'] = [
            'type'  => 'custom_type_here',
            'label' => 'Icon color',
        ];
        */

        // And here, we add a new field: A color for the button's `hover` state.
        $form_options['button_icon']['fields']['icon_hover_color'] = [
            'type'  => 'color',
            'label' => 'Icon hover color',
        ];
    }

    return $form_options;
}, 10, 2 );

// Callback to handle the `icon_hover_color`.
add_action( 'siteorigin_widgets_after_widget_sow-button', function( $instance, $widget ){
    if ( isset( $instance['button_icon'], $instance['button_icon']['icon_hover_color'] ) ) {
        $selector = $widget->is_preview( $instance ) ?
            '.so-widget-sow-button' : '#' . $widget->id;
        ?>
            <style>
                <?= $selector ?> a:hover .sow-icon-fontawesome {
                    color: <?= $instance['button_icon']['icon_hover_color'] ?> !important;
                }
            </style>
        <?php
    }
}, 10, 2 );

但是，即使将color字段设置为其他type (例如adv_color)，仍然需要创建适当的PHP class，然后通过siteorigin_widgets_field_class_prefixes钩子添加class名称前缀。

Answer 2

(注:这个答案是给https://stackoverflow.com/revisions/50477245/1的。这个问题在这个答案发布后被修改了，所以下面的答案看起来不像是当前状态下问题的正确答案。)

SiteOrigin Widget束附带了各种各样的小部件。

每个小部件利用较少变量编译自己的css。

由于您可以显式地更改每个小部件的颜色，这些变量将存储在数据库中，并分别为每个小部件检索，然后编译成特定于小部件的CSS文件。这发生在小部件的"Save“上，CSS缓存7天。

为了覆盖这些小部件的变量，您可以选择几个不同的筛选器(请参阅siteorigin-widget.class.php插件文件get_instance_css方法，从第816行开始查看执行此操作的代码)。FYI --您将希望这样做，因为这是一个针对所有各个小部件的“基类”。

滤波器1:

$vars = apply_filters( 'siteorigin_widgets_less_variables_' . $this->id_base, $this->get_less_variables( $instance ), $instance, $this );

这将是一个理想的地方，因为$vars是一个由所有定义的颜色组成的数组，您可以轻松地覆盖任何您喜欢的颜色。但是，问题是这个过滤器很难利用，因为它会在小部件的id_base中进行烘焙，从而产生像siteorigin_widgets_less_variables_sow-accordion这样的过滤器标记--但是，理论上，您可以设置一个筛选器的长列表，每个小部件一个过滤器，它们都通过相同的函数运行。

滤波器2:

在该过滤器之后不久，就有了一个过滤器，但是较少的变量已经被“写入”到“较少的”中：

$less = apply_filters( 'siteorigin_widgets_styles', $less, $this->widget_class, $instance );

这是需要使用的过滤器，但是您需要知道要替换的变量较少的名称。这份清单(至少其中一些)是：

$vars = ‌array (
  'heading_background_color'       => '',
  'heading_background_hover_color' => '',
  'title_color'                    => '',
  'title_hover_color'              => '',
  'heading_border_color'           => '',
  'heading_border_hover_color'     => '',
  'heading_border_width'           => '',
  'has_heading_border_width'       => '',
  'panels_background_color'        => '',
  'panels_font_color'              => '',
  'panels_border_color'            => '',
  'panels_border_width'            => '',
  'has_panels_border_width'        => '',
  'panels_margin_bottom'           => '',
}

构建一个解决方案：

有了这些信息，我们可以应用如下过滤器：

function my_siteorigin_override_less( $less ) {
    // you'll need to load your override colors here.  that is outside the scope of this question / answer
    $my_colors = array(
      'heading_background_color'       => '#fff',
      'heading_background_hover_color' => '#ff0',
      'title_color'                    => '#000'
      // any other colors you want to include / override....
    );

    foreach( $my_colors as $name => $value ) {
        // Ignore empty string, false and null values (but keep '0')
        if( ! empty( $value ) ) {
            $less = preg_replace('/\@'.preg_quote($name).' *\:.*?;/', '@'.$name.': '.$value.';', $less);
        }
    }

    return $less;
}

add_filter( 'siteorigin_widgets_styles', 'my_siteorigin_override_less' );

对上述代码进行了测试，并证明其工作正常。

备注：

SiteOrigin“缓存”它构建7天的CSS。这意味着，如果您已经设置了小部件，并且更改了默认颜色，则在缓存被清除之前，这些更改不会被反映出来。

在SiteOrigin代码中有一个实用程序方法，您可以在需要时使用它来“清除”缓存。我建议您在保存/更新“默认”颜色时，随时执行以下操作：

if ( is_callable( 'SiteOrigin_Widget', 'clear_file_cache' ) ) {
    // pass TRUE to force delete
    SiteOrigin_Widget::clear_file_cache( TRUE );
}