Come aggiungere opzioni CSS al mio plugin senza utilizzare stili inline?

Question

Come aggiungere opzioni CSS al mio plugin senza utilizzare stili inline?

7 set 2010, 07:11:12

Visualizzazioni: 28.6K

Voti: 27

Ho recentemente rilasciato un plugin, WP Coda Slider, che utilizza shortcode per aggiungere uno slider jQuery a qualsiasi articolo o pagina. Sto aggiungendo una pagina di opzioni nella prossima versione e vorrei includere alcune opzioni CSS ma non voglio che il plugin aggiunga le scelte di stile come CSS inline. Voglio che le scelte vengano aggiunte dinamicamente al file CSS quando viene richiamato.

Vorrei anche evitare di utilizzare fopen o di scrivere su file per problemi di sicurezza.

È facile realizzare qualcosa del genere o sarebbe meglio aggiungere semplicemente le scelte di stile direttamente alla pagina?

Chris_O

20.6K

sviluppo plugin css opzioni

Commenti

@Chris_O: Stavo pensando quasi esattamente alla stessa cosa. Quello che vorrei è un modo per chiamare wp_enqueue_style() (e wp_enqueue_script()) con un nome di funzione invece di un nome file e far sì che la mia funzione generi il CSS (o JS) ma che venga comunque incluso tramite un foglio di stile collegato. Per quanto ne so, questo non è possibile con le funzioni wp_equeue_*(). Forse dovremmo aprire un ticket su trac?

MikeSchinkel

7 set 2010 09:44:51

@MikeSchinkel: Sarebbe un modo molto logico di utilizzare le funzioni wp_enqueue. Sosterrei volentieri quel ticket.

Chris_O

7 set 2010 10:24:01

@Chris_O: Ho appena visto la risposta di @Doug; ho fatto un'errata supposizione che tu lo sapessi già. Se avessi capito che non era così, ti avrei indirizzato qui: http://wordpress.stackexchange.com/questions/556/#562

MikeSchinkel

8 set 2010 03:12:01

@MikeSchinkel Conoscevo wp_register e wp_enqueue. Stavo cercando un modo per costruire il foglio di stile basato sui valori della pagina delle opzioni del plugin.

Chris_O

8 set 2010 03:37:36

@Chris_O: Ah. Mi piace pensare a me stesso come qualcuno che riesce ancora a vedere ciò che agli altri sfugge in una soluzione anche dopo averla appresa (cioè la maggior parte degli esperti non sono buoni insegnanti e sebbene io non sia il miglior esperto, generalmente sono un buon insegnante.) D'altra parte, questa è una cosa che mi è sfuggita, scusa. :)

MikeSchinkel

8 set 2010 03:40:57

Tutte le risposte alla domanda

Commenti

Inoltre - dato che i valori cambiano solo quando vengono modificati nella pagina delle opzioni - potresti generare il file CSS al momento del salvataggio. Puoi archiviare i file CSS anche nella directory del plugin, quindi è un po' più performante rispetto all'esecuzione di un file PHP per ogni richiesta CSS con include ecc.

hakre

8 set 2010 00:44:26

Grazie! Ha funzionato bene. Ma ho ricevuto l'errore fatale get_option()... non è definita. Poi ho caricato il file wp-config.php e ho risolto il problema.

Sumith Harshan

2 gen 2014 15:43:03

Sumith, potresti spiegare come hai usato get_option all'interno del file CSS personalizzato? Molte grazie!

Antonio Petricca

9 set 2015 14:50:33

Creare dinamicamente un file CSS e poi caricarlo aggiunge un ENORME carico prestazionale a quello che dovrebbe essere un'operazione a basso consumo di banda come l'aggiunta di un file CSS, specialmente se ci sono variabili nel CSS che devono essere elaborate attraverso WP. Poiché vengono creati due file diversi per un singolo caricamento di pagina, WP si avvia due volte ed esegue tutte le query al database due volte, creando un gran pasticcio.

Se il tuo slider sarà presente solo in una pagina e vuoi impostare gli stili dinamicamente, la soluzione migliore è aggiungere un blocco di stile nell'header.

In ordine di prestazioni:

Aggiungi un piccolo blocco di stili nell'header, creato dinamicamente - Molto veloce
Aggiungi un foglio di stile non dinamico via wp_enqueue_style - Medio
Aggiungi un foglio di stile dinamico via wp_enqueue_style - Molto lento

