Discussion :

[LOlo94224]

Bonjour tout le monde,

Voilà je viens vous voir car je n'y connais rien à PHP....

Je souhaiterai modifier une function dans un fichier function.php de Wordpress.

Voici la fonction en question :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
add_filter( 'body_class', 'tessbv_body_class' );
function tessvb_wp_head(){
    echo '<style>'.PHP_EOL;
    echo 'body{ padding-top: 80px !important; }'.PHP_EOL;
    // Using custom CSS class name.
    echo 'body.body-logged-in .navbar-fixed-top{ top: 32px !important; }'.PHP_EOL;
    // Using WordPress default CSS class name.
    echo 'body.logged-in .navbar-fixed-top{ top: 32px !important; }'.PHP_EOL;
    echo '</style>'.PHP_EOL;
}

Je souhaiterai la mofidier pour que cette ligne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

    echo 'body{ padding-top: 80px !important; }'.PHP_EOL;

Ne s'applique qu'aux résolution inféririeur à 768px. Du style @media max-width:768px en css.

Donc est-ce possible si oui comment dois-je la modifier ?


Merci à vous

[Tsilefy]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
echo '@media (max-width: 768px) {'.PHP_EOL;
echo 'body{ padding-top: 80px !important; }'.PHP_EOL;
echo '}'.PHP_EOL;

Mais c'est laid, difficile à comprendre et inefficient. On ne devrait jamais mélanger du CSS et du PHP comme ça. La meilleure solution est de mettre le CSS dans une feuille de style et d'inclure cette feuille de style avec wp_enqueue_style, en précisant le média avec le paramètre $media.

[LOlo94224]

Je veux bien croire que ce n'est pas jolie, après je ne sais pas si c'est Wordpress qui génère cela automatiquement ou pas...

Pour situer le contexte, j'ai réalisé une maquette en HTML et CSS et j'ai demandé à un ami de l'intégrer sous WP, n'ayant pas trop de temps en ce moment, j'essaye de corriger par moi-même. Une des erreurs est cette marge qui n'existait pas sur mes fichiers HTML et CSS. Du coup je pense que c'est du code généré directement par WP.

Donc pour la solution que tu proposes, je ne comprend pas...

[Watilin]

Dans les fichiers d'un projet Wordpress tout neuf il n'y a pas de fonction tessvb_wp_head, donc c'est probablement un ajout de ton ami. Tu lui diras que c'est pas bien

Le code CSS, en général, change rarement. Il est donc intéressant de le mettre dans des fichiers externes pour permettre sa mise en cache.
Ce que suggère Tsilefy c'est de faire un fichier CSS contenant ceci :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
/* Using custom CSS class name. */
body.body-logged-in .navbar-fixed-top{ top: 32px !important; }
/* Using WordPress default CSS class name. */
body.logged-in .navbar-fixed-top{ top: 32px !important; }
 
@media(max-width: 768px) {
   body{ padding-top: 80px !important; }
}

Puis d'enregistrer ce CSS dans le sous-dossier css/ de ton dossier de thème avec comme nom, par exemple, marge-body.css, et ensuite, dans le fichier functions.php toujours dans ton dossier de thème, trouver l'endroit où sont faits la plupart des wp_enqueue_style et ajouter ceci à la suite :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

wp_enqueue_style( 'marge-body', get_template_directory_uri() . '/css/marge-body.css', array(), false, 'screen' );