Come aggiungere stili CSS inline dinamici?

Prova questo:

Utilizzo dei conditional query

Inserire direttamente l'enqueue degli stili nel template non è consigliabile. È possibile (se si comprende l'ordine in cui vengono eseguite le azioni rilevanti e si assicura che la chiamata a wp_add_inline_style() avvenga nel punto giusto dell'ordine di esecuzione). Ma è molto più semplice mantenere tutto il codice insieme e utilizzare un conditional query appropriato, come is_single(), per aggiungere lo stile dinamico:

function add_custom_css() {
    wp_enqueue_style('custom-css', get_template_directory_uri() . '/custom.css');   
    // Aggiunge lo stile dinamico se viene visualizzata una pagina singola
    if ( is_single() ) {
        $color = "#000111";
        $custom_css = ".mycolor{ background: {$color}; }";
        wp_add_inline_style( 'custom-css', $custom_css );
    }
}
add_action( 'wp_enqueue_scripts', 'add_custom_css' );

Risposta Originale

functions.php

function add_custom_css() {
    wp_enqueue_style('custom-css', get_template_directory_uri() . '/custom.css');          
}
add_action( 'wp_enqueue_scripts', 'add_custom_css', 20 );

single.php

function wpse104657_custom_color() {
    $color = "#000111";
    $custom_css = "
        .mycolor{
            background: {$color};
        }";
    wp_add_inline_style( 'custom-css', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'wpse104657_custom_color', 21 );

Il terzo parametro nelle chiamate add_action() è la priorità, che indica a WordPress in quale ordine eseguire l'azione — numeri più alti significano esecuzione successiva.

Modificato per aggiungere Questo non aggiungerà alcun codice a custom.css — aggiungerà solo stili inline se custom.css è già stato caricato.

Riferimenti

• Pagina Codex per add_action()
• wp_enqueue_style()
• wp_add_inline_style()

Non aggiunge alcun codice nel file custom.css. Cosa sto sbagliando?

Quegli stili vengono aggiunti nel documento HTML, all'interno dei tag <style>, non nel foglio di stile che hai accodato. Devi comunque accodare il foglio di stile prima di aggiungere gli stili "inline".

Il nome della funzione è un po' confuso, perché produce blocchi di stile, non veri e propri stili inline. Quello che hai fatto con il DIV sopra è uno stile inline. Dovresti evitarli perché hanno la precedenza più alta prima delle regole !important (sarebbe molto difficile sovrascriverli).

Ho letto in qualche forum che aumenta il carico sul server

No, non è così. Probabilmente lo stai confondendo con gli script PHP che fungono da fogli di stile. Questi sì che sono dannosi.

Forse è solo una mia impressione, ma mi sembra che stiamo facendo un dramma per un nonnulla. (è un modo di dire... cercalo :) )

Se stai costruendo un tema che potrebbe avere un child theme associato, sia aggiungendolo direttamente inline, sia aggiungendolo a un blocco di stile tramite wp_add_inline_style(), sarà necessario usare !important per sovrascriverlo.

Se si tratta di un plugin personalizzato e cambiare il colore di sfondo è una parte fondamentale della funzionalità, allora senza dubbio, aggiungilo inline.

Non vedo alcun vantaggio nel complicare eccessivamente questa cosa.

Per rispondere alla domanda originale.

È sbagliato aggiungere codice come quello sopra?

La risposta semplice è: No, non è sbagliato. Ha delle conseguenze, ma le prestazioni del server non sono una di queste, e non vedo nulla negli standard di codifica di WordPress che lo sconsigli. In generale, gli stili inline dovrebbero essere usati con parsimonia e attenzione, ma non sono sbagliati.

Se vuoi assicurarti di mantenere separati i concetti, potresti aggiungere una classe inline invece degli stili.

$color = "black";
echo '<div class=".$color.">'

E poi definire .black nel tuo foglio di stile. (Questo, ovviamente, funziona solo se hai una lista predefinita di opzioni di colore.)

Basta utilizzare:

add_action('admin_head','myfunc24235235');
function myfunc24235235(){ ?>

  <style>
  .smth{ color:red;}
  </style>

    <?php
}

Faccio questo in tutti i miei template, uso:

<?php
    function hook_css() {
        ?>
            <style>
                .sub { margin: auto; max-width: 1140px;}
            </style>
        <?php
    }
    add_action('wp_head', 'hook_css');
?>

Questo inserirà i tag di stile e gli stili referenziati nella sezione head al completamento di

<?php wp_head();?>

Se lo stai codificando in un template, assicurati di inserirlo prima della sezione

<?php wp_head();?>. Puoi saperne di più qui WordPress Codex