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 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?

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; ?>;
}

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

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

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.

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