WordPress : Nouveau template, où placer le CSS ?

Publié par Jean-Michel le

Jusqu’à aujourd’hui, je n’ai jamais utilisé header.phpet footer.phpparce que mon thème a plusieurs modèles et je ne sais pas comment ni où placer les fichiers CSS et JS. Quelqu’un pourrait-il expliquer comment avoir header.phpet utiliser get_header();mais aussi inclure de nouveaux fichiers CSS en fonction du modèle ?

Code normal et comment je le vois

<?php /* Template Name: Contact Template */ ?>
<!-- HERE STARTS HEADER PHP? -->
<!DOCTYPE html>
<html>
<head>
   <title>Website</title>
   <link href="style.css" rel="stylesheet" type="text/css" />
   <?php wp_head(); ?>
</head>
<body>
   <header>
       <!-- MENU AND STUFF -->
   </header>
   <main>
   <!-- HERE STOPS HEADER PHP ? -->

      <!-- SOME CONTENT -->

   <!-- HERE STARTS FOOTER PHP? -->
   </main>
   <footer>
     <!-- SOME CONTENT -->
   </footer>
<!-- HERE I PLACE MY JS FILES -->
</body>
</html>
<!-- HERE STOPS FOOTER PHP? -->

Comme vous pouvez le voir, où je place mes fichiers CSS et JS sont dans le header.phpou footer.phpdonc je ne peux pas en rajouter selon le template. Comment ajouter des fichiers CSS si vous utilisez plusieurs modèles ?

Lire également:  Wordpress : Disposition ou thème WordPress à deux barres latérales

================================================== =

Le problème est presque résolu. Il suffit de créer une instruction if/else pour vérifier le fichier Template Name:.

Solution n°1 trouvée

N’incluez pas CSS et JavaScript manuellement, il existe des fonctions spéciales à cet effet. Modifiez ce code pour répondre à vos besoins et mettez-le dans le functions.phpde votre thème.

<?php
$template_file_name = basename( get_page_template() ); // get template file name

if('my_template.php' == $template_file_name) { // check  file name
    wp_enqueue_style(
        'my_style_name',
        '/path/to/style.css',
        array(), // dependencies
        NULL, // version
        all // media
    );
    enqueue_script(
        'my_script_name',
        '/path/to/script.js',
        array(), // dependencies
        NULL, // version
        true // in footer
    );
}

Minimalheader.php

<html>
<head>
</head>
<?php wp_head(); // this function will place your CSS here ?>
<body>

Minimalfooter.php

<?php wp_footer(); // this function will place your JavaScript here?>
</body>
<html>

Minimalmy_template.php

<?php
/*
Template Name: Contact Template
*/
get_header();
// your content goes here
get_footer();

Pour plus d’informations, voir :

Lire également:  Wordpress : Dois-je échapper à la fonction get_the_post_thumbnail ?

wp_enqueue_style()

enqueue_script()

Développement de thème

Solution n°2 trouvée

Incluez CSS et JavaScipt dans le fichier functions.php.

Créez un fichier PHP vide, appelez-le header.php, et oui wp_head()va juste avant la balise </head>pas avant .<body>

<!DOCTYPE html>
<html>
<head>
   <title>Website</title>
   <link href="style.css" rel="stylesheet" type="text/css" />
   <?php wp_head(); ?>
</head>

Créez un fichier PHP vide, appelez-le footer.phpet placez-y votre pied de page :

   <footer>
     <!-- SOME CONTENT -->
   </footer>
<!-- HERE I PLACE MY JS FILES -->
</body>
</html>

Dans functions.php:

function my_scripts_styles() {

  wp_enqueue_script('jquery_flexslider_js', get_template_directory_uri() . '/js/jquery.flexslider.min.js', array('jquery'),'3.0.0', true );

  wp_enqueue_style('flexslider_css', get_template_directory_uri() . '/css/flexslider.css', false ,'3.0.0'); 

}
add_action('wp_enqueue_scripts', 'my_scripts_styles');

Avec wp_enqueue_script()add JavaScript, le dernier argument truesignifie qu’il sera placé en bas. Vous devez lui donner un nom unique, par exemple flexslider_js_my. Incluez autant de fichiers js que nécessaire.

Avec wp_enqueue_style()vous ajoutez des fichiers CSS. Le dernier argument falsesignifie qu’il sera placé dans l’en-tête. Donnez-lui un nom unique, incluez-en autant que vous le souhaitez.

Lire également:  Wordpress : Comment créer une page de connexion spécifique pour un utilisateur spécifique ?

Le reste de votre code reste dans index.php. header.php, footer.php, functions.phpils se trouvent tous dans le répertoire personnel où index.phpse trouve votre.

index.php:

<?php get_header(); ?>
<body>
   <header>
       <!-- MENU AND STUFF -->
   </header>
   <main>
   <!-- HERE STOPS HEADER PHP ? -->

      <!-- SOME CONTENT -->

   <!-- HERE STARTS FOOTER PHP? -->
   </main>
   <footer>
     <!-- SOME CONTENT -->
   </footer>
<!-- HERE I PLACE MY JS FILES -->
</body>
<?php get_footer(); ?>

Btw, dans votre cas, vous n’avez pas besoin d’inclure <?php /* Template Name: Contact Template */ ?>en haut. Vous pouvez faire comme dans mon exemple.

Mettre à jour, le nom du modèle :

Dans mon cas get_page_template(), le chemin complet du modèle sera affiché, par exemple :

/homepages/133/htdocs/dd/myheme/wp-content/themes/authentic/page.php

où ‘authentique’ est le nom de mon modèle. Donc la construction if à inclure dans functions.php:

$url = get_page_template();
$parts = explode('/', $url);
$name = $parts[count($parts) - 2];

if('authentic' == $name) { 

  wp_enqueue_style('homeCSS', get_template_directory_uri() . '/css/home.css', false ,'3.0.0'); 

}
Catégories : Wordpress

Jean-Michel

Jean-Michel est en charge de la partie blog du site. Il met en place la stratégie de contenu et répond aux questions fréquentes sur Wordpress.

0 commentaire

Laisser un commentaire

Avatar placeholder

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *