CSS personnalisé ou thème enfant ?

WordPress :6.1
Statut : résolu

Ce sujet contient 22 réponses, 4 participants et a été mis à jour pour la dernière fois par Broussaille, le il y a 9 mois et 3 semaines.

15 sujets de 1 à 15 (sur un total de 23)

1 2 →

Auteur

Messages
9 décembre 2022 à 15 h 56 min #2434656
Broussaille
Participant

Chevalier WordPress
351 contributions
Bonjour à toutes & à tous.

Une question que je me pose depuis un moment : est-il encore utile de créer un thème enfant pour y ajouter du css en « petite » quantité, puisqu’on peut le faire via le css personnalisé du customizer ? J’avais lu sur ce forum (mais je ne sais plus où), qu’utiliser le css personnalisé (du customizer), ce n’était valable que pour peu d’ajout. D’accord mais… combien de lignes, etc… L’avantage certain du customizer, c’est le changement effectif direct qui est fait dès l’enregistrement. Mais sinon ? Là, par exemple j’ai ajouté ça :
```
body{font-family: Comic Sans MS;}
.colors-dark .site-content-contain {background: #58909d;}
.colors-dark .navigation-top {background: #58909d;}
.colors-dark .main-navigation ul {background: transparent;}
a {font-size: 15px;}
.navigation-top {
  background: #58909d;
  border-bottom: none;
  border-top: none;}
.page-header, .entry-meta {
  display: none;}
.entry-title, .navigation-top a, .wpcf7 form.sent .wpcf7-response-output {
  border: 1px solid #1b72bd;
  border-radius: 10px;
  max-width: max-content;
  padding: 5px;}
.more-link {display: flex;justify-content: center; border: 1px solid; border-radius: 10px;  border-radius: 10px;max-inline-size: max-content;
  padding: 3px;}
.colors-dark .entry-content a, .colors-dark .entry-title a, .colors-dark .site-info a {box-shadow: none;}
.site-header .navigation-top .menu-scroll-down {color: #0be7fd;}
.colors-dark .single-featured-image-header,.colors-dark .entry-content a {
  background-color: #58909d;}
.colors-dark .single-featured-image-header, .colors-dark .navigation-top, .colors-dark .main-navigation li, .colors-dark .entry-footer, .colors-dark #comments {
  border-bottom-color: #58909d;}
.single-featured-image-header img {
border-radius: 20px;}
.colors-dark .post-navigation a {box-shadow:none;}
.nav-subtitle, .nav-title-icon-wrapper {display: none;}
.colors-dark .entry-content a img, .colors-dark .comment-content a img, .colors-dark .widget a img {
  -webkit-box-shadow: 0 0 0 8px #326864;
  box-shadow: 0 0 15px #326864;}
.colors-dark input[type="text"], .colors-dark input[type="email"], .colors-dark input[type="url"], .colors-dark input[type="password"], .colors-dark input[type="search"], .colors-dark input[type="number"], .colors-dark input[type="tel"], .colors-dark input[type="range"], .colors-dark input[type="date"], .colors-dark input[type="month"], .colors-dark input[type="week"], .colors-dark input[type="time"], .colors-dark input[type="datetime"], .colors-dark input[type="datetime-local"], .colors-dark input[type="color"], .colors-dark textarea, .colors-dark select, .colors-dark fieldset, .wpcf7 input[type="file"], .colors-dark input[type="submit"] {background: #F5F6CE;
border: 2px solid #2E2EFE;
border-radius: 10px;
color: black;}
.colors-dark input[type="text"]:focus, .colors-dark input[type="email"]:focus, .colors-dark input[type="url"]:focus, .colors-dark input[type="password"]:focus, .colors-dark input[type="search"]:focus, .colors-dark input[type="number"]:focus, .colors-dark input[type="tel"]:focus, .colors-dark input[type="range"]:focus, .colors-dark input[type="date"]:focus, .colors-dark input[type="month"]:focus, .colors-dark input[type="week"]:focus, .colors-dark input[type="time"]:focus, .colors-dark input[type="datetime"]:focus, .colors-dark input[type="datetime-local"]:focus, .colors-dark input[type="color"]:focus, .colors-dark textarea:focus, .colors-dark select:focus, .colors-dark fieldset{color: black;}
.pswp {
	--pswp-bg: #8cd4e6;}
.wpcf7-form.init a {
  color: #2e2efe;
  font-size: large;}
```
Ce n’est pas énorme, et ça fonctionne très bien évidemment, mais je suis old school, et pour moi le thème enfant ça reste un peu le B.A / BA (J’ai fait mes premières modif avec l’aide de Philyon, Flobogo, et quelques autres…ça ne nous rajeunit pas !)

