web-dev-qa-db-fra.com

wp_add_inline_style dans le plugin ne fonctionne pas

J'essaie d'utiliser wp_add_inline_style dans le plugin. Je veux ajouter un peu de style lors de l'exécution d'un shortcode.

add_action('wp_enqueue_scripts', 'cod_enqueue_scripts');
add_shortcode('cod', 'cod_process_shortcode');

function cod_enqueue_scripts() {
    wp_enqueue_style('cod-style', plugins_url('css/style.css', __FILE__));
}

function cod_process_shortcode(){
    $inline_css = "
        .icon-color{
            color:#ad3;
        }";

    wp_add_inline_style('cod-style', $inline_css);
}

Cela ne fonctionne pas, il ne s'accrochera pas à 'cod-style'.

Cela fonctionne si je fais ceci: (d'abord mettre en file d'attente css puis appeler wp_add_inline_style immédiatement après)

function cod_process_shortcode(){
    wp_enqueue_style('cod-custom', plugins_url('css/blank.css', __FILE__));
    $inline_css = "
        .icon-color{
            color:#ad3;
        }";

    wp_add_inline_style('cod-custom', $inline_css);
}

Dans l'exemple ci-dessus, j'ai utilisé un fichier css vide (blank.css) à des fins de test.

Je pensais que mon fichier css original n'était peut-être pas encore chargé, mais même si je mettais en file d'attente les fichiers css vides dans cod_enqueue_scripts, ils ne le feraient pas, comme ceci:

function cod_enqueue_scripts() {
    wp_enqueue_style('cod-style', plugins_url('css/blank.css', __FILE__));
}

function cod_process_shortcode(){
    $inline_css = "
        .icon-color{
            color:#ad3;
        }";

    wp_add_inline_style('cod-style', $inline_css);
}

Je ne sais pas de quel type de css inline j'ai besoin jusqu'à ce que le shortcode s'exécute, et il semble étrange que le wp_add_inline_style n'accroche pas au wp_enqueue_style d'origine.

wp-enqueue-style
2
Toniq

Voici une solution basée sur this post , qui permet au CSS en ligne d'être restitué par un shortcode utilisant une dépendance sans chemin (essentiellement un fichier null).

// Optional base styles
add_action( 'wp_enqueue_scripts', 'cod_enqueue_scripts' );
function cod_enqueue_scripts() {
    wp_enqueue_style('cod-style', plugins_url('css/style.css', __FILE__));
}

// Shortcode handler which also outputs inline styles.
add_shortcode( 'cod', 'cod_process_shortcode');
function cod_process_shortcode() {
    $color = '#ff0000';
    $css = 'body { background-color: ' . $color . '; }';

    wp_register_style( 'cod-inline-style', false );
    wp_enqueue_style( 'cod-inline-style' );
    wp_add_inline_style( 'cod-inline-style', $css );

    return "<p>Shortcode output...</p>";
}

Sinon, Rarst a souligné que le shortcode de la galerie WordPress génère des styles dynamiques. Le shortcode de la galerie n'utilise pas wp_add_inline_style(), mais le résultat final est essentiellement le même.

Edit: Voici une version alternative dans laquelle les styles en ligne utilisent la dépendance des styles d'origine.

// Base styles
add_action( 'wp_enqueue_scripts', 'cod_enqueue_scripts' );
function cod_enqueue_scripts() {
    wp_enqueue_style('cod-style', plugins_url('css/style.css', __FILE__));
}

// Shortcode handler which also outputs inline styles.
add_shortcode( 'cod', 'cod_process_shortcode');
function cod_process_shortcode() {
    $color = '#bada55';
    $css = 'body { background-color: ' . $color . '; }';

    wp_register_style( 'cod-inline-style', false, array( 'cod-style' )  );
    wp_enqueue_style( 'cod-inline-style' );
    wp_add_inline_style( 'cod-inline-style', $css );

    return "<p>Shortcode output...</p>";
}
3
Dave Romsey

Ce code est travaillé pour moi ..

 // Styles de base facultatifs 
 Add_action ('wp_enqueue_scripts', 'cod_enqueue_scripts'); 
 Function cod_enqueue_scripts () {
 Wp_enqueue_style ('cod-style', plugins_ur ('css/style.css', __FILE __)); 
} 
 
 // gestionnaire de code court qui génère également des styles en ligne. 
 add_shortcode ('cod', 'cod_process_shortcode'); 
 function cod_process_shortcode () {
 // votre fin fort html 
} 
 
 fonction custom_inline_style () {
 $ color = '# ff0000'; 
 $ css = 'body {background-color:'. $ couleur. '; } '; 
 
 wp_add_inline_style (' cod-style ', $ css); // accrocher pour ajouter un style en ligne 
} 
 add_action ('wp_enqueue_scripts', 'custom_inline_style', 20); // si la priorité 20 ne fonctionne pas, vous pouvez donner plus de 20
0
Prakash Sunuwar