[Résolu] Modifier différents fichiers css par le thème enfant

  • WordPress :4.7
  • Statut : résolu
10 sujets de 1 à 10 (sur un total de 10)
  • Auteur
    Messages
  • #1624139
    Nino
    Participant
    Initié WordPress
    34 contributions

    Bonjour à toutes et à tous,

    Ma configuration WP actuelle

    • Version de PHP/MySQL : 5.6.28 / 5.6.35
    • Thème utilisé : crowdfunding (payant)
    • Extensions en place : BackWPup, Capability Manager Enhanced, Contact Form 7, Flamingo, InfiniteWP – Client, KC Pro!, KingComposer, Page-list, The Events Calendar, TinyMCE Advanced Language Pack, TinyMCE Advanced, Widget Data – Setting Import/Export Plugin , WooCommerce PayPal Express Checkout Gateway, WooCommerce Stripe Gateway, WooCommerce, Wordfence Security, Yoast SEO, WP Crowdfunding, WP Rocket
    • Nom de l’hébergeur : Likuid
    • Adresse du site : –

    Problème(s) rencontré(s) :
    après être passé par le codex puis par la lecture de différents forums traitant de l’installation d’un thème enfant (la récente, pas la @import), je n’ai pas trouvé de réponse explicite quant à ma recherche.

    J’arrive à installer un thème enfant avec son fichier style.css ainsi que le fichier functions.php dont voici le code :

    <?php
    
    function theme_enqueue_styles() {
    	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    	wp_enqueue_style( 'child-style'
    	,get_stylesheet_directory_uri() . '/style.css',
    	array( 'parent-style' )
        );
    }
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
    fichier functions.php

    J’ai bien compris (je crois) que ceci permet d’une part de définir où se trouve le style parent puis de dire que le style enfant dépend donc du type parent et qu’il sera pris en compte après !

    Ceci étant, j’ai dans mon thème parent d’autres fichiers css dans des sous dossiers.
    Ma question est la suivante : quelle est la bonne syntaxe pour dire que mon fichier style.css enfant prend également en compte ces autres fichiers css ?

    Ce sujet est parfois évoqué sur les autres forums mais jamais bien expliqué.
    Je suis désolé, je ne peux donner accès au site sur lequel je travaille car il est pour l’instant en production et vis-à-vis de mon client je ne puis pour l’instant le dévoiler.

    Vous remerciant.

    #1624332
    Nino
    Participant
    Initié WordPress
    34 contributions

    Bonjour à tous.
    Aucune idée des lignes de code à ajouter pour modifier plusieurs fichiers css du thème parent ?

    #1624447
    Flobogo
    Modérateur
    Maître WordPress
    15345 contributions

    Bonjour,

    Voici une suggestion, mais sans certitude :

    <?php
    function theme_ajout_styles() {
    	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/nom-du-dossier/style.css' );
    	wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css',
    	array( 'parent-style' )
        );
    }
    add_action( 'wp_enqueue_scripts', 'theme_ajout_styles' );

    J’aimerais bien que vous reveniez me dire ce que ça donne. (je ne suis pas codeuse, donc c’est un essai)

    #1624517
    Nino
    Participant
    Initié WordPress
    34 contributions

    Bonjour Flobogo,
    un grand merci pour votre soutien.

    Je vais de ce pas essayer votre fonction.
    Si je comprends un minimum ce que vous avez codé, c’est une nouvelle fonction à ajouter à celle que j’ai présenté ci-dessus !

    Je vous tiens bien évidemment au courant 🙂

    #1624521
    Flobogo
    Modérateur
    Maître WordPress
    15345 contributions

    Oui, l’idée c’est de créer une fonction – clone de la 1ère, donc presque identique mais avec un nom différent, bien sûr. Et d’y ajouter le chemin vers le dossier qui contient le fichier CSS à prendre en compte.

    Tiens, d’ailleurs je vois une erreur dans mon code : le fichier CSS contenu dans un dossier ne s’appelle généralement pas style.css. Imaginons que ce soit main.css le chemin sera le suivant :

    '/nom-du-dossier/main.css'
    #1624524
    Nino
    Participant
    Initié WordPress
    34 contributions

    Il se trouve que c’est justement main.css le nom d’un de ces fichiers 🙂
    Justement, pour ajouter un autre fichiers css, puis-je insérer directement dans cette fonction un nouveau wp_enqueue_style ?

    <?php
    function theme_ajout_styles() {
    	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/nom-du-dossier/main.css' );
    	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/autre-nom-du-dossier/autre-fichier.css' );
    	wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css',
    	array( 'parent-style' )
        );
    }
    add_action( 'wp_enqueue_scripts', 'theme_ajout_styles' );

    #1624532
    Nino
    Participant
    Initié WordPress
    34 contributions

    Flobogo, je reviens vers vous avec des résultats.
    Pour info, je vide le cache, purge l’URL puis relance via ctrl+F5 après chaque modification.

    Visiblement la fonction fonctionne.
    Ceci étant dit, elle fonctionne sous certaines conditions.

    Je m’explique : dans les options de mon thème, j’ai la possibilité d’ajouter du css.
    Ce css n’est pas copié dans le style.css de mon thème enfant (ça, ça reste un mystère pour moi !).

    Si j’ajoute du css dans ces options de thème afin de modifier le fichier main.css dans le sous-répertoire, cela ne fonctionne pas !
    Si j’ajoute du css dans le style.css enfant afin de modifier le fichier main.css dans le sous-répertoire, cela fonctionne.

    Après, si je copie tout le css des options du thème dans style.css, ça ne fonctionne plus !

    Donc c’est quand même bizarre, je ne comprends pas tout mais l’essentiel c’est que ça fonctionne.
    Merci Flobogo 🙂

    PS : je ne mets pas tout de suite résolu car je n’ai pas encore essayé avec plusieurs fichiers hors dossier principal du thème parent.

    #1624659
    Flobogo
    Modérateur
    Maître WordPress
    15345 contributions

    Votre message de 12 h 05 me parait tout à fait pertinent, je m’étais moi aussi posé la question d’une telle possibilité : mettre la liste de tous les fichiers à modifier en wp_enqueue_style dans la même fonction.

    Mais du coup, je ne comprends pas bien votre message de 12h47, et j’ai l’impression que vous essayez 2 choses à la fois, qui du coup, sont peut-être contradictoires.

    Donc, essayons d’éclaircir tout ça :

    • votre thème, et donc son thème-enfant qui adopte le même comportement (si on ne le modifie pas à ce niveau), vous offre une option pour ajouter du CSS. Si vous avez peu de choses à modifier, c’est cette option qu’il faut utiliser.
    • Il est tout à fait normal que le CSS ajouté là n’apparaisse pas dans le style.css du thème-enfant, puisque c’est enregistré ailleurs (dans les options)
      Le fichier style.css est situé dans le dossier du thème (peu importe qu’on parle d’un thème-parent ou d’un thème-enfent), lui-même situé dans wp-content/themes, visible par FTP
      Par contre, les modifications apportées aux options d’un thème sont enregistrées en base de données, rien à voir avec le FTP.
    • De fait, si un jour vous transférez le dossier du thème-enfant sur un autre site (ou en local), vous ne retrouverez pas vos modifications de CSS, puisqu’elles sont en base de données, et non dans le dossier du thème
    • La fonction dont nous parlons (qui permet d’ « appeler » les fichiers styles du thème-parent dans le thème-enfant), permet d’ajouter plus de modifications, de les préparer hors ligne à l’aide d’un éditeur adapté (Notepad++ par exemple), et surtout, permet de conserver ces modifications directement dans dossier du thème-enfant puisqu’elles sont ajoutées aux fichiers de style du thème-enfant.

    Donc, selon moi, il faut arriver à une écriture correcte de la fonction (si vous mettez tout dans la même) ou de plusieurs fonctions.
    C’est pourquoi il me semblait plus simple d’essayer d’abord avec une nouvelle fonction (celle « clonée » par rapport à la 1ère), de vérifier si ça fonctionne, puis de les grouper ensuite en une seule fonction.

    Petit rappel (au cas où) : dans les fichiers CSS du thème-enfant, il ne faut pas copier l’intégralité des fichiers du thème-parent, il ne faut y mettre que les modifications à apporter.

    #1624865
    Nino
    Participant
    Initié WordPress
    34 contributions

    /* Zut, j’avais écrit un message qui a disparu */

    Je disais : bonjour et merci de l’investissement Flobogo.

    J’ai fait des tas de tests de syntaxe etc… avec des résultats parfois probants, parfois pas mais en tout les cas c’est chronophage et je ne peux pas me permettre de perdre plus de temps vis-à-vis de mon client.

     

    J’ai trouvé une solution qui fonctionne très bien :
    – Dans functions.php, j’utilise la fonction énoncé dans ce premier message
    – Puis dans le backoffice de WP : Apparence > Personnaliser > CSS additionnel
    Et là je modifie tout le CSS que je veux en direct avec l’aide de Firebug.

    Ca fonctionne parfaitement, je n’ai pas besoin de plus.
    Encore merci et à bientôt 🙂

    #1624919
    Flobogo
    Modérateur
    Maître WordPress
    15345 contributions

    C’est vrai que WP 4.7 permet le CSS additionnel quelque soit le thème, donc si tout se passe bien en direct, tant mieux si ça passe comme ça. 🙂

     

10 sujets de 1 à 10 (sur un total de 10)
  • Vous devez être connecté pour répondre à ce sujet.