Fichiers joints :
Vous devez être connecté pour voir les fichiers joints.
10 décembre 2022 à 12 h 03 min #2434784

mathieu42
Participant

Maître WordPress
1989 contributions

la différence entre les 2 endroits est que le code css du thème enfant est dans un fichier séparé.
cela permet au navigateur de mettre ce fichier dans le cache pour afficher la page un peu plus vite.

et à l’inverse le code css mis dans « CSS additionnel » est mis dans le code html de la page et est donc présent sur chaque page.

10 décembre 2022 à 15 h 46 min #2434812

Broussaille
Participant

Chevalier WordPress
351 contributions

Bonjour mathieu42.

Il me semblait que j’avais lu quelque chose comme ça quelque part, mais j’avais un doute. Merci donc pour la réponse. Je viens de « rebasculer » mon css dans mon thème enfant. Bon, évidemment, tant que ça se « mette » en place, le look a un peu changé, mais rien d’insupportable. Et bonnes fêtes de fin d’année (si je ne reviens pas poser une question d’ici là… ).

12 décembre 2022 à 0 h 27 min #2435010

Flobogo
Modérateur

Maître WordPress
19580 contributions

Bonjour,

Je suis du même avis que Mathieu42. Inutile d’aller afficher tout un tas de CSS (ou même juste un peu) dans le HTML des pages du site.

Je dirais que le seul avantage du CSS personnalisé, c’est qu’on peut le tester plus vite qu’en éditant/modifiant un fichier de style avec Notepad++ et envoi du fichier modifié via FTP. Mais une fois que la modif vous convient, il suffit de l’intégrer au thème-enfant.

Je viens de « rebasculer » mon css dans mon thème enfant (…) tant que ça se « mette » en place

C’est immédiat. Sauf si vous avez une extension de cache, qu’il faut vider pour que les modif soient visibles.

_______________________________________________

PS : « ça ne nous rajeunit pas ! » … Ah ben, merci !! ?

12 décembre 2022 à 15 h 15 min #2435104
Broussaille
Participant

Chevalier WordPress
351 contributions
Bonjour mathieu42, et bonjour Flobogo ?.

Bon, ben non ça ne fonctionne pas. Quand je colle mon code dans le customizer, effectivement c’est pris en compte immédiatement. Mais quand je le mets dans mon thème enfant, rien n’est pris en compte (si ce n’est les bordures des titres, allez savoir pourquoi… et pas dans tous les navigateurs !). J’ai vérifié le code d’activation de mon thème enfant dans mon functions.php, il est bon. Ou je suis aveugle :
```
<?php
/**
** activation theme (so.blog)
**/
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
 wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );}
// logo personnalise
function childtheme_custom_login() {
 echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/login.css" />';}
add_action('login_head', 'childtheme_custom_login');
function year_shortcode () {
$year = date_i18n ('Y');
return $year;
}
add_shortcode ('year', 'year_shortcode');
// Modifier l'URL du logo de connexion sur la page d'administration 

add_filter( 'login_headerurl', 'wpm_custom_login_url' );

function wpm_custom_login_url($url) {
// On définit la nouvelle URL du lien ici
  return 'https://so.broussaillestore.fr/';
}
?>
```
Et mon code style.css (que j’ai mis dans mon premier post) est bon aussi, a priori. Je ne comprends pas. D’habitude ça marche !
12 décembre 2022 à 15 h 18 min #2435105

