web-dev-qa-db-fra.com

Nouveau modèle, où placer le CSS?

Jusqu'à aujourd'hui, je n'ai jamais utilisé header.php et footer.php car mon thème comporte plusieurs modèles et je ne sais ni comment ni où placer les fichiers CSS et JS. Quelqu'un pourrait-il expliquer comment utiliser un header.php et utiliser get_header(); tout en incluant 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 constater, les fichiers CSS et JS se trouvent dans le header.php ou le footer.php, de sorte que je ne peux pas en ajouter d’autres en fonction du modèle. Comment ajoutez-vous 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 Template Name:.

theme-developmenttemplates
1
Jeff

Incluez CSS et JavaScipt dans le functions.php.

Créez un fichier PHP vide, appelez-le header.php et oui wp_head() ira juste avant </head> pas avant la balise <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.php et placez votre pied de page à cet emplacement:

   <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() ajoutez du JavaScript, le dernier argument true signifie qu'il sera placé en bas. Vous devez lui attribuer 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 false signifie qu'il sera placé dans l'en-tête. Donnez-lui un nom unique, incluez-en autant que nécessaire.

Le reste de votre code reste dans index.php. header.php, footer.php, functions.php ils sont tous dans le répertoire de base où votre index.php est.

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() affichera le chemin complet du template, 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'); 

}
6
BrandonZ

N'incluez pas CSS et JavaScript manuellement, il existe des fonctions spéciales à cet effet. Modifiez ce code selon vos besoins et mettez-le dans le functions.php de 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
    );
}

header.php minimal

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

footer.php minimal

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

my_template.php minimal

<?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èmes

2
Max Yudin