Cum adaug opțiuni CSS la plugin-ul meu fără a folosi stiluri inline?

Question

Cum adaug opțiuni CSS la plugin-ul meu fără a folosi stiluri inline?

7 sept. 2010, 07:11:12

Vizualizări: 28.6K

Voturi: 27

Recent am lansat un plugin, WP Coda Slider, care folosește shortcode-uri pentru a adăuga un slider jQuery în orice postare sau pagină. Adaug o pagină de opțiuni în următoarea versiune și aș dori să includ câteva opțiuni CSS, dar nu vreau ca plugin-ul să adauge alegerile de stil ca CSS inline. Vreau ca aceste alegeri să fie adăugate dinamic în fișierul CSS când acesta este apelat.

De asemenea, aș dori să evit folosirea fopen sau scrierea într-un fișier din motive de securitate.

Este ușor de realizat așa ceva sau ar fi mai bine să adaug alegerile de stil direct în pagină?

Chris_O

20.6K

dezvoltare de plugin css opțiuni

Comentarii

@Chris_O: M-am gândit la aproape exact același lucru. Ceea ce doresc este o modalitate de a apela wp_enqueue_style() (și wp_enqueue_script()) cu un nume de funcție în loc de un nume de fișier și ca funcția mea să genereze CSS-ul (sau JS) dar totuși să fie inclusă în final printr-un fișier de stil legat. Din câte știu, acest lucru nu este posibil cu funcțiile wp_equeue_*(). Poate ar trebui să depunem un ticket trac?

MikeSchinkel

7 sept. 2010 09:44:51

@MikeSchinkel: Acesta ar fi un mod foarte logic de a folosi funcțiile wp_enqueue. Aș sprijini acel ticket.

Chris_O

7 sept. 2010 10:24:01

@Chris_O: Tocmai am văzut răspunsul lui @Doug; am făcut o presupunere greșită că deja știai asta. Dacă aș fi realizat că nu este cazul, te-aș fi îndrumat aici: http://wordpress.stackexchange.com/questions/556/#562

MikeSchinkel

8 sept. 2010 03:12:01

@MikeSchinkel Știam despre wp_register și wp_enqueue. Căutam o modalitate de a construi fișierul de stiluri pe baza valorilor din pagina de opțiuni a pluginului.

Chris_O

8 sept. 2010 03:37:36

@Chris_O: Ah. Îmi place să cred că sunt unul care încă poate vedea ce le scapă altora într-o soluție chiar și după ce am învățat soluția (adică majoritatea experților nu sunt buni profesori și deși nu sunt cel mai bun expert, în general sunt un bun profesor.) Pe de altă parte, acesta este unul pe care l-am ratat, scuze. :)

MikeSchinkel

8 sept. 2010 03:40:57

Toate răspunsurile la întrebare

Comentarii

În plus - deoarece valorile se schimbă doar când valorile de pe pagina de opțiuni sunt modificate - ai putea genera fișierul CSS la salvare. Poți stoca fișierele CSS și în directorul pluginului, deci acest lucru este puțin mai performant decât să rulezi un fișier PHP la fiecare cerere CSS cu include etc.

hakre

8 sept. 2010 00:44:26

Mulțumesc! a funcționat bine. Dar am primit eroarea fatală get_option()... este nedefinită. Apoi am încărcat fișierul wp-config.php și am rezolvat problema.

Sumith Harshan

2 ian. 2014 15:43:03

Sumith, ai putea să explici cum ai folosit get_option în interiorul fișierului CSS personalizat? Mulțumesc mult!

Antonio Petricca

9 sept. 2015 14:50:33

Construirea dinamică a unui fișier CSS și încărcarea ulterioară a acestuia adaugă o POVARĂ ENORMĂ de performanță la ceea ce ar trebui să fie o operațiune cu consum redus de lățime de bandă - adăugarea unui fișier CSS, mai ales dacă în CSS există variabile care vor fi procesate prin intermediul WP. Deoarece sunt create două fișiere diferite pentru o singură încărcare de pagină, WP pornește de două ori și rulează toate interogările la baza de date de două ori, ceea ce creează o mare mizerie.

Dacă slider-ul tău va apărea doar pe o singură pagină și dorești ca stilurile să fie setate dinamic, cea mai bună soluție este să adaugi un bloc de stiluri în header.

Ordinea în ceea ce privește performanța:

Adaugă un mic bloc de stiluri în header, generat dinamic - Foarte rapid
Adaugă o fișier de stiluri non-dinamic prin wp_enqueue_style - Mediu
Adaugă o fișier de stiluri dinamic prin wp_enqueue_style - Foarte lent

