IT-Swarm.Net

Jak mohu přidat doplňky CSS do svého pluginu bez použití stylů inline?

Nedávno jsem vydala plugin, WP Coda Slider , který používá zkratky k přidání jezdce jQuery na libovolný příspěvek nebo stránku. Přidávám stránku možností v další verzi a rád bych zahrnoval některé možnosti CSS, ale nechci, aby plugin přidával volby stylu jako inline CSS. Chci, aby volby byly dynamicky přidávány do souboru CSS, když je volán.

Také bych se rád vyhnul používání fopen nebo zápisu do souboru pro bezpečnostní otázky.

Je něco takového snadné dosáhnout nebo bych byl lepší, kdybych přidával volby stylu přímo na stránku?

25
Chris_O

Použijte wp_register_style a wp_enqueue_style pro přidání šablony stylů. NEPOUŽÍVEJTE jednoduše odkaz styly na wp_head. Styly ve frontě umožňují v případě potřeby upravovat šablonu stylů.

Šablona stylů může být soubor .php:

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

my-stylesheet.php by vypadalo takto:

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

Dynamicky buduje soubor CSS a poté načítá přidávání velkého zátěže výkonu, což by mělo být velmi nízkou šířkou pásma řešení přidávání souboru CSS, zejména pokud existují proměnné v CSS, které budou zpracovány prostřednictvím WP. Protože jsou pro načítání jedné stránky vytvořeny dva různé soubory, WP se spustí dvakrát a spustí dvakrát všechny dotazy DB a je to velký nepořádek.

Pokud je váš posuvník pouze na jedné stránce a chcete, aby byly styly nastaveny dynamicky, pak je nejlepší přidat blok stylů do záhlaví.

V pořadí podle výkonu:

  1. Přidat malý blok stylů v hlavičce, dynamicky vytvořený - Velmi rychlý
  2. Přidat dynamickou šablonu stylů pomocí wp_enqueue_style - Medium
  3. Přidejte dynamický styl pomocí wp_enqueue_style - Very Slow
10
Dan Gayle

Takhle to obvykle dělám:

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

Měl jsem problémy se všemi doporučeními tohoto ilk - možná jsem trochu tlustý, nebo možná přispěvatelé ztratili společný dotek.

Vyřídil jsem kódování v souboru php plug-inu: -

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

Zdá se, že to funguje. Načte pouze ty stránky, které používají plugin. Načte se po tagu h1, který je v pořádku. Nevidím, jak by to mohlo být efektivnější nebo jasnější.

.... ale možná se mýlím - řekl jsem, že jsem trochu tlustý.

1
chazza