Conversion de HTML en WordPress mais CSS ne sort pas

Publié par Jean-Michel le

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.

Lire également:  La liste des modèles Wordpress ne s'affiche pas dans les messages

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" />
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 *