Cum să adaugi stiluri inline dinamice?

Încearcă asta:

Folosind condiționale de interogare

Nu este recomandat să adaugi stiluri direct în template. Este posibil (dacă înțelegi ordinea în care acțiunile relevante sunt declanșate și te asiguri că apelul tău către wp_add_inline_style() se întâmplă în momentul potrivit din ordinea de execuție). Este mult mai ușor să păstrezi tot codul împreună și să folosești o condițională de interogare adecvată, cum ar fi is_single(), pentru a adăuga stilul dinamic:

function add_custom_css() {
    wp_enqueue_style('custom-css', get_template_directory_uri() . '/custom.css');   
    // Adaugă stil dinamic dacă este afișată o pagină singulară
    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' );

Răspunsul Original

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 );

Al treilea parametru din apelurile add_action() reprezintă prioritatea, care spune WordPress în ce ordine să adauge acțiunea - numere mai mari înseamnă execuție mai târzie.

Editat pentru a adăuga Acest lucru nu va adăuga niciun cod în custom.css - va adăuga doar stiluri inline dacă custom.css a fost deja încărcat.

Referințe

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

Nu adaugă niciun cod în fișierul custom.css. Ce fac greșit?

Acele stiluri sunt adăugate în documentul HTML, între tag-urile <style>, nu în fișierul de stiluri pe care l-ai încărcat (enqueued). Totuși, este necesar să încarci fișierul de stiluri înainte de a adăuga stilurile "inline".

Denumirea funcției este puțin confuză, deoarece produce blocuri de stiluri, nu stiluri inline propriu-zise. Ceea ce ai făcut cu DIV-ul de mai sus este un stil inline. Ar trebui să eviți acestea deoarece au cea mai mare prioritate înainte de regulile !important (ar fi foarte dificil să le suprascrii).

Am citit pe un forum că adaugă încărcare pe server

Nu, nu adaugă. Probabil confunzi acest lucru cu scripturile PHP care funcționează ca fișiere de stiluri. Acelea sunt problematice.

Poate sunt doar eu, dar simt că ne chinuim cu un tantar și înghițim o cămilă, aici. (e o expresie... poți să o cauți :) )

Dacă construiești o temă care ar putea avea o temă copil asociată, atât adăugarea direct inline, cât și adăugarea într-un bloc de stil prin wp_add_inline_style() va necesita !important pentru a o suprascrie.

Dacă acesta este un plugin personalizat, iar schimbarea culorii de fundal este o parte critică a funcționalității, atunci, desigur, adaugă-l inline.

Nu văd niciun avantaj în a complica în mod excesiv acest lucru.

Pentru a răspunde la întrebarea inițială.

Este rău să adaugi cod ca cel de mai sus?

Răspunsul simplu este, Nu, nu este rău. Are consecințe, dar performanța serverului nu este una dintre ele și nu văd nimic în standardele de codare WordPress care să descurajeze acest lucru. În general, stilurile inline ar trebui folosite cu moderație și cu grijă, dar nu sunt rele.

Dacă vrei să te asiguri că separi corect preocupările, ai putea adăuga o clasă inline în loc de stiluri.

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

Și apoi definești .black în fișierul tău de stil. (Desigur, asta funcționează doar dacă ai o listă predefinită de opțiuni de culori.)

Folosește pur și simplu:

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

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

    <?php
}

Eu fac asta în toate șabloanele mele, folosesc:

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

Aceasta va plasa tag-urile de stil și stilurile referențiate în secțiunea head la finalizare

<?php wp_head();?>

Dacă o încorporezi într-un șablon, asigură-te că o plasezi înainte de secțiunea

<?php wp_head();?>. Poți afla mai multe despre asta aici WordPress Codex