Wie füge ich meinem Plugin CSS-Optionen hinzu, ohne Inline-Stile zu verwenden?

26

Ich habe kürzlich ein Plugin veröffentlicht, WP Coda Slider , das Shortcodes verwendet, um einen jQuery-Slider zu jedem Beitrag oder jeder Seite hinzuzufügen. Ich füge in der nächsten Version eine Optionsseite hinzu und möchte einige CSS-Optionen einbinden, aber ich möchte nicht, dass das Plugin die Stiloptionen als Inline-CSS hinzufügt. Ich möchte, dass die Auswahlmöglichkeiten dynamisch zur CSS-Datei hinzugefügt werden, wenn sie aufgerufen wird.

Ich möchte auch vermeiden, fopen zu verwenden oder aus Sicherheitsgründen in eine Datei zu schreiben.

Ist so etwas einfach zu bewerkstelligen, oder ist es besser, die Stilauswahl direkt zur Seite hinzuzufügen?

Chris_O
quelle
@ Chris_O : Ich habe über fast genau dasselbe nachgedacht. Was ich will, ist eine Möglichkeit, wp_enqueue_style()(und wp_enqueue_script()) mit einem Funktionsnamen anstelle eines Dateinamens aufzurufen und meine Funktion das CSS (oder JS) generieren zu lassen, aber es letztendlich über ein verknüpftes Stylesheet einzubeziehen. Soweit ich weiß, ist dies mit den wp_equeue_*()Funktionen nicht möglich . Vielleicht sollten wir ein Trac-Ticket einreichen?
MikeSchinkel
@MikeSchinkel: Das wäre eine sehr logische Art, die Funktionen von wp_enqueue zu verwenden. Ich würde dieses Ticket unterstützen.
Chris_O
@ Chris_O: Ich habe gerade @ Dougs Antwort gesehen. Ich habe eine schlechte Annahme gemacht, dass Sie das bereits wussten. Hätte ich gemerkt, dass dies nicht der Fall ist, hätte ich Sie hierhin hingewiesen: wordpress.stackexchange.com/questions/556/#562
MikeSchinkel
@MikeSchinkel Ich wusste von wp_register und wp_enqueue. Ich suchte nach einer Möglichkeit, das Stylesheet basierend auf den Werten auf der Seite mit den Plug-in-Optionen zu erstellen.
Chris_O
@ Chris_O : Ah. Ich stelle mich gerne als jemanden vor, der auch nach dem Erlernen der Lösung noch sieht, was anderen in einer Lösung fehlt (dh die meisten Experten sind keine guten Lehrer, und obwohl ich nicht der beste Experte bin, bin ich im Allgemeinen ein guter Lehrer). ) OTOH, das habe ich verpasst, sorry. :)
MikeSchinkel

Antworten:

27

Verwenden Sie wp_register_styleund wp_enqueue_style, um das Stylesheet hinzuzufügen. Fügen Sie NICHT einfach einen Stylesheet-Link hinzu wp_head. Durch das Einreihen von Stilen können andere Plugins oder Designs das Stylesheet bei Bedarf ändern.

Ihr Stylesheet kann eine .php-Datei sein:

wp_register_style('myStyleSheet', 'my-stylesheet.php');
wp_enqueue_style( 'myStyleSheet');

my-stylesheet.php würde so aussehen:

<?php
// We'll be outputting CSS
header('Content-type: text/css');

include('my-plugin-data.php');    
?>

body {
  background: <?php echo $my_background_variable; ?>;
  font-size: <?php echo $my_font_size; ?>;
}
Doug
quelle
3
Außerdem können Sie - da sich die Werte nur ändern, wenn sich die Werte auf der Optionsseite ändern - die CSS-Datei beim Speichern generieren. Sie können CSS-Dateien auch im Plugin-Verzeichnis speichern. Dies ist also etwas performanter als das Ausführen einer PHP-Datei für jede CSS-Anfrage mit Includes usw.
Hakre
1
Vielen Dank! gut gearbeitet. Aber ich habe den schwerwiegenden Fehler get_option () ... ist undefiniert. Dann habe ich die Datei wp-config.php geladen und das Problem behoben.
Sumith Harshan
Sumith, können Sie erklären, wie Sie die get_option in der benutzerdefinierten CSS-Datei verwendet haben? Danke vielmals!
Antonio Petricca
10

Das dynamische Erstellen und anschließende Laden einer CSS-Datei erhöht die Leistung einer CSS-Datei erheblich. Dies gilt insbesondere dann, wenn Variablen in der CSS-Datei über WP verarbeitet werden sollen. Da für eine Seite zwei verschiedene Dateien erstellt werden, wird WP zweimal gestartet und führt alle DB-Abfragen zweimal aus. Dies ist ein großes Durcheinander.

Wenn sich Ihr Schieberegler nur auf einer Seite befindet und Sie möchten, dass die Stile dynamisch festgelegt werden, fügen Sie am besten einen Stilblock zur Kopfzeile hinzu.

In der Reihenfolge der Leistung:

  1. Fügen Sie einen kleinen Block von Stilen in die Kopfzeile ein, die dynamisch erstellt wurden - Sehr schnell
  2. Fügen Sie über wp_enqueue_style - Medium ein nicht dynamisches Stylesheet hinzu
  3. Fügen Sie ein dynamisches Stylesheet über wp_enqueue_style hinzu - Sehr langsam
Dan Gayle
quelle
@ Dan-gayle Sehr guter Punkt. Das Plugin kann auf mehr als einer Seite verwendet werden und einige Benutzer verwenden es auf 2 oder 3 Seiten. Es werden nur das aktuelle statische Stylesheet und js auf Seiten mit dem Shortcode in die Warteschlange gestellt.
Chris_O
Ich stimme Dan Gayle zu, obwohl Sie meine Antwort abgelehnt haben. Das Hinzufügen eines kleinen CSS-Blocks zu wp_head ist in Bezug auf die Leistung viel besser als das Herunterladen eines separaten Stylesheets auf jeder Seite (auch wenn es auf die wenigen Posts / Seiten mit dem Shortcode beschränkt ist). Der einzige Grund, separate Stylesheets zu verwenden, besteht darin, dass sie vom Browser zwischengespeichert werden können . Dynamische Stylesheets können nicht zwischengespeichert werden.
Doug
2
Ist dies immer noch der richtige Weg, um Dinge zu erledigen?
Dave Kiss
2

So mache ich es normalerweise:

function build_stylesheet_url() {
    echo '<link rel="stylesheet" href="' . $url . 'stylesheetname.css?build=' . date( "Ymd", strtotime( '-24 days' ) ) . '" type="text/css" media="screen" />';
}

function build_stylesheet_content() {
    if( isset( $_GET['build'] ) && addslashes( $_GET['build'] ) == date( "Ymd", strtotime( '-24 days' ) ) ) {
        header("Content-type: text/css");
        echo "/* Something */";
        define( 'DONOTCACHEPAGE', 1 ); // don't let wp-super-cache cache this page.
        die();
    }
}

add_action( 'init', 'build_stylesheet_content' );
add_action( 'wp_head', 'build_stylesheet_url' );
sorich87
quelle
1

Ich hatte Schwierigkeiten mit all den Empfehlungen dieser Art - vielleicht bin ich ein bisschen dick, oder vielleicht haben die Mitwirkenden die gemeinsame Note verloren.

Ich habe mich entschlossen, dies in der Plug-in-PHP-Datei zu codieren: -

echo "<link href='http://www.brittany-gite-holidays.co.uk/wp-content/plugins/flexavailability/css/css.css' type='text/css' rel='stylesheet' />";
echo "<link href='http://www.brittany-gite-holidays.co.uk/wp-content/plugins/flexavailability/css/public.css' rel='stylesheet' type='text/css'/>";

Es scheint zu funktionieren. Es wird nur auf den Seiten geladen, die das Plugin verwenden. Es wird nach dem h1-Tag geladen, was für mich in Ordnung ist. Ich kann nicht sehen, wie es effizienter oder klarer sein könnte.

.... aber vielleicht irre ich mich - ich habe gesagt, ich war ein bisschen dick.

Chazza
quelle
Sie sollten nur <link>Elemente in den Seitenkopf laden
Shea
Yerss. Das liegt daran, dass Ihr CSS alles von oben nach unten beeinflussen soll. Ich bin glücklich, nur das zu beeinflussen, was nach dem h1-Tag kommt. Ich konnte keines der Beispiele zum Laufen bringen (ich denke, sie sind möglicherweise schlecht erklärt). Probieren Sie es selbst mit einem Test-HTML aus. Wenn ich falsch
liege,
@chazza Das ist nicht der einzige Grund. Wenn ein Browser nach dem Schreiben des Body-Tags Formatvorlagen erkennt, stoppt er alle anderen Aktionen, bis diese Formatvorlage geladen und angewendet wird. Dies beeinträchtigt die Leistung und führt zu Bildschirmreflows und zu einem Aufblitzen von nicht formatiertem Text. Wenn es jedoch nicht wirklich wichtig ist, werfen Sie diese CSS-Dateien ein, wie Sie sagten. Ich mache es die ganze Zeit und am Ende des Tages ist es in Ordnung. Nicht optimal, aber gut.
Dan Gayle
0

Update seit Wordpress 3.3

Es gibt eine Funktion namens wp_add_inline_style, mit der Stile basierend auf den Theme- / Plugin-Optionen dynamisch hinzugefügt werden können. Dies kann verwendet werden, um eine kleine CSS-Datei in den Kopf einzufügen, die schnell und effizient sein sollte.

<?php
function myprefix_scripts() {

    wp_enqueue_style('name-of-style-css', plugin_dir_path(__FILE__) . '/css/ccsfilename.css');

    $css = get_option( 'loader_css', 'default css goes here for when there is no value' );

    //or for Example
    $color = get_option( 'custom_plugin_color', 'red' ); //red is default value if value is not set
    $css = ".mycolor{
                background: {$color};
           }";

    wp_add_inline_style('name-of-style-css', $css);

}

add_action( 'wp_enqueue_scripts', 'myprefix_scripts' );
Lyle Bennett
quelle