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

Question

我想为现有字段类型创建一个自定义字段color,默认来自Siteorigin小部件包.基本上,我需要为color字段类型创建自己的UI和后端逻辑.

由于此字段在许多地方使用,如果我可以直接覆盖字段类型,将自动在每个地方工作.

我搜索了很多次,也挖掘了小部件包和SO本身的源代码,但找不到我需要的东西,即使我试图加载我的字段文件夹0优先级(最高)但是没有用.它仍然显示默认的颜色字段类型.

任何人都可以指出我的某些动作或过滤器,这样,我可以取消注册并重新注册相同的类型color？或者,如果有其他可能的解决方法？

---

UPDATE

我的问题重点是Siteorigin Widgets Bundle Plugin.

我不想只覆盖任何样式变量,而是想覆盖现有字段.经过一些研究,我找到了2个可用于覆盖现有字段的过滤器:

// 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因此覆盖了字段的每个实例.但是,它仍然是一个希望.

如果我的方法有问题或者有其他方法可以解决这个问题,请告诉我.非常期待实例.

Answer 1

任何人都可以向我指出一些操作或过滤器，以便我可以取消注册并重新注册相同的类型吗color？或者是否还有其他可能的解决方法？

我没有看到取消注册和重新注册color字段类型（或生成器）的方法。

但是，如果您想要自定义字段的UI（或者甚至完全改变其外观），您可以创建一个class扩展以下classes 之一的 PHP：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`.
}

然后，您应该在 WordPress 中加载classin/duringinit挂钩。例子：

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_Colorclassclass

但在上面的回调示例中，自定义My_SiteOrigin_Widget_Field_Color将首先被 SiteOrigin Widgets Bundle 插件“看到”；因此，color字段将使用自定义字段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，然后通过挂钩添加class名称前缀siteorigin_widgets_field_class_prefixes。