Comment ajouter un fichier css personnalisé dans le thème?

J'ajoutegénéralement cemorceau de code sije veux ajouter un autrefichier css

 <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/my_custom_css.css" type="text/css" media="screen" />
 

Jepense que les créateurs dethèmes veulent conserver autant quepossible la conception de lamiseen page duthème.Donc,unfichier csspersonnaliséne faitpasbeaucoup demal.Jepense que c'estplus une question de soutien.Avec unfichier csspersonnalisé,les créateurspeuvent aider ceux qui utilisent leursthèmesplusfacilement.Parce que le style.css d'originen'estpasmodifié,le créateur dethèmepeutprobablementjeter un coup d'œil dans lefichier csspersonnalisé.

I usually add this piece of code if I want to add another css file

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/my_custom_css.css" type="text/css" media="screen" />

I believe the theme makers want to retain as much as possible of the theme's layout design. So a custom css file doesn't hurt much. I think it's more of a support question. With custom css file, the makers can help those who use their themes more easier. Because the original style.css is unaltered, so the theme maker can probably take a look in the custom css file.

Utiliser @import dans WordPresspour ajouter des csspersonnalisésn'estplus lameilleurepratique,mais vouspouvez lefaire avec cetteméthode.

lameilleurepratique consiste à utiliser lafonction wp_enqueue_style() dansfunctions.php.

Exemple :

 wp_enqueue_style ('theme-style', get_template_directory_uri().'/css/style.css');
wp_enqueue_style ('my-style', get_template_directory_uri().'/css/mystyle.css', array('theme-style'));
 

Using @import in WordPress for adding custom css is no longer the best practice, yet you can do it with that method.

the best practice is using the function wp_enqueue_style() in functions.php.

Example:

wp_enqueue_style ('theme-style', get_template_directory_uri().'/css/style.css');
wp_enqueue_style ('my-style', get_template_directory_uri().'/css/mystyle.css', array('theme-style'));

Activez lethèmeenfantet ajoutez l'exemple de code suivant dans lefunction.php

 add_action( 'wp_enqueue_scripts', 'child_enqueue_styles');

function child_enqueue_styles() {

wp_enqueue_style( 'reset-style', get_template_directory_uri() . '/css/reset.css', array());
}
 

Activate the child theme and add the following example code in the function.php

add_action( 'wp_enqueue_scripts', 'child_enqueue_styles');

function child_enqueue_styles() {

wp_enqueue_style( 'reset-style', get_template_directory_uri() . '/css/reset.css', array());
}

Maproposition serait d'utiliser desthèmesenfants. Ilesttrèsfacile àmettreen œuvreet toutes lesmodifications que vousfaites (y compris les styles) sont complètementisolées duthème d'origine.

My proposal would be to use child themes. It is very easy to implement and all modifications you do (including styles) are completely isolated from the original theme.

Si vous souhaitez laisser votre HTML avec vous. vouspouvez l'ajouter à votrefichier css.Jepense que c'estmieux.

 @import url("../mycustomstyle.css");
 

égalementen fonction de votrethème,ilfonctionnera avec lesthèmesenfantset parents.

-gardez à l'esprit que cssfonctionne demanière séquentielle (lorsque vous utilisez lemêmeniveau d'identifiant,déjà utilisé),donc ce quiesten dernier dans votrefichier sera écrasé. alorsmettez votreimportation de stylepersonnaliséen bas si vous voulez remplacer des éléments.

If you want to leave your html along. you can add this to your css file. I think this is better.

@import url("../mycustomstyle.css");

also depending on your theme it will work with child and parent themes.

-- keep in mind, css works sequential (when using the same level of identifier, already used ) , so what is last in your file will overwrite. so put your customstyle import at the bottom if you want to override stuff.

Pour éviter d'écraser le CSS duthèmeprincipal ou d'autresfichiers,vous devez TOUJOURS utiliser unthèmeenfant dans WordPress ...ne pas lefairene vous causera que desmaux detêteet desproblèmesmajeurs sur la route.

https://codex.wordpress.org/Child_Themes

...et avec lafacilité de configuration d'unthèmeenfant,iln'y a aucune raison que vousne devriezpasen utiliser un.

L'utilisation d'unthèmeenfant vouspermettra alors de remplacer l'un desfichiers dethèmeparentprincipal que vous souhaitez,simplementen copiant duparent dans votreenfant,ouen créant unnouveaufichier avec lemêmenom.

En ce qui concerne lefichier custom.css,ilexiste denombreusesfaçons dont les développeurs dethèmesgèrent cela ...beaucoup d'entreeux lefont simplementpouressayer d'empêcher les clients quine souhaitentpas utiliser dethèmeenfant,de lamodification dufichierprincipal style.css ....

Detoutefaçon,vousne devriezpas vousinquiéter à ce sujet,tant que vous utilisez unthèmeenfant,vousne devriezpas avoir à vous soucier de lamise àjour de votrethèmeplustardet de laperte de vosmodifications ...prenez l'habitude detoujours utiliser childthèmes,vousme remercierezplustard,je vous lepromets.