Broussaille
Participant

Chevalier WordPress
351 contributions

Ah, au cas où… vous auriez du temps à perdre…

So.Broussaille

12 décembre 2022 à 15 h 33 min #2435107

mathieu42
Participant

Maître WordPress
1989 contributions

je vois ça, j’ai l’impression que le code css du thème enfant est pris en compte :
https://wtf.roflcopter.fr/pics/ISWwuZIZ/cxpVza3r.png

c’est peut-être votre navigateur qui a une ancienne version en cache ?

12 décembre 2022 à 15 h 41 min #2435108
mathieu42
Participant

Maître WordPress
1989 contributions
pour utiliser le numéro de version qui est dans le fichier css du thème enfant, chargez les fichiers css avec ce code :
```
add_action("wp_enqueue_scripts", function () {
	
	wp_enqueue_style(
		  "style-parent"
		, get_template_directory_uri() . "/style.css"
		, []
		, wp_get_theme()->parent()->version
	);
	
	wp_enqueue_style(
		  "twentyseventeen-style"
		, get_stylesheet_uri()
		, ["style-parent"]
		, wp_get_theme()->version
	);
	
	
});
```
12 décembre 2022 à 17 h 54 min #2435141

Broussaille
Participant

Chevalier WordPress
351 contributions

Alors pour votre « capture » (c’est quoi l’outil ?), justement vous voyez la version du thème sans modif de couleurs de fond, etc… Mon css devrait donner un fond bleu…

Et votre code, je le colle dans mon functions.php (thème enfant), mais version ? Il faut que je mette une version, ou je laisse comme ça ?

12 décembre 2022 à 17 h 55 min #2435142

Broussaille
Participant

Chevalier WordPress
351 contributions

Et sinon, merci. Le nez dans le code, on en oublie les bonnes manières !

12 décembre 2022 à 18 h 45 min #2435162

mathieu42
Participant

Maître WordPress
1989 contributions

pour le code, il est à mettre à la place du « wp_enqueue_style » qui est dans functions.php.

pour la capture, je l’ai faite avec firefox.

et au sujet du fond bleu, le fichier css est bien pris en compte, c’est le code css en lui même qui n’est pas bon puisqu’il y a l’autre couleur qui a une priorité plus haute. vous pouvez voir cela avec la console de développement de votre navigateur.

12 décembre 2022 à 20 h 06 min #2435176

Broussaille
Participant

Chevalier WordPress
351 contributions

Ok, merci, je vais regarder ça. Je ne suis pas très performant avec les priorités dans le css.

Bonne soirée.

12 décembre 2022 à 20 h 16 min #2435178

Broussaille
Participant

Chevalier WordPress
351 contributions

Et bien voilà, je n’y comprend rien. Dans la console, je vois bien que les couleurs du thème prennent le pas, mais il me semblait que les priorités étaient définies par des chiffres. Là je ne vois pas ce qui donne la priorité aux couleurs du thème.

12 décembre 2022 à 23 h 58 min #2435220

Flobogo
Modérateur

Maître WordPress
19580 contributions

Sinon, question bête, vous avez essayé avec !important ?

13 décembre 2022 à 11 h 36 min #2435281

Broussaille
Participant

Chevalier WordPress
351 contributions

Bonjour Flobogo. Ben non je n’ai pas tenté le !important. C’est généralement pas « recommandé », d’aprsè ce qu’en disent les pros, et les inspecteurs du code ! Mais là, je ne vois pas comment faire autrement. J’ai bien tenté de « voir » dans la console du navigateur, comme me le disait mathieu42, mais je ne vois pas comment la priorité joue sur le css. Donc je vais revenir au !important.

PS : il me semble qu’avant on se tutoyait, quand mon pseudo était ah.olstrya ? non ?

PS 2 : bonjour à Philyon.
Auteur

Messages