it-swarm.com.de

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

Ich habe kürzlich ein Plugin veröffentlicht, WP Coda Slider , das Shortcodes verwendet, um einem Post oder einer Seite einen jQuery-Slider 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 beim Aufrufen der CSS-Datei dynamisch hinzugefügt werden.

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?

25
Chris_O

Verwenden Sie wp_register_style und wp_enqueue_style , um das Stylesheet hinzuzufügen. Fügen Sie NICHT einfach einen Stylesheet-Link zu wp_head hinzu. 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; ?>;
}
27
Doug

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
10
Dan Gayle

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' );
2
sorich87

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.

1
chazza