WordPress : Nouveau template, où placer le CSS ?
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 ?
================================================== =
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 :
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.
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');
}
0 commentaire