Conversion de HTML en WordPress mais CSS ne sort pas
Je convertis un HTML & CSS avec des morceaux de JS en un thème WordPress. Juste un débutant avec cette pratique. J’ai regardé et lu des tutos. J’ai suivi leur chemin. Mais dans ce code, le CSS du thème WordPress ne fonctionne pas. Je ne connais pas le problème. J’ai utilisé ‘inspecter l’élément’ pour voir le problème. Mais il ne lit pas le fichier CSS, c’est donc le problème. Mais j’ai déjà inclus le style.cssdans l’en-tête. Quel semble être le problème ici?
<!DOCTYPE html>
<html lang="en">
<head>
<title><?php bloginfo('title'); ?></title>
<meta charset="utf-8">
<meta name = "format-detection" content = "telephone=no" />
<link rel="icon" href="images/favicon.ico" />
<link rel="shortcut icon" href="images/favicon.ico" />
<!--<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/grid.css">-->
<link rel="stylesheet" href="<?php get_template_directory_uri(); ?>/style.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery-migrate-1.2.1.js"></script>
<script src="js/owl.carousel.js"></script>
<!--[if (gt IE 9)|!(IE)]><!-->
<script src="js/wow/wow.js"></script>
<script>
$(document).ready(function () {
if ($('html').hasClass('desktop')) {
new WOW().init();
}
});
</script>
<!--[if lt IE 8]>
<div style=' clear: both; text-align:center; position: relative;'>
<a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
<img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
</a>
</div>
<![endif]-->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<link rel="stylesheet" media="screen" href="css/ie.css">
<![endif]-->
<script>
$(document).ready(function () {
$("#owl").owlCarousel({
items : 1, //10 items above 1000px browser width
itemsDesktop : [995,1], //5 items between 1000px and 901px
itemsDesktopSmall : [767, 1], // betweem 900px and 601px
itemsTablet: [700, 1], //2 items between 600 and 0
itemsMobile : [479, 1], // itemsMobile disabled - inherit from itemsTablet option
navigation : true,
pagination : false
});
});
</script>
<?php wp_head(); ?>
</head>
<body class="page1" id="top">
<div class="main">
<!--==============================
header
=================================-->
<header class="">
<!--==============================
Stuck menu
=================================-->
<section id="stuck_container">
<div class="container">
<div class="row">
<div class="grid_10">
<h1>
<a href="index.html"><img src="images/logo.png" alt="Logo alt"></a>
</h1>
<div class="navigation">
<nav>
<ul class="sf-menu">
<li class="current"><a href="index.html">Home</a></li>
<li><a href="index-1.html">About</a>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Projects</a>
<ul>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Dolor sit amet</a></li>
</ul>
</li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</li>
<li><a href="index-2.html">Services</a></li>
<li><a href="index-3.html">Projects</a></li>
<li><a href="index-4.html">Blog</a></li>
<li><a href="index-5.html">Contacts</a></li>
</ul>
</nav>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</section>
</header>
Solution n°1 trouvée
Les styles doivent être mis en file d’attente dans le fichier functions.php.
https://codex.wordpress.org/Function_Reference/wp_enqueue_style
Solution n°2 trouvée
Comme l’a dit JeremyE, la « WordPress-way » pour inclure des actifs JavaScript et CSS dans un thème utilise les fonctions wp_enqueue_styleet wp_enqueue_script. WPBeginner a un excellent tutoriel sur la façon de le faire.
Mais, le problème avec votre code est cette ligne:
<link rel="stylesheet" href="<?php get_template_directory_uri(); ?>/style.css" />
get_template_directory_urirenvoie l’URL du modèle, mais ne la renvoie pas. Mettez à jour la ligne pour que cela fonctionne :
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" />
0 commentaire