Como usar wp_add_inline_style para CSS personalizado adicionado via shortcode?

Estou tentando evitar o CSS em linha e mover o CSS personalizado para a cabeça do documento HTML.

Encontrei este artigo https://www.cssigniter.com/late-enqueue-inline-css-wordpress/ e tentou implementar esta solução para shortcode, mas tem problema para obter a variável global $ custom_css que está definida no div_shortcode para a function my_custom_css ( O valor está vazio, mas deve ser, por exemplo: .my-div {color: red;})?

Uso do código curto:

[div style="color: red"]Example[/div] 

Código PHP:

 $custom_css = ''; function div_shortcode($attr, $content = null) { extract(shortcode_atts(array('style' => ''), $attr)); $output = '
'; $output .= do_shortcode($content); $output .= '
'; global $custom_css; $custom_css = '.my-div {'.$style.'}'; return $output; } function my_custom_css(){ global $custom_css; wp_register_style( 'my-custom-css', false ); wp_enqueue_style( 'my-custom-css' ); wp_add_inline_style( 'my-custom-css', $custom_css ); } add_shortcode('div', 'div_shortcode'); add_action( 'wp_head', 'my_custom_css' );

O resultado que eu quero é entrar na cabeça do HTML:

  .my-div {color: red;}  

e na saída do conteúdo do post:

 
Example

Solutions Collecting From Web of "Como usar wp_add_inline_style para CSS personalizado adicionado via shortcode?"