Dan Gayle

6.15K

7 set 2010 20:10:37

Commenti

@Dan-gayle Ottimo punto. Il plugin può essere utilizzato su più di una pagina e alcuni utenti lo usano su 2 o 3 pagine. Includerà solo il foglio di stile statico corrente e il js nelle pagine che contengono lo shortcode.

Chris_O

7 set 2010 20:25:05

Concordo con Dan Gayle, anche se hai votato positivamente la mia risposta. Aggiungere un piccolo blocco CSS a wp_head sarebbe molto meglio in termini di prestazioni rispetto al richiedere il download di un foglio di stile separato ad ogni visualizzazione di pagina (anche se limitato ai pochi post/pagine con lo shortcode). L'unica ragione per utilizzare fogli di stile separati è che possono essere messi in cache dal browser. I fogli di stile dinamici non possono essere memorizzati nella cache.

Doug

7 set 2010 20:56:49

È ancora questo il modo giusto di procedere?

Dave Kiss

21 mag 2013 17:26:11

Ecco come lo faccio solitamente:

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 "/* Qualcosa */";
        define( 'DONOTCACHEPAGE', 1 ); // impedisce a wp-super-cache di memorizzare questa pagina
        die();
    }
}

add_action( 'init', 'build_stylesheet_content' );
add_action( 'wp_head', 'build_stylesheet_url' );

sorich87

7.96K

7 set 2010 10:55:17

Ho avuto difficoltà con tutte le raccomandazioni di questo tipo - forse sono un po' tardo, o forse i contributori hanno perso il contatto con la realtà.

Alla fine ho optato per codificare questo nel file php del plugin:-

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

Sembra funzionare. Carica solo nelle pagine che utilizzano il plugin. Si carica dopo il tag h1 che per me va bene. Non vedo come potrebbe essere più efficiente o più chiaro.

...ma forse mi sbaglio - ho detto che sono un po' tardo.

chazza

11

18 gen 2013 17:47:39

Commenti

Dovresti caricare gli elementi <link> solo nell'head della pagina

shea

18 gen 2013 22:37:04

Sì. Questo perché il tuo CSS è pensato per influenzare tutto dalla parte superiore della pagina verso il basso. A me va bene influenzare solo ciò che viene dopo il tag h1. Non sono riuscito a far funzionare nessuno degli esempi (penso che possano essere spiegati male). Provalo tu stesso su un pezzo di HTML di test. Se sbaglio dimmelo :)

chazza

19 gen 2013 20:56:00

@chazza Non è l'unico motivo. Quando un browser rileva degli stili dopo che il tag body è stato scritto, interrompe tutto ciò che sta facendo finché quello stile non viene caricato e applicato, il che è negativo per le prestazioni e porta a riflussi dello schermo e flash di testo non stilizzato.

Tuttavia, se non ha molta importanza, inserisci pure quei file CSS come hai detto. Lo faccio spesso anch'io e alla fine va bene. Non ottimale, ma accettabile.

Dan Gayle

1 feb 2016 21:40:02

Aggiornamento da WordPress 3.3

È disponibile una funzione chiamata wp_add_inline_style che può essere utilizzata per aggiungere dinamicamente stili in base alle opzioni del tema/plugin. Questo può essere usato per aggiungere un piccolo file CSS nell'head che dovrebbe essere veloce ed efficiente.

<?php
function myprefix_scripts() {

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

    $css = get_option( 'loader_css', 'valore CSS predefinito se non è presente alcun valore' );

    //Oppure per esempio
    $color = get_option( 'custom_plugin_color', 'red' ); //red è il valore predefinito se non è impostato
    $css = ".mycolor{
                background: {$color};
           }";

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

}

add_action( 'wp_enqueue_scripts', 'myprefix_scripts' );

Lyle Bennett

73

19 lug 2019 13:21:00

Doug 1.05K · Accepted Answer · 2010-09-07T17:46:01Z

Utilizza wp_register_style e wp_enqueue_style per aggiungere il foglio di stile. NON aggiungere semplicemente un link al foglio di stile in wp_head. Accodare gli stili permette ad altri plugin o temi di modificare il foglio di stile se necessario.

Il tuo foglio di stile può essere un file .php:

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

my-stylesheet.php apparirà così:

<?php
// Stiamo per emettere 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

1.05K

7 set 2010 17:46:01