Come Caricare CSS Dinamico Inline nei Plugin WordPress

Vuoi includere correttamente del codice CSS dinamico in WordPress caricando del codice inline?

Basta usare le funzioni messe a disposizione da WP:

1. wp_register_style( $handle, $src, $deps, $ver, $media ) – registra uno stile.
2. wp_enqueue_style( $handle ) – include lo stile registrato nella pagina.
3. wp_add_inline_style( $handle, $data ) – aggiunge codice CSS inline a uno stile già registrato.

Le prime 2 funzioni le usi abitualmente per caricare correttamente file JS e CSS in WordPress.

Mentre wp_add_inline_style è quella che serve a noi.

Il codice css inline viene aggiunto solo se è stato correttamente registrato e messo in coda uno stile usando gli hooks dedicati per caricare stili e JS.

Ad esempio potresti usare uno tra questi:

• wp_enqueue_scripts – serve per mettere in coda script e stili, backend e frontend.
• admin_enqueue_scripts – serve per mettere in coda gli script solo nel pannello di amministrazione (admin)

Nel mio plugin Custom Order Status for WooCommerce mi serviva caricare in modo dinamico gli stili delle label degli ordini personalizzati.

Ho usato una action:

add_action( 'admin_enqueue_scripts', array( $this, 'admin_order_status_label_colors' ) );

E poi ho caricato dinamicamente inline lo stile css:

public function admin_order_status_label_colors( $hook_suffix ) {

		// Only add styles on WooCommerce Orders admin screen.
		if ( 'woocommerce_page_wc-orders' !== $hook_suffix ) {
			return;
		}

		$statuses = $this->plugin->statuses;

		if ( empty( $statuses ) ) {
			return;
		}

		// Register a dummy style handle for inline CSS.
		wp_register_style( 'riaco-cos-order-status-styles', false, array(), $this->plugin->version );
		wp_enqueue_style( 'riaco-cos-order-status-styles' );

		$inline_css = '';
		foreach ( $statuses as $status ) {
			$color = get_post_meta( $status->ID, '_riaco_cos_color', true );
			if ( $color ) {
				$slug       = $status->post_name;
				$text_color = $this->get_contrast_color( $color );

				$inline_css .= sprintf(
					'.order-status.status-%1$s { background-color:%2$s !important; color:%3$s !important; }',
					sanitize_html_class( $slug ),
					esc_attr( $color ),
					esc_attr( $text_color )
				);
			}
		}

		if ( $inline_css ) {
			wp_add_inline_style( 'riaco-cos-order-status-styles', $inline_css );
		}
	}

Ho registrato uno stile riaco-cos-order-status-style (in questo caso senza caricare nessun file css):

wp_register_style( 'riaco-cos-order-status-styles', false, array(), $this->plugin->version );

Poi l’ho messo in coda:

wp_enqueue_style( 'riaco-cos-order-status-styles' );

E dopo aver generato il codice css e salvato nella variabile $inline_css, ho aggiunto dinamicamente il codice css inline:

wp_add_inline_style( 'riaco-cos-order-status-styles', $inline_css );

Questo approccio ti permette di avere stili personalizzati in base alle opzioni del plugin, senza creare file CSS temporanei o modificare direttamente il tema.

Ecco un altro codice di esempio trovato sul codex:

function wpdocs_styles_method() {
	wp_enqueue_style(
		'custom-style',
		get_template_directory_uri() . '/css/custom_script.css'
	);
        $color = get_theme_mod( 'my-custom-color' ); //E.g. #FF0000
        $custom_css = "
                .mycolor{
                        background: {$color};
                }";
        wp_add_inline_style( 'custom-style', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_styles_method' );

Puoi facilmente aggiungere JS dinamico con wp_add_inline_script seguendo lo stesso principio.