web-dev-qa-db-fra.com

wp style de mise en file d'attente et profondeur de la feuille de style

Comment puis-je ajouter une feuille de style au bas de la balise <head>, de sorte que s’il est nécessaire de remplacer certains autres styles ajoutés auparavant, elle le sera également.

J'ai entendu parler de wp_enqueue_style et il semble y avoir un paramètre de profondeur. Est-ce ce dont j'ai besoin? Pour que ma feuille de style soit la dernière de la balise <head>?

Si oui, que dois-je mettre dans le paramètre depth?

Merci.

phpcss
1
Marcelo Noronha

Vous pouvez ajouter un numéro de priorité à l'action wp_enqueue_scripts. Vous pouvez donc donner à l’action accrochée à la file d’attente de votre feuille de style une priorité de 999. Ainsi:

function high_priority_style() {
  Wp_enqueue_style('important', get_template_directory_uri() . '/css/important.css');
}
add_action('wp_enqueue_scripts', 'high_priority_style', '999');

Une méthode plus simple consiste à mettre en file d'attente toutes vos feuilles de style, y compris style.css dans la même fonction, reliées à wp_enqueue_scripts et elles seront ajoutées dans l'ordre dans lequel elles apparaissent dans la fonction, comme suit:

  function styles() {
  wp_enqueue_style('low-priority', get_template_directory_uri() . '/css/low-priority.css');
  wp_enqueue_style('theme', get_template_directory_uri() . '/style.css');
  wp_enqueue_style('important', get_template_directory_uri() . '/css/important.css');
}
add_action('wp_enqueue_scripts', 'styles');

J'ai inclus une feuille de style de priorité inférieure dans cet exemple, qui ressemblerait au CSS pour un système de grille ou de structure.

Assurez-vous de supprimer tous les liens codés en dur vers les feuilles de style dans header.php lorsque vous ajoutez des styles de cette manière (c'est-à-dire de la bonne manière).

2
JPollock

De la source, reformaté pour une meilleure lisibilité:

function wp_enqueue_style( 
    $handle, // unique name 
    $src = false, // URL
    $deps = array(), // array of dependencies, other styleheets unique names.
    $ver = false, // version
    $media = 'all' // media
)

Donc, $deps est un tableau de descripteurs de feuille de style uniques. Si vous souhaitez répertorier les feuilles de style que vous souhaitez attendre, WordPress créera automatiquement le bon ordre pour vous.

Exemple:

$template_dir_uri = get_template_directory_uri();
wp_register_style( 'style_1', "$template_dir_uri/style1.css" );
wp_register_style( 'style_2', "$template_dir_uri/style2.css" );
wp_register_style( 'style_3', "$template_dir_uri/style3.css", array ( 'style_1', 'style_2' )  );
wp_register_style( 'style_4', "$template_dir_uri/style4.css", array ( 'style_3', 'default_theme_css_handle' ) );

wp_enqueue_style( 'style_4' );

Maintenant, les éléments <link> des feuilles de style seront imprimés dans le bon ordre 1, 2, 3, 4 .

3
fuxia