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

16

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.

geai
la source
Si la personne qui pose cette question est allemande, il est presque certain que "remplacer" signifie "remplacer". Je suppose que la question ne dit pas que le fait de mettre du code dans le fichier custom.css entraînera la modification du fichier style.css. Je ne dis pas que cela est critique, je dis que je suis confus et c'est ma compréhension.
user34660

Réponses:

1

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é.

Wai Wong
la source
2
n'est plus la meilleure pratique - developer.wordpress.org
iantsch
@iantsch pourquoi pas? ce qui est mieux? Je n'ai rien trouvé de mieux.
Kangarooo
2
@Kangarooo voir la réponse fournie par Fil Joseph: Mettez en file d'attente les scripts / styles que vous souhaitez inclure dans l'en-tête ou le pied de page
iantsch
Avec HTTP / 1, il est recommandé de regrouper tous les styles de base dans un fichier réduit, au lieu d'ajouter un autre fichier CSS que le navigateur doit télécharger et traiter.
Andy
dans mon cas, c'était la meilleure solution.
Rich
27

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'));
Fil Joseph
la source
1
Ajoutez la dépendance du parent style.css pour vous assurer que votre mystyle.csschargé après le style.css!
Sumit
Je comprends la partie du chemin, mais qu'en est-il de la première partie, la partie «style-thème» et «mon-style», puis-je y mettre quelque chose? Et qu'en est-il dans le fichier functions.php quel est le code total pour que cela fonctionne?
Bruno Vincent
@BrunoVincent, vous pouvez nommer ce handleque vous voulez, tant qu'il est unique. Voir doc
Fahmi
4

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());
}
Abhishek KR
la source
2

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.

Pennsylvanie
la source
0

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.

sMyles
la source
0

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.

woony
la source
css ne fonctionne pas séquentiellement, il fonctionne en fonction de la spécificité de la règle; il ne retombe que sur les dernières remplacements précédents lorsque vous avez des règles d'égale spécificité
srcspider
vous avez raison, et c'est ce que je veux dire. mon séquentiel se réfère à l'écrasement. pas CSS dans son ensemble.
woony
0

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.

perfectionniste1
la source
0

Accédez à Apparence> Modifier le CSS à partir de votre tableau de bord WordPress. entrez la description de l'image ici

Voici l'écran avec l'éditeur CSS de base. entrez la description de l'image ici

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.

suthanalley
la source
-2

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.

thisisbolo
la source
Cela ne répond pas vraiment à la question. Vous pouvez alors expliquer comment ajouter la feuille de style dans le thème enfant.
kaiser