Problème HEADER: css non reconnu et impossible d’affiche
Bonjour,
je suis en train de crée mon propre thème à partir d'une base html et j'ai des soucis, ma feuille de style ne se charge pas et tout ce que j'écris dans le header (texte, title, menu...) aussi mais dans index.php ça s'affiche! Voici le code de mon header.php et de mon code html d'origine, le header est à la racine de mon thème. Je sais pas comment appeler aussi les deux feuilles CSS pour mon slider mais déjà si le style.css ne se charge pas, je vais pas aller loin lol.
Header.php :
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php
/*
* Print the <title> tag based on what is being viewed.
*/
global $page, $paged;
wp_title( '|', true, 'right' );
// Add the blog name.
bloginfo( 'name' );
// Add the blog description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";
// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( __( 'Page %s', 'twentyten' ), max( $paged, $page ) );
?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php
/* We add some JavaScript to pages with the comment form
* to support sites with threaded comments (when in use).
*/
if ( is_singular() && get_option( 'thread_comments' ) )
wp_enqueue_script( 'comment-reply' );
/* Always have wp_head() just before the closing </head>
* tag of your theme, or you will break many plugins, which
* generally use this hook to add elements to <head> such
* as styles, scripts, and meta tags.
*/
wp_head();
?>
</head>
<body>
<div id="wrapper" class="hfeed">
<div id="header">
<!-- -------------------LOGO------------------- -->
<div id="logo">
<a rel="home" title="Teahupoo Tahiti Surfari - Taxi Boat - Excursions" href="index.html"><img alt="" src="images/logo.png"></a>
<ul class="flag">
<li class="fr"><img alt="Français" src="images/FR_Hover.png"></li>
<li class="en"><a target="_blank" href="#" title="English">English</a></li>
</ul>
</div>
<!-- -------------------MAIN MENU------------------- -->
<div id="main_menu">
<div class="line_menu"></div>
<div class="menu_site">
<div class="menu-main_menu-container">
<ul class="menu" id="menu-main_menu">
<li><a href="index.html">Acceuil</a></li>
<li><a href="excursions.html">Excursions</a></li>
<li><a href="surf.html">Surf</a></li>
<li><a href="#.html">About Us</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
<div class="line_menu"></div>
</div><!--End #main_menu-->index.htm :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tahiti Surfari</title>
<!-- ================ -->
<!-- attach css files -->
<!-- ================ -->
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="css/nivo-slider.css" rel="stylesheet" type="text/css" />
<link href="css/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper" class="hfeed">
<div id="header">
<!-- -------------------LOGO------------------- -->
<div id="logo">
<a rel="home" title="Teahupoo Tahiti Surfari - Taxi Boat - Excursions" href="index.html"><img alt="" src="images/logo.png"></a>
<ul class="flag">
<li class="fr"><img alt="Français" src="images/FR_Hover.png"></li>
<li class="en"><a target="_blank" href="#" title="English">English</a></li>
</ul>
</div>
<!-- -------------------MAIN MENU------------------- -->
<div id="main_menu">
<div class="line_menu"></div>
<div class="menu_site">
<div class="menu-main_menu-container">
<ul class="menu" id="menu-main_menu">
<li><a href="index.html">Acceuil</a></li>
<li><a href="excursions.html">Excursions</a></li>
<li><a href="surf.html">Surf</a></li>
<li><a href="#.html">About Us</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
<div class="line_menu"></div>
</div><!--End #main_menu-->
4 réponses
En premier lieu, à quel endroit se trouve ton css? Se trouve-t-il bien dans ton dossier thème (pas dans un sous-dossier "css" par exemple). Ensuite, tu dois mettre dans ton fichier index**.php**(et non .htm comme ci-dessus), l'appel du header : [code]<?php get_header(); ?>[/code] Juste pour info tu dois faire pareil pour le footer, (créer le ficher footer.php, dans lequel il y a la mention wp_footer()). Ensuite pour l'ajout des autres css, je te conseille d'utiliser wp_enqueue_scrit, et wp_register_script, qui sont des fonctions prévues pour l'intégration de script dans wordpress. Un exemple (dans le functions.php par exemple): [code] function script_line() { wp_register_script( 'NomPourTonFichier', get_template_directory_uri() . 'LIEN_DE_TON_FICHIER'); wp_enqueue_script( 'NomPourTonFichier'); } add_action( 'wp_enqueue_scripts', 'script_line' );//Ce qui fait en sorte d'ajouter ces scripts lorsque wordpress load ses scripts. [/code] [url=http://codex.wordpress.org/Function\_Reference/wp\_register\_script]Doc concernant [u]wp_register_script[/u][/url] [url=http://codex.wordpress.org/Function\_Reference/wp\_enqueue\_script]Doc concernant [u]wp_enqueue_script[/u][/url]
Alors j'ai plusieurs CSS: Le style.css dans la racine de mon thèmes (appelé 'surfari') et les autres dans un dossier appelé 'css' toujours à la racine de mon thème.
J'ai bien fait un fichier index.php mais c'était pour vous montrer y avait quoi dans mon fichier d'origine par contre je ne savais pas qu'il fallait appeler le header et donc forcément le footer dans l'index.php !!! Y a un début de solution là, merci !
index.php :
<?php get_header(); ?>
<!-- -------------------SLIDER------------------- -->
<div id="slider_wrapper">
<div class="slider_inner">
<div id="slider" >
<img src="wp-content/themes/surfari/images/slider/slider1.jpg" alt="" />
<img src="images/slider/slider2.jpg" alt="" />
<img src="images/slider/slider3.jpg" alt="" />
<img src="images/slider/slider4.jpg" alt="" />
<img src="images/slider/slider5.jpg" alt="" />
</div>
</div>
</div><!--End #slider_wrapper-->
<!-- -------------------Footer Header------------------- -->
<div id="ft_header">
<div class="ft_header_home_inner">
<div class="line_menu"></div>
<div class="padding_home">
<p class="pop_top">TEAHUPOO TAHITI</p>
<p class="pop_ft">Venez decouvrir le Fenua Aihere et le Pari en bateau</p>
</div>
<div class="line_menu"></div>
</div>
</div>
<!-- -------------------Content------------------- -->
<div id="main">
<div id="content" role="main">
<div class="entry-content">
<div id="about_left">
<h3>Tahiti Surfari Presentation</h3>
<p class="color_gr"><br />BREATH TAKINGLY YOURS WITH TEAHUPOO TAHITI SURFARI<br />
EXCURSIONS AND TAXI BOAT</p>
<p>I love sweet cotton candy wypas. Lollipop cake dragée icing. Macaroon caramels fruitcake jelly cotton candy wypas jelly beans faworki I love. I love jujubes pie biscuit caramels tiramisu marzipan sweet roll. Cheesecake jelly caramels I love brownie marzipan sesame snaps cheesecake. Chupa chups gummies bonbon gummi bears I love ice cream dragée I love. Ice cream icing dessert caramels cotton candy sesame snaps oat cake bear claw. </p>
<img class="image-left" src="images/services_page/icon_sercive5.png" /><p class="text-left">Lemon drops jelly chocolate. I love fruitcake danish chupa chups sweet macaroon chocolate apple pie. Brownie carrot cake lollipop marshmallow toffee chocolate cookie. Wypas sesame snaps lemon drops gingerbread dragée. Biscuit sweet roll tart. I love lollipop I love I love. Halvah liquorice jujubes bonbon chupa chups halvah dragée donut. Pudding tart I love cupcake apple pie chocolate cake wypas.
</p>
</div>
<div id="about_right">
<div class="about_right_inner">
<br />
<a href="#.html"><img class="image-left" src="wp-content/themes/surfari/images/socials/fb.png" /></a><p class="about_color_wh">Facebook </p><br />
<a href="#.html"><img class="image-left" src="wp-content/themes/surfari/images/socials/vm.png" /></a><p class="about_color_gr">Youtube </p><br />
<a href="#.html"><img class="image-left" src="wp-content/themes/surfari/images/socials/tum.png" /></a><p class="about_color_wh">TripAdvisor </p><br />
<a href="#.html"><img class="image-left" src="wp-content/themes/surfari/images/socials/tw.png" /></a><p class="about_color_gr">Petit futé </p>
</div>
</div>
</div>
</div>
</div>
<!-- -------------------Status Top Footer------------------- -->
<div id="footer_bar">
<div class="footer_bar_innder">
<li class="widget-container widget_execphp" id="execphp-8">
<div class="execphpwidget">Intéressé par une sortie ? Prennez contact avec nous ! <a href="contact.html">Contact Us</a>
</div>
</li>
</div>
</div>
<?php get_footer(); ?>footer.php
<!-- -------------------Footer Site------------------- -->
<?php wp_footer(); ?>
<div class="line_footer"></div>
<div role="contentinfo" id="footer">
<div id="colophon">
<div id="site-info">
<p id="copyright">Copyright © 2013 Tahiti Surfari. All Rights Reserved.</p>
</div><!-- #site-info -->
<div id="site-generator">
<p id="social"><a href="#">Credits & Policies</a></p>
</div><!-- #site-generator -->
</div><!-- #colophon -->
</div>
</div><!--End #header-->
</div><!--End #wrapper-->
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
</body>
</html>Une partie du problème est résolu mais je n'ai toujours pas le bon affichage du au CSS je pense.
functions.php
<?php
require TEMPLATEPATH.'/framework/theme.php';
$theme = new Theme(array(
'menus' => array(
'nav' => 'Navigation')
));
add_filter('stylesheet_directory_uri','gkp_stylesheet_directory_uri', 10, 2);
function gkp_stylesheet_directory_uri($stylesheet_dir_uri, $stylesheet) {
// On ajoute notre dossier
return $stylesheet_dir_uri.'/css';
}
add_action('wp_enqueue_scripts', 'gkp_insert_css_in_head');
function gkp_insert_css_in_head() {
// On ajoute le css general du theme
wp_register_style('nivo-slider', get_bloginfo( 'stylesheet_url' ),'',false,'screen');
wp_register_style('default', get_bloginfo( 'stylesheet_url' ),'',false,'screen');
wp_enqueue_style( 'nivo-slider' );
wp_enqueue_style( 'default' );
}
function jm_styles() {
wp_register_style( 'nivo-slider', get_bloginfo('stylesheet_url'), '/css/nivo-slider.css' );
wp_register_style( 'default', get_bloginfo('stylesheet_url'), '/css/default.css' );
wp_enqueue_style( 'nivo-slider' );
wp_enqueue_style( 'default' );
}
add_action('wp_enqueue_scripts','jm_styles');En même temps si c'est pour le slider, tu peux peut-être regarder le tuto Créer un carrousel sous forme de plugin de Grafikart. Il explique bien comment bien inclure les fichiers.
Désolé de pas répondre plus précisément mais je n'ai pas beaucoup de temps.
C'est déjà sympas de m'avoir répondu :) Le slider à la rigueur c'est pas trop important surtout que j'ai vu qu'il y a un plungin pour ça et qui est le même que j'utilise (nivo slider).
cependant, toujours pas bon pour le CSS :(