Verwenden Sie add_action (‘wp_head’) in einem Widget, um dynamische CSS-Stile zu generieren

Ich habe an einem “Custom Pop Links” -Widget gearbeitet, um es in einem Thema zu verwenden, das zur Verteilung bereit ist. Der Benutzer kann die Farbe eines Links mithilfe eines Farbwählers im Widget ändern. Bisher habe ich Inline-Stile verwendet, um die ausgewählte Farbe auf den Link anzuwenden. Ich möchte jedoch Medienabfragen und zusätzliche Farboptionen für die mobile Ansicht des Widgets verwenden. Inline-Styles unterstützt also meine Idee nicht.

Ist es möglich, add_action('wp_head') und dann auf Widget $instance Werte innerhalb der Action-function zuzugreifen? Beispielsweise:

 function __construct() { parent::__construct( 'pathrika_pop_widget', // Base ID __( 'Pathrika Pop Anything', 'pathrika' ), // Name array( 'description' => __( 'Pops shortcodes, html and custom text', 'pathrika' ), ) ); //For Color Picker add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_scripts' ) ); add_action( 'wp_head', array( $this, 'widget_frontend_css' ) ); add_action( 'admin_footer-widgets.php', array( $this, 'print_scripts' ), 9999 ); } /** * Widget Frontend Css. */ public function widget_frontend_css($instance) { ?>   .pop-link{ color:; } @media only screen and (max-width:960px){ .pop-link{ color:; } }  <?php } 

Oder

Soll ich ein Style-Tag im Body mithilfe des Scope-Attributs drucken? (Ich möchte mich nicht mit Validator anlegen).

Oder

Sollte ich Farboptionen für dieses Widget in Theme Customizer zur Verfügung stellen (möglicherweise, für jeden Abschnitt, in den das Widget gehen könnte)?

Beispiel-Widget-Code:

  __( 'Pops shortcodes, html and custom text', 'pathrika' ), ) // Args ); //For Color Picker add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_scripts' ) ); add_action( 'wp_head', array( $this, 'widget_frontend_css' ) ); add_action( 'admin_footer-widgets.php', array( $this, 'print_scripts' ), 9999 ); } /** * Enqueue scripts. * * @since 1.0 * * @param string $hook_suffix */ public function enqueue_scripts( $hook_suffix ) { if ( 'widgets.php' !== $hook_suffix ) { return; } wp_enqueue_style( 'wp-color-picker' ); wp_enqueue_script( 'wp-color-picker' ); wp_enqueue_script( 'underscore' ); } /** * Print scripts. * * @since 1.0 */ public function print_scripts() { ?>  ( function( $ ){ function initColorPicker( widget ) { widget.find( '.color-picker' ).wpColorPicker( { change: _.throttle( function() { // For Customizer $(this).trigger( 'change' ); }, 3000 ) }); } function onFormUpdate( event, widget ) { initColorPicker( widget ); } $( document ).on( 'widget-added widget-updated', onFormUpdate ); $( document ).ready( function() { $( '#widgets-right .widget:has(.color-picker)' ).each( function () { initColorPicker( $( this ) ); } ); } ); }( jQuery ) );     .pop-link{ color:; } @media only screen and (max-width:960px){ .pop-link{ color:; } }      
  • <a href="#pop_sc_1" data-effect="" class="pop-link "> <span class="pop-icon " aria-hidden="true"><span class="accessibility" >

<label for="get_field_id( 'poplink_color' ); ?>">
<input type="text" name="get_field_name( 'poplink_color' ); ?>" class="color-picker" id="get_field_id( 'poplink_color' ); ?>" value="" data-default-color="" />

<label for="get_field_id( 'poplink_hover_color' ); ?>">
<input type="text" name="get_field_name( 'poplink_hover_color' ); ?>" class="color-picker" id="get_field_id( 'poplink_hover_color' ); ?>" value="" data-default-color="" />

<label for="get_field_id( 'poplink_mobile_color' ); ?>">
<input type="text" name="get_field_name( 'poplink_color' ); ?>" class="color-picker" id="get_field_id( 'poplink_mobile_color' ); ?>" value="" data-default-color="" />

<label for="get_field_id( 'poplink_mobile_focus_color' ); ?>">
<input type="text" name="get_field_name( 'poplink_mobile_focus_color' ); ?>" class="color-picker" id="get_field_id( 'poplink_mobile_focus_color' ); ?>" value="" data-default-color="" />

<label for="get_field_id( 'poplink_name_1' ); ?>"> : <input type="text" class="widefat" id="get_field_id( 'poplink_name_1' ); ?>" name="get_field_name( 'poplink_name_1' ); ?>" value="" />

<label for="get_field_id( 'poplink_icon_1' ); ?>"> : <input type="text" class="widefat" id="get_field_id( 'poplink_icon_1' ); ?>" name="get_field_name( 'poplink_icon_1' ); ?>" value="" />

<label for="get_field_id( 'pop_sc_1' ); ?>"> : <input type="text" class="widefat" id="get_field_id( 'pop_sc_1' ); ?>" name="get_field_name( 'pop_sc_1' ); ?>" value="" />

<label for="get_field_id( 'pop_type_1' ); ?>"> <select id="get_field_id( 'pop_type_1' ); ?>" name="get_field_name( 'pop_type_1' ); ?>"> <option value="nf-popover" > <option value="nf-popup" >

<label for="get_field_id( 'only_icon_1' ); ?>"> <select id="get_field_id( 'only_icon_1' ); ?>" name="get_field_name( 'only_icon_1' ); ?>"> <option value="yes" > <option value="no" >

<?php } } // register pathrika_date widget add_action( 'widgets_init', create_function( '', 'return register_widget( "Pathrika_Pop_Widget" );' ) );

Solutions Collecting From Web of "Verwenden Sie add_action (‘wp_head’) in einem Widget, um dynamische CSS-Stile zu generieren"

Sobald die Widgets ausgewertet sind, ist der Kopf Ihrer Site fertiggestellt, so dass Sie wp_head nicht mehr verwenden können.

Das Hinzufügen von

-Tags ist eine Option, erzeugt jedoch tatsächlich eine Warnung vom Validator.

Die Verwendung des Customizers ist möglicherweise verwirrend, da es sich im Allgemeinen um Theme-Looks handelt und nicht um bestimmte Widgets.

Sie können jedoch eine intelligente Kombination von Inline-Stilen in den Widget- und Medienabfragen in der Widget-Stildatei erstellen. Lassen Sie Ihr Widget HTML-Code wie folgt generieren:

    link    

Fügen Sie dann das folgende css in Ihrer Style-Datei hinzu:

 @media only screen and (max-width:960px) { .normal {color:inherit !important;}} 

Bei mobilen Browsern wird das innere seine Farbe von der äußeren .