web-dev-qa-db-fra.com

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

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, le même style d'élément sera écrasé dans style.css. Je pense que cela est fait afin d'éviter la perte de styles d'utilisateurs 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 que le thème recherche le style dans custom.css en premier? Merci.

theme-developmentthemescss
11
jay

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'));
24
Fil Joseph

Activer le thème enfant et ajouter 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());
}
2
Abhishek K R

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

2
p.a.

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

https://codex.wordpress.org/Child_Themes

... et avec la facilité d'installation 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 n'importe lequel des fichiers de thème parent principaux de votre choix, simplement en copiant 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, les développeurs de thèmes gèrent cela de nombreuses façons ... beaucoup le font simplement pour empêcher les clients qui ne souhaitent pas utiliser de thème enfant de modifier le fichier principal style.css ....

De toute façon, 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 va me remercier plus tard, je le promets.

0
sMyles

Allez à Apparence> Modifier le CSS à partir de votre tableau de bord WordPress.  enter image description here 

Voici l'écran avec l'éditeur CSS de base.  enter image description here 

Collez maintenant 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. Puis enregistrez la feuille de style et votre CSS sera en direct.

0
suthanalley

Le meilleur moyen est de combiner 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' );

Notez s'il vous plaît :

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:
wp_enqueue_style() fonction peut avoir 5 paramètres: comme ceci - wp_enqueue_style ( $ handle, $ src, $ deps, $ ver, $ media );
Dans le monde réel de WP Codage, nous ajoutons généralement également des fichiers javascript/des bibliothèques jQuery à l'intérieur de cette fonction, comme suit:

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.

0
perfectionist1

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

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

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

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

0
woony