To prevent overwritting of main theme CSS or other files, you should ALWAYS use a child theme in WordPress ... not doing so will only cause you major headaches and problems down the road.

https://codex.wordpress.org/Child_Themes

... and with how easy it is to setup a child theme, there is no reason you shouldn't be using one.

Using a child theme will then allow you to override any of the main parent theme files you want, simply by copying from parent into your child, or by creating a new file with the same name.

Regarding the custom.css file there's numerous ways that theme developers handle this ... a lot of them do this simply to try and prevent clients who don't want to use a child theme, from editing the main style.css file ....

Either way you shouldn't be worried about that, as long as you use a child theme you shouldn't have to worry about updating your theme later on and losing your changes ... get in the habit of always using child themes, you will thank me later, i promise.

Lemeilleurmoyenest de combinertous les stylesmisen file d'attenteen une seulefonction ,puis de les appeler à l'aide de l'action wp_enqueue_scripts . Ajoutez lafonction définie aufunctions.php de votrethème quelquepart sous la configurationinitiale.

< Bloc de code:

 function add_theme_scripts() {
    wp_enqueue_style( 'style', get_template_directory_uri() . '/css/style.css' );
    wp_enqueue_style ( 'custom', get_template_directory_uri () . '/css/custom.css', array( 'style' ) );
}
add_action ( 'wp_enqueue_scripts', 'add_theme_scripts' );
 

Remarque:

Letroisièmeparamètreest letableau de dépendances quiindique si cettefeuille de style dépend ounon d'une autrefeuille de style. Donc,dansnotre code ci-dessus,custom.css dépend de style.css

|
Basic supplémentaire:
Lafonction wp_enqueue_style()peut avoir 5paramètres: comme de cettefaçon - wp_enqueue_style ( $ handle,$ src,$ deps,$ ver,$media );
Dans lemonde réel de WP Coding,nous ajoutonsgénéralement également desfichiersjavascript/bibliothèquesjQuery à l'intérieur de cettefonction comme suit:

 wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);
 

Le 5èmeparamètretrue/falseest optionnel (les 2ème,3èmeet 4èmeparamètres sont également optionnels)maistrèsessentiel,ilnouspermet deplacernos scriptsen pied depage lorsquenous utilisons leparamètrebooléen commetrue.

The best way is to combine all enqueued styles into a single function and then call them using wp_enqueue_scripts action. Add the defined function to your theme's functions.php somewhere below the initial setup.

Code Block:

function add_theme_scripts() {
    wp_enqueue_style( 'style', get_template_directory_uri() . '/css/style.css' );
    wp_enqueue_style ( 'custom', get_template_directory_uri () . '/css/custom.css', array( 'style' ) );
}
add_action ( 'wp_enqueue_scripts', 'add_theme_scripts' );

Please Note :

3rd parameter is the dependency array which refers to whether or not this stylesheet is dependent on another stylesheet. So, in our above code custom.css is dependent on style.css

|
Additional Basic:
wp_enqueue_style() function may have 5 parameters: like this way - wp_enqueue_style( $handle, $src, $deps, $ver, $media );
In real world of WP Coding, usually we also add javascript files/jQuery libraries inside that function like this way:

wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);

The 5th parameter true/false is optional (2nd, 3rd and 4th params are also opt.) but very essential, it allows us to place our scripts in footer when we use the boolean parameter as true.

Allez dans Apparence> Modifier le CSS àpartir de votretableau debord WordPress.

Voici l'écran avec l'éditeur CSS debase.

Collezmaintenant votre CSS directement dans letextepar défaut.Vouspouvez supprimer letextepar défautpour que votre CSSn'apparaisse que dans l'éditeur.Ensuite,enregistrez lafeuille de styleet votre CSS seraen ligne.

Go to Appearance > Edit CSS from your WordPress Dashboard.

Here is the screen with basic CSS editor.

Now paste your CSS directly to the default text. You can delete the default text so that your CSS only appears in the editor. Then save the stylesheet and your CSS will be live.

Si vous souhaitez éviter lesproblèmes de cache dunavigateur Web,vous devezinclure la version dufichier,comme dans cetexemple.

 wp_enqueue_style ('theme-style', get_template_directory_uri().'/path/to/css/style.css?v=' . filemtime(get_template_directory() . '/path/to/css/style.css'));
 

Dans ce cas,j'écris la dernière date demodification à l'heure unix commeparamètre de requête.

If you want to avoid web browser cache problems, you need include the file version, like in this example is shown.

wp_enqueue_style ('theme-style', get_template_directory_uri().'/path/to/css/style.css?v=' . filemtime(get_template_directory() . '/path/to/css/style.css'));

In this case, I write the last modification date in unix time as a query param.

Utilisez unthèmeenfant.C'est votremeilleurpari.De cettefaçon,si lethèmeestmis àjour,vousne remplacerezpas lesfeuilles de style que vous avez créées.

https://codex.wordpress.org/Child_Themes

Suivez cette voie,vous vous remercierezplustard.

Use a child theme. It's your best bet. This way if the theme is ever updated, you won't override the stylesheets you've created.

https://codex.wordpress.org/Child_Themes

Go this route, you'll thank yourself later.