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

Certains thèmes vous demandent de ne pas modifier le fichier style.css, utilisez plutôt le fichier custom.css. Si vous écrivez du code sur custom.css, il écrasera le même style d'élément dans style.css. Je pense que cela est fait afin d'éviter la perte de styles utilisateur lors de la mise à jour du thème, est-ce le cas?

Comment ça marche? Incluent-ils déjà le fichier custom.css dans leur thème? Mais comment ce fichier est-il inclus dans le thème pour qu'il recherche d'abord le style dans custom.css? Merci.

J'ajoute généralement ce morceau de code si je veux ajouter un autre fichier CSS

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

Je crois que les créateurs de thèmes veulent conserver autant que possible la conception de la mise en page du thème. Un fichier css personnalisé ne fait donc pas beaucoup de mal. Je pense que c'est plus une question de support. Avec un fichier CSS personnalisé, les créateurs peuvent aider ceux qui utilisent leurs thèmes plus facilement. Étant donné que le style.css d'origine n'est pas modifié, le créateur de thème peut probablement consulter le fichier css personnalisé.

L'utilisation de @import dans WordPress pour ajouter des CSS personnalisés n'est plus la meilleure pratique, mais vous pouvez le faire avec cette méthode.

la meilleure pratique consiste à utiliser la fonction wp_enqueue_style()dans functions.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'));

Activez le thème enfant et ajoutez l'exemple de code suivant dans la fonction.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());
}

Ma proposition serait d'utiliser des thèmes enfants. Il est très facile à mettre en œuvre et toutes les modifications que vous effectuez (y compris les styles) sont complètement isolées du thème d'origine.

Pour empêcher l'écrasement du CSS du thème principal ou d'autres fichiers, vous devez TOUJOURS utiliser un thème enfant dans WordPress ... ne pas le faire ne vous causera que des maux de tête et des problèmes majeurs.

https://codex.wordpress.org/Child_Themes

... et avec la facilité avec laquelle il est possible de configurer un thème enfant, il n'y a aucune raison de ne pas en utiliser un.

L'utilisation d'un thème enfant vous permettra alors de remplacer l'un des principaux fichiers de thème parent que vous souhaitez, simplement en copiant du parent dans votre enfant, ou en créant un nouveau fichier du même nom.

En ce qui concerne le custom.cssfichier, il existe de nombreuses façons pour les développeurs de thèmes de gérer cela ... beaucoup d'entre eux le font simplement pour essayer d'empêcher les clients qui ne veulent pas utiliser un thème enfant, de modifier le style.cssfichier principal ...

Quoi qu'il en soit, vous ne devriez pas vous inquiéter à ce sujet, tant que vous utilisez un thème enfant, vous ne devriez pas avoir à vous soucier de mettre à jour votre thème plus tard et de perdre vos modifications ... prenez l'habitude de toujours utiliser des thèmes enfants, vous me remerciera plus tard, je le promets.

Si vous voulez laisser votre html avec vous. vous pouvez l'ajouter à votre fichier css. Je pense que c'est mieux.

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

également en fonction de votre thème, il fonctionnera avec les thèmes enfant et parent.

- gardez à l'esprit, css fonctionne séquentiellement (lorsque vous utilisez le même niveau d'identifiant, déjà utilisé), donc ce qui est le dernier dans votre fichier sera écrasé. mettez donc votre import de style personnalisé en bas si vous voulez remplacer les choses.

La meilleure façon est de combiner tous les styles mis en file d'attente dans une seule fonction , puis de les appeler à l'aide d'une wp_enqueue_scriptsaction . Ajoutez la fonction définie au functions.php de votre thème quelque part sous la configuration initiale.

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' );

Notez s'il vous plaît :

Le troisième paramètre est le tableau de dépendances qui indique si cette feuille de style dépend d'une autre feuille de style. Ainsi, dans notre code ci-dessus, custom.css dépend de style.css

|
Basic supplémentaire: la
wp_enqueue_style() fonction peut avoir 5 paramètres: comme ceci - wp_enqueue_style ( $ handle, $ src, $ deps, $ ver, $ media );
Dans le monde réel du codage WP, nous ajoutons généralement des fichiers javascript / bibliothèques jQuery à l'intérieur de cette fonction, comme ceci:

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

Le 5ème paramètre true / false est facultatif (les 2e, 3e et 4e paramètres sont également opt.) Mais très essentiel, il nous permet de placer nos scripts en pied de page lorsque nous utilisons le paramètre booléen comme true.

Accédez à Apparence> Modifier le CSS à partir de votre tableau de bord WordPress.

Voici l'écran avec l'éditeur CSS de base.

Collez maintenant votre CSS directement dans le texte par défaut. Vous pouvez supprimer le texte par défaut afin que votre CSS n'apparaisse que dans l'éditeur. Enregistrez ensuite la feuille de style et votre CSS sera en ligne.

Utilisez un thème enfant. C'est votre meilleur pari. De cette façon, si le thème est mis à jour, vous ne remplacerez pas les feuilles de style que vous avez créées.

https://codex.wordpress.org/Child_Themes

Allez dans cette voie, vous vous remercierez plus tard.