Dan Gayle

6.15K

7 sept. 2010 20:10:37

Comentarii

@Dan-gayle Foarte bun punct de vedere. Plugin-ul poate fi folosit pe mai multe pagini și unii utilizatori îl folosesc pe 2 sau 3 pagini. Acesta încarcă doar fișierul static de stil curent și js pe paginile care au shortcode-ul.

Chris_O

7 sept. 2010 20:25:05

Sunt de acord cu Dan Gayle, chiar dacă ați votat pozitiv răspunsul meu. Adăugarea unui mic bloc CSS în wp_head ar fi mult mai eficient din punct de vedere al performanței decât să fie nevoie să se descarce un fișier de stil separat la fiecare încărcare de pagină (chiar dacă este restricționat doar la puținele postări/pagini care conțin shortcode-ul). Singurul motiv pentru a folosi fișiere de stil separate în primul rând este că acestea pot fi stocate în cache de browser. Fișierele de stil dinamice nu pot fi stocate în cache.

Doug

7 sept. 2010 20:56:49

Este aceasta încă metoda corectă de abordare a situației?

Dave Kiss

21 mai 2013 17:26:11

Iată cum procedez de obicei:

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 "/* Ceva conținut */";
        define( 'DONOTCACHEPAGE', 1 ); // nu permite wp-super-cache să memoreze în cache această pagină.
        die();
    }
}

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

sorich87

7.96K

7 sept. 2010 10:55:17

Am avut dificultăți cu toate recomandările de acest gen - poate sunt puțin mai încet la minte, sau poate contribuitorii au pierdut legătura cu lucrurile simple.

Am optat în final să codez asta în fișierul php al plugin-ului:-

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

Pare să funcționeze. Se încarcă doar pe acele pagini care folosesc pluginul. Se încarcă după tag-ul h1, ceea ce pentru mine e perfect. Nu văd cum ar putea fi mai eficient sau mai clar.

...dar poate greșesc - am zis că sunt puțin mai încet la minte.

chazza

11

18 ian. 2013 17:47:39

Comentarii

Ar trebui să încarci elementele <link> doar în head-ul paginii

shea

18 ian. 2013 22:37:04

Da. Asta se întâmplă pentru că CSS-ul tău vrea să afecteze totul de la începutul paginii în jos. Eu sunt mulțumit să afectez doar ce vine după tag-ul h1. Nu am reușit să fac să funcționeze niciunul din exemple (cred că pot fi explicate prost). Încearcă tu însuți pe un fragment de HTML de test. Dacă greșesc, spune-mi :)

chazza

19 ian. 2013 20:56:00

@chazza Ăsta nu este singurul motiv. Când un browser detectează stiluri scrise după tag-ul body, oprește orice altceva face până când acel stil este încărcat și aplicat, ceea ce este rău pentru performanță și duce la reflows ale ecranului și flash-uri de text nestilizat.

Totuși, dacă nu contează cu adevărat, aruncă acele fișiere CSS așa cum ai spus. Eu fac asta tot timpul, și la urma urmei e în regulă. Nu este optim, dar e acceptabil.

Dan Gayle

1 feb. 2016 21:40:02

Actualizare începând cu WordPress 3.3

Există o funcție numită wp_add_inline_style care poate fi utilizată pentru a adăuga dinamic stiluri bazate pe opțiunile temei/pluginului. Aceasta poate fi folosită pentru a adăuga un fișier mic CSS în head, ceea ce ar trebui să fie rapid și eficient.

<?php
function myprefix_scripts() {

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

    $css = get_option( 'loader_css', 'valoare CSS implicită pentru când nu există nicio valoare' );

    //sau de exemplu
    $color = get_option( 'custom_plugin_color', 'roșu' ); //roșu este valoarea implicită dacă nu este setată nicio valoare
    $css = ".mycolor{
                background: {$color};
           }";

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

}

add_action( 'wp_enqueue_scripts', 'myprefix_scripts' );

Lyle Bennett

73

19 iul. 2019 13:21:00

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

Folosește wp_register_style și wp_enqueue_style pentru a adăuga fișierul de stil. NU adăugați pur și simplu un link către fișierul de stil în wp_head. Încărcarea stilurilor prin coadă permite altor plugin-uri sau teme să modifice fișierul de stil, dacă este necesar.

Fișierul tău de stil poate fi un fișier .php:

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

my-stylesheet.php ar arăta astfel:

<?php
// Vom afișa 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 sept. 2010 17:46:01