Ressources de thème

Last update: Wed Jun 11 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Rubriques :

Créé pour :

Débutant
Intermédiaire
Administration
Utilisateur ou utilisatrice

Les fichiers statiques sont l’ensemble des ressources, telles que CSS, polices, images et JavaScript, utilisées par un thème. L’emplacement des fichiers statiques est spécifié dans la configuration URL de base. Vous pouvez ajouter une signature numérique à l’URL de chaque fichier statique pour permettre aux navigateurs de détecter lorsqu’une version plus récente est disponible. La version la plus récente du fichier est utilisée si la signature diffère de ce qui est stocké dans le cache du navigateur.

Dans le cas d’une installation standard, les ressources associées à un thème sont organisées dans le dossier web situé à l’emplacement suivant, sous la racine Commerce.

[commerce_root]/app/design/frontend/Magento/[theme_name]/web

Ajouter une signature numérique aux URL de fichiers statiques

Dans la barre latérale Admin, accédez à Stores > Settings>Configuration.
Dans le panneau de gauche, développez Advanced et choisissez Developer.
Développez la section Static Files Settings .

{width="500" modal="regular"}
Définissez Sign Static Files sur Yes.
Cliquez ensuite sur Save Config.

Type de fichier

Description

CSS

Contrôlez le style visuel associé à la peau. Exemple d'emplacement sur le serveur : [commerce]/app/design/frontend/Magento/[theme]/web/css

Polices

Fournissez les polices qui peuvent être utilisées par le thème. Emplacement sur le serveur : [commerce]/app/design/frontend/Magento/[theme]/web/fonts

Images

Fournissez les ressources graphiques utilisées par le thème, notamment les boutons, les textures d’arrière-plan, etc. Exemple d'emplacement sur le serveur : [commerce]/app/design/frontend/Magento/[theme]/web/images

Routines JavaScript et fonctions appelables spécifiques à un thème. Exemple d'emplacement sur le serveur : [commerce]/app/design/frontend/Magento/[theme]/web/js

Fusion de fichiers CSS

Dans le cadre de l’optimisation de votre site et de la réduction du temps de chargement des pages, vous pouvez réduire le nombre de fichiers CSS distincts en les fusionnant en un seul fichier condensé. Si vous ouvrez un fichier CSS fusionné, vous voyez un flux continu de texte, sans sauts de ligne. Vous ne pouvez pas modifier le fichier fusionné. Il est donc préférable d’attendre d’être en mode de développement et de ne plus apporter de modifications fréquentes au CSS.

NOTE

Les fichiers CSS peuvent être fusionnés à partir du panneau Admin uniquement lorsque vous travaillez en mode développeur.

Dans la barre latérale Admin, accédez à Stores > Settings>Configuration.
Dans le panneau de gauche, Advanced et choisissez Developer.
Développez la section CSS Settings .

{width="500" modal="regular"}

Pour une description détaillée de ces options de configuration, voir Paramètres CSS dans le Guide de référence de configuration.
Définissez Merge CSS Files sur Yes.
Cliquez ensuite sur Save Config.

Fusion de fichiers JavaScript

Plusieurs fichiers JavaScript peuvent être fusionnés en un seul fichier condensé afin de réduire le temps de chargement des pages. Si vous ouvrez un fichier JavaScript fusionné, vous verrez un flux de texte continu, sans sauts de ligne. Si vous avez terminé le processus de développement et que le code ne contient aucune erreur, vous pouvez envisager de fusionner les fichiers.

NOTE

Les fichiers JavaScript peuvent être fusionnés à partir du panneau Admin uniquement lorsque vous travaillez en mode Développeur.

Dans la barre latérale Admin, accédez à Stores > Settings>Configuration.
Dans le panneau de gauche, Advanced et choisissez Developer.
Développez la section JavaScript Settings .

{width="600" modal="regular"}

Pour une description détaillée de ces options de configuration, consultez Paramètres JavaScript dans la Référence de configuration.
Définissez Merge JavaScript Files sur Yes.
Cliquez ensuite sur Save Config.

recommendation-more-help

2b0136b4-ef75-405f-9734-60d741f198de