it-swarm.com.de

Wie füge ich einen dynamischen Inline-Stil hinzu?

Ich möchte dynamisches CSS hinzufügen, daher füge ich momentan direkt zum div hinzu, dh:

$color = "#000000";
echo '<div style="background:'.$color.'">

Ist es schlecht, Code wie oben hinzuzufügen?

Ich habe in einigen Foren gelesen, dass es die Serverlast erhöht und von den WordPress-Codierungsstandards nicht empfohlen wird. Ich sollte wp_add_inline_style() verwenden. Also versuche ich das zu benutzen, aber es funktioniert nicht. Folgendes versuche ich:

functions.php:

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

single.php

$color = "#000111";
$custom_css = "
    .mycolor{
            background: {$color};
    }";

wp_add_inline_style( 'custom-css', $custom_css );

Der Datei custom.css wird kein Code hinzugefügt. Was mache ich falsch?

2
ajay

Versuche dies:

Abfragebedingungen verwenden

Es ist nicht ratsam, die Stileinreihung direkt in die Vorlage zu übernehmen. Dies ist möglich (wenn Sie die Reihenfolge verstehen, in der relevante Aktionen ausgelöst werden, und sicherstellen, dass Ihr Aufruf von wp_add_inline_style() zum richtigen Zeitpunkt in der Ausführungsreihenfolge erfolgt). Es ist viel einfacher, den gesamten Code zusammenzuhalten und mit einer geeigneten Abfragebedingung wie is_single() den dynamischen Stil hinzuzufügen:

function add_custom_css() {
    wp_enqueue_style('custom-css', get_template_directory_uri() . '/custom.css');   
    // Add dynamic style if a single page is displayed
    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' );

Ursprüngliche Antwort

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

Der dritte Parameter in den add_action()-Aufrufen ist die Priorität, die WordPress mitteilt, in welcher Reihenfolge die Aktion hinzugefügt werden soll - höhere Zahlen bedeuten eine spätere Ausführung.

Zum Hinzufügen bearbeitet Damit wird custom.css kein Code hinzugefügt - es werden nur Inline-Stile hinzugefügt ifcustom.css wurde bereits geladen.

Verweise

8
Pat J

Der Datei custom.css wird kein Code hinzugefügt. Was mache ich falsch?

Diese Stile werden im HTML-Dokument innerhalb von <style>-Tags hinzugefügt, nicht in dem Stylesheet, das Sie in die Warteschlange gestellt haben. Sie müssen das Stylesheet dennoch in eine Warteschlange einreihen, bevor Sie "Inline" -Stile hinzufügen.

Der Funktionsname ist etwas verwirrend, da er Stilblöcke und keine tatsächlichen Inline-Stile erzeugt. Was Sie mit dem obigen DIV gemacht haben, ist ein Inline-Stil. Sie sollten diese vermeiden, da sie die höchste Priorität vor !important-Regeln haben (das Überschreiben wäre sehr schwierig).

Ich habe in einem Forum gelesen, dass es Server-Burdon hinzufügt

Nein, das tut es nicht. Sie verwechseln dies wahrscheinlich mit PHP Skripten, die als Stylesheets fungieren. Die sind schlecht.

3
onetrickpony

Vielleicht bin ich es nur, aber es fühlt sich an, als würden wir uns auf eine Mücke stürzen und ein Kamel schlucken. (Es ist ein Satz ... schau nach :))

Wenn Sie ein Design erstellen, dem möglicherweise ein untergeordnetes Design zugeordnet ist, müssen Sie es sowohl direkt inline als auch über wp_add_inline_style () zu einem Stilblock hinzufügen, um es zu überschreiben.

Wenn dies ein benutzerdefiniertes Plugin ist und das Ändern der Hintergrundfarbe ein wichtiger Bestandteil der Funktionalität ist, fügen Sie es auf jeden Fall inline hinzu.

Ich sehe keinen Vorteil darin, dies zu verkomplizieren.

Um die ursprüngliche Frage zu beantworten.

Ist es schlecht, Code wie oben hinzuzufügen?

Die einfache Antwort lautet: Nein, es ist nicht schlecht. Es hat zwar Konsequenzen, aber die Serverleistung ist keine davon, und ich sehe in den WordPress-Codierungsstandards nichts, was davon abhält. Inline-Stile sollten im Allgemeinen sparsam und vorsichtig verwendet werden, aber sie sind nicht schlecht.

Wenn Sie sicherstellen möchten, dass Bedenken getrennt bleiben, können Sie anstelle von Stilen eine Inline-Klasse hinzufügen.

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

Und dann definieren Sie .black in Ihrem Stylesheet. (Das funktioniert natürlich nur, wenn Sie eine vordefinierte Liste von Farboptionen haben.)

2
Jeremy Ross

Ich mache das in all meinen Vorlagen, benutze:

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

Dadurch werden die referenzierten Stil-Tags und Stile nach Abschluss des Vorgangs in den Kopfbereich eingefügt

<?php wp_head();?>

Wenn Sie es in eine Vorlage codieren, stellen Sie sicher, dass Sie es vor dem

<?php wp_head();?> section. Mehr dazu erfahren Sie hier WordPress Codex

0
Zachary Raineri

Benutz einfach:

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

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

    <?php
}
0
T.Todua