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

9

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

Comment cela fonctionne-t-il? incluent-ils déjà un fichier custom.css dans leur thème? Mais comment ce fichier est-il inclus dans le thème pour que le thème recherche le style dans custom.css en premier? Merci.

    
posée jay 13.07.2012 - 10:14

9 réponses

-2

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 pense que les concepteurs de thèmes souhaitent conserver autant que possible le schéma de présentation du thème. Donc, un fichier CSS personnalisé ne fait pas beaucoup de mal. Je pense que c'est plus une question de support. Avec le fichier CSS personnalisé, les décideurs peuvent aider ceux qui utilisent leurs thèmes plus facilement. Comme le fichier original style.css n’a pas été modifié, le concepteur de thème peut probablement consulter le fichier css personnalisé.

    
réponse donnée Wai Wong 13.07.2012 - 10:18
18

L'utilisation de @import dans WordPress pour l'ajout de fichiers CSS personnalisés n'est plus une pratique recommandée, 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'));
    
réponse donnée Fil Joseph 15.03.2016 - 07:22
2

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

    
réponse donnée p.a. 13.07.2012 - 10:57
2

Activez le thème enfant et ajoutez l'exemple de code suivant dans le fichier 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());
}
    
réponse donnée Abhishek K R 02.11.2017 - 08:43
0

Pour éviter l’écrasement des fichiers CSS et autres thèmes du thème principal, vous devez TOUJOURS utiliser un thème enfant dans WordPress. Dans le cas contraire, cela ne vous causera que de gros problèmes et des problèmes.

enlace

... et avec la facilité de configuration d'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 ensuite de remplacer l’un des fichiers de thème parent principaux de votre choix, en copiant simplement le fichier parent dans votre enfant ou en créant un nouveau fichier portant le même nom.

En ce qui concerne le fichier custom.css , il existe de nombreuses façons pour les développeurs de thèmes de gérer cela. Beaucoup le font simplement pour empêcher les clients qui ne souhaitent pas utiliser de thème enfant de modifier le principal style.css . fichier ....

De toute façon, vous ne devriez pas vous inquiéter à ce sujet. Tant que vous utilisez un thème pour enfants, vous ne devriez pas avoir à vous soucier de l'actualiser plus tard et de perdre vos modifications ... prenez l'habitude de toujours utiliser l'enfant. thèmes, vous me remercierez plus tard, je vous le promets.

    
réponse donnée sMyles 15.03.2016 - 17:12
0

Si vous souhaitez laisser votre code HTML. vous pouvez ajouter ceci à votre fichier css. Je pense que c'est mieux.

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

également en fonction de votre thème, cela fonctionnera avec les thèmes enfants et parents.

- rappelez-vous, css fonctionne de manière séquentielle (avec le même niveau d'identifiant, déjà utilisé), ainsi ce qui est en dernier dans votre fichier sera écrasé. mettez donc votre importation de style personnalisé en bas si vous souhaitez remplacer des éléments.

    
réponse donnée woony 13.07.2012 - 10:41
0

La meilleure solution consiste à associer tous les styles en file d'attente en une seule fonction , puis à les appeler à l'aide de wp_enqueue_scripts action . Ajoutez la fonction définie au fichier functions.php de votre thème, quelque part en dessous de 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' );

Remarque:

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



Basic supplémentaire:
La fonction wp_enqueue_style() peut avoir 5 paramètres: comme ça - wp_enqueue_style ( $ handle, $ src, $ deps, $ ver, $ media );
Dans le monde réel de WP Coding, nous ajoutons généralement les fichiers javascript / les bibliothèques jQuery qui fonctionnent de la manière suivante:

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

Le 5ème paramètre vrai / faux est optionnel (les 2ème, 3ème et 4ème paramètres sont également optionnels) mais très essentiel, il nous permet de placer nos scripts en pied de page lorsque nous utilisons le paramètre booléen comme vrai.

    
réponse donnée perfectionist1 21.06.2017 - 10:47
0

Aller à Apparence > Éditez le CSS de votre tableau de bord WordPress.

Voicil'écranavecl'éditeurCSSdebase.

Maintenant, collez votre CSS directement dans le texte par défaut. Vous pouvez supprimer le texte par défaut pour que votre CSS n'apparaisse que dans l'éditeur. Enregistrez ensuite la feuille de style et votre CSS sera actif.

    
réponse donnée suthanalley 29.07.2017 - 07:00
-2

Utilisez un thème enfant. C'est ton meilleur pari. Ainsi, si le thème est mis à jour, vous ne remplacerez pas les feuilles de style que vous avez créées.

enlace

Allez dans cette voie, vous vous remercierez plus tard.

    
réponse donnée thisisbolo 15.03.2016 - 17:00

Lire d'autres questions sur les étiquettes