Wie überschreibe ich ein vorhandenes Feld in Siteorigin?

Lesezeit: 11 Minuten

Benutzer-Avatar
Sukanta Paul

Ich möchte ein benutzerdefiniertes Feld für den vorhandenen Feldtyp erstellen color, die Standardeinstellung aus dem Siteorigin-Widget-Bundle. Grundsätzlich das, was ich brauche, um meine eigene Benutzeroberfläche und Backend-Logik für die zu erstellen color Feldtyp.

Da dieses Feld an vielen Stellen verwendet wird, funktioniert es automatisch an jeder Stelle, wenn ich den Feldtyp direkt überschreiben könnte.

Ich habe viele Male gesucht und auch den Quellcode von Widgets Bundle und SO selbst durchsucht, konnte aber nicht finden, was ich brauchte, selbst wenn ich versuchte, meinen Fields-Ordner damit zu laden 0 Priorität (höchste), hat aber nicht funktioniert. Es zeigt immer noch den Standardfarbfeldtyp an.

Kann mir jemand einige Aktionen oder Filter zeigen, damit ich mich mit demselben Typ abmelden und erneut registrieren kann color? Oder ist eine andere Problemumgehung möglich?


AKTUALISIEREN

Meine Frage konzentriert sich auf Siteorigin-Widgets-Bundle-Plugin.

Ich möchte nicht nur irgendwelche Stilvariablen überschreiben, sondern vorhandene Felder überschreiben. Nach einiger Recherche habe ich 2 Filter gefunden, die verwendet werden könnten, um vorhandene Felder zu überschreiben:

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

Die beiden Filter werden in der Methode aufgerufen form_options() im Unterricht SiteOrigin_Widget aber diese Methode wird so aufgerufen:

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

...
...

}

Aber es sieht so aus $this->form_options ist niemals leer und so Methode $this->form_options() wird nie aufgerufen, was wiederum die Filter nie anwendet siteorigin_widgets_form_options und siteorigin_widgets_form_options_<id_base>

Und so wird meine Chance, die Formularfelder zu ändern zero mit diesem Ansatz.

Was ich grundsätzlich brauche ist für zB. Es gibt ein vorhandenes Feld color und ich habe ein weiteres benutzerdefiniertes Feld adv-color. Nun besteht die Herausforderung darin, alle Instanzen von zu überschreiben color Feld zu adv-color und somit wird jede Instanz des Felds überschrieben. Aber es ist immer noch eine Hoffnung.

Bitte lassen Sie mich wissen, wenn mein Ansatz falsch ist oder es einen anderen Weg gibt, dies zu lösen. Beispiel(e) wird/werden stark erwartet.

  • SiteOrigin ist ein Gesellschaft, daher ist es schwierig, sicher zu sein, auf welches Plugin / Widget Sie sich beziehen. Können Sie bitte einen Link zu dem spezifischen Plugin bereitstellen? Und – wenn es das “Widgets Bundle” ist (was Sie sagen), nach welchem ​​​​Widget fragen Sie konkret?

    – zufälliger_Benutzername

    26. Mai 2018 um 13:52 Uhr


  • @cale_b Sorry für die Verwirrung, ich meinte das Siteorigin Widgets Bundle Plugin.

    – Sukanta Paul

    27. Mai 2018 um 16:47 Uhr


  • Warum willst du das Vorhandene überschreiben? aufstellen? Meine Lösung für die erste Version dieser Frage überschreibt die Farbe erzeugt. Welchen Unterschied macht es, das Farbfeld in den Widget-Steuerelementen zu überschreiben, im Vergleich zum Überschreiben der Farbe Wert das ausgegeben wird, wenn das Widget gerendert wird?

    – zufälliger_Benutzername

    1. Juni 2018 um 13:36 Uhr

Kann mir jemand einige Aktionen oder Filter zeigen, damit ich mich mit demselben Typ abmelden und erneut registrieren kann color? Oder ist eine andere Problemumgehung möglich?

Ich sehe keine Möglichkeit, mich abzumelden und neu zu registrieren color aufstellen Typ (oder Generator).

Wenn Sie jedoch die Felder anpassen möchten Benutzeroberfläche (oder sogar sein Aussehen und Verhalten komplett ändern), können Sie ein PHP erstellen class die eine davon erweitert classes: SiteOrigin_Widget_Field_Base, SiteOrigin_Widget_Field_Text_Input_Baseoder SiteOrigin_Widget_Field_Color. Siehe ein einfaches Beispiel unten:

// 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`.
}

Anschließend sollten Sie die laden class in/während der init in WordPress einhaken. Beispiel:

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

Und dann zu zwingen color Felder, um die benutzerdefinierten zu verwenden class (oben), fügen Sie hinzu class Name Präfix zum $prefixes array unter:

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

Leider können Sie nicht unset oder entfernen SiteOrigin_Widget_Field_Color von dem class Liste, da Sie mit dem obigen Filter nur die filtern können class Name Präfixe.

Aber im obigen Beispiel-Callback ist das custom My_SiteOrigin_Widget_Field_Color würde zuerst vom SiteOrigin Widgets Bundle Plugin “gesehen” werden; somit, color Felder würden die benutzerdefinierten verwenden class anstelle der Standardeinstellung – dh SiteOrigin_Widget_Field_Color.

Näheres dazu siehe SiteOrigin_Widget_Field_Factory::get_class_prefixes() und das ganze SiteOrigin_Widget_Field_Factory Quellcode. Und SiteOrigin_Widget::form().

Siehe auch:

AKTUALISIEREN

Aber es sieht so aus $this->form_options ist niemals leer und so Methode
$this->form_options() wird nie aufgerufen, was wiederum die Filter nie anwendet siteorigin_widgets_form_options und
siteorigin_widgets_form_options_<id_base>

Und so wird meine Chance, die Formularfelder zu ändern zero mit diesem Ansatz.

Das folgende Beispiel kann Ihnen helfen: (oder besser gesagt, es hat bei mir gut funktioniert)

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

Aber auch wenn Sie die einstellen color Felder zu anderen type (z.B adv_color), müssen Sie noch das entsprechende PHP erstellen class und füge dann die hinzu class Name Präfix über die siteorigin_widgets_field_class_prefixes Haken.

  • Ja, ich verstehe, was du meinst. Lassen Sie mich das versuchen. Danke für deine Antwort.

    – Sukanta Paul

    3. Juni 2018 um 6:22 Uhr


  • Sieht so aus, als wäre es ein guter Workaround. Jetzt frage ich mich, warum überhaupt die Entwickler von Siteorigin Widgets Bundle diese Filter erstellt haben 'siteorigin_widgets_form_options' & 'siteorigin_widgets_form_options_' . $this->id_base. Und sogar sie kommentierten darüber: “Geben Sie anderen Plugins eine Möglichkeit, dieses Formular zu ändern.”. Und buchstäblich funktionieren sie nicht. Das ist lächerlich. Jedenfalls hat mir deine Antwort wirklich geholfen. Vielen Dank.

    – Sukanta Paul

    3. Juni 2018 um 6:38 Uhr


  • Tatsächlich funktioniert der Filter. Siehe das Beispiel in der aktualisierten Antwort.

    Benutzer9694859

    3. Juni 2018 um 13:35 Uhr

Benutzer-Avatar
random_user_name

(HINWEIS: Diese Antwort bezieht sich auf die ursprünglich gestellte Frage. Die Frage wurde geändert, nachdem diese Antwort gepostet wurde, sodass die folgende Antwort möglicherweise nicht die richtige Antwort auf die Frage in ihrem aktuellen Zustand zu sein scheint.)

SiteOrigin-Widget-Paket kommt mit einer Vielzahl von Widgets.

Jedes Widget kompiliert sein eigenes CSS unter Verwendung von WENIGER Variablen.

Da Sie die Farbe(n) für jedes Widget explizit ändern können, werden diese Variablen in der Datenbank gespeichert und für jedes einzelne Widget einzeln abgerufen und dann in Widget-spezifische CSS-Dateien kompiliert. Dies geschieht beim „Speichern“ des Widgets und das CSS wird für 7 Tage zwischengespeichert.

Um die Variablen für diese Widgets zu überschreiben, stehen Ihnen einige verschiedene Filter zur Auswahl (siehe die siteorigin-widget.class.php plugin-Datei, die get_instance_css -Methode, beginnend um Zeile 816 herum, um den Code zu sehen, der dies tut). Zu Ihrer Information, Sie sollten dies auf dieser Ebene tun, da dies eine “Basis” -Klasse für alle einzelnen Widgets ist.

Filter 1:

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

Dies wäre ein idealer Ort, weil $vars ist ein Array aller definierten Farben, und Sie können jede beliebige davon ganz einfach überschreiben. Jedochdas Problem ist, dass dieser Filter schwer zu nutzen wäre, da er in der backt id_base des Widgets, was zu Filter-Tags wie führt siteorigin_widgets_less_variables_sow-accordion – Sie könnten jedoch theoretisch eine lange Liste von Filtern einrichten, einen für jedes Widget, die alle dieselbe Funktion ausführen.

Filter 2:

Kurz danach gibt es einen Filter, aber die LESS-Variablen wurden bereits in LESS “geschrieben”:

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

Dies ist der Filter, der verwendet werden muss, aber Sie müssen die LESS-Variablennamen kennen, die Sie ersetzen möchten. Diese Liste (zumindest einige von ihnen) ist:

$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'           => '',
}

Erstellen einer Lösung:

Bewaffnet mit diesen Informationen können wir Filter wie folgt anwenden:

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

Der obige Code wurde getestet und funktioniert nachweislich.

Anmerkungen:

SiteOrigin „cacht“ das erstellte CSS für 7 Tage. Das bedeutet, dass, wenn Sie bereits Widgets eingerichtet haben und die Standardfarbe ändern, die Änderungen nicht wiedergegeben werden, bis der Cache irgendwie geleert wird.

Im SiteOrigin-Code gibt es eine Dienstprogrammmethode, mit der Sie den Cache bei Bedarf “leeren” können. Ich würde empfehlen, dass Sie etwas wie unten tun Jederzeit die “Standard”-Farben werden gespeichert / aktualisiert:

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

  • Vielen Dank für Ihre Antwort, die Frage könnte für Sie verwirrend sein, eigentlich ist meine Frage, das vorhandene Feld durch mein benutzerdefiniertes Feld zu überschreiben, nicht nur die Stile und ihre Variablen. Ich habe die Frage zum besseren Verständnis aktualisiert. Hoffe das kann meine Frage besser verdeutlichen.

    – Sukanta Paul

    27. Mai 2018 um 16:46 Uhr


  • Ich habe ein Tonne Arbeit in diese Antwort, die Ihre Frage vollständig und genau beantwortet, wie sie bei meiner Antwort gestellt wurde. Ihre Bearbeitungen vollständig ändern Sie die Art der Frage.

    – zufälliger_Benutzername

    27. Mai 2018 um 22:31 Uhr

  • Ja, hier muss ich zustimmen. Ich denke, @SukantaPaul muss How to Ask noch einmal lesen. Schlechte Fragen zu stellen verringert nicht nur die Wahrscheinlichkeit, dass Sie eine Antwort erhalten, sondern verschwendet auch die Zeit anderer.

    – ThallerThanYall

    30. Mai 2018 um 15:58 Uhr

  • Es tut mir sehr leid, wenn meine Frage zu Missverständnissen geführt hat. Ich dachte, “meine eigene Benutzeroberfläche und Backend-Logik für den Farbfeldtyp erstellen” und “Aktionen oder Filter, damit ich mich mit derselben Typfarbe abmelden und erneut registrieren kann” fragt eindeutig, ob ich den Feldtyp überschreiben möchte mein ganz eigener Feldtyp.

    – Sukanta Paul

    1. Juni 2018 um 4:30 Uhr


  • @ThallerThanYall Bedeutet das, dass ich von niemandem mehr Hilfe bekomme? Aber ich habe versucht anzugeben, dass ich “Feldtyp” überschreiben möchte. Bitte überprüfen Sie meinen letzten Kommentar.

    – Sukanta Paul

    1. Juni 2018 um 4:36 Uhr

1355430cookie-checkWie überschreibe ich ein vorhandenes Feld in Siteorigin?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy