web-dev-qa-db-fra.com

Comment ajouter des options CSS à mon plugin sans utiliser de styles inline?

J'ai récemment publié un plugin, WP Coda Slider , qui utilise des codes abrégés pour ajouter un curseur jQuery à un message ou une page. J'ajoute une page d'options dans la prochaine version et j'aimerais inclure des options CSS, mais je ne souhaite pas que le plug-in ajoute les choix de style en tant que CSS intégré. Je veux que les choix soient ajoutés dynamiquement au fichier CSS quand il est appelé.

J'aimerais également éviter d'utiliser fopen ou d'écrire dans un fichier pour des raisons de sécurité.

Quelque chose comme cela est-il facile à réaliser ou est-il préférable d’ajouter les choix de style directement à la page?

plugin-developmentcssoptions
25
Chris_O

Utilisez wp_register_style et wp_enqueue_style pour ajouter la feuille de style. NE PAS simplement ajouter un lien de feuille de style à wp_head. La mise en file d'attente des styles permet à d'autres plugins ou thèmes de modifier la feuille de style si nécessaire.

Votre feuille de style peut être un fichier .php:

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

my-stylesheet.php ressemblerait à ceci:

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

Construire dynamiquement un fichier CSS puis le charger ajoute un lourd fardeau de performances à ce qui devrait être une très faible bande passante lors de l’ajout d’un fichier CSS, en particulier s’il existe des variables dans le CSS qui seront traitées par WP. Étant donné que deux fichiers différents sont créés pour le chargement d'une page, WP démarre deux fois et exécute toutes les requêtes de base de données deux fois, ce qui est un véritable gâchis.

Si votre curseur ne doit figurer que sur une page et que vous souhaitez que les styles soient définis de manière dynamique, la meilleure solution consiste à ajouter un bloc de style à l'en-tête.

En ordre d'exécution:

  1. Ajouter un petit bloc de styles dans l'en-tête, créé dynamiquement - Très rapide
  2. Ajouter une feuille de style non dynamique via wp_enqueue_style - Medium
  3. Ajouter une feuille de style dynamique via wp_enqueue_style - Très lent
10
Dan Gayle

Voici comment je le fais habituellement:

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

J'ai eu de la difficulté avec toutes les recommandations de ce genre - peut-être que je suis un peu lourd, ou que les contributeurs ont perdu le contact.

J'ai décidé de coder ceci dans le fichier php du plug-in: -

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'/>";

Cela semble fonctionner. Il ne charge que sur les pages qui utilisent le plugin. Il se charge après la balise h1, ce qui me convient parfaitement. Je ne vois pas comment cela pourrait être plus efficace ou plus clair.

.... mais peut-être que je me trompe - j'ai dit que j'étais un peu épais.

1
chazza