将 HTML 转换为 WordPress 但 CSS 没有输出

Question

我正在将带有少量 JS 的 HTML & CSS 转换为 WordPress 主题。只是这种做法的新手。我观看并阅读了教程。我跟着他们走。但是在这段代码中，WordPress 主题的 CSS 不起作用。我不知道问题所在。我用 'inspect element' 来查看问题。但它不读取 CSS 文件，所以这就是问题所在。但是我已经在 header 中包含了 style.css。这似乎是什么问题？

<!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>

Answer 1

样式应在 functions.php 文件中排队。

https://codex.wordpress.org/Function_Reference/wp_enqueue_style

Answer 2

正如 JeremyE 所说，"WordPress-way" 在主题中包含 JavaScript 和 CSS 资产是使用 wp_enqueue_style 和 wp_enqueue_script 函数。 WPBeginner 有一个 great tutorial 如何做到这一点。

但是，您的代码的问题在于这一行：

<link rel="stylesheet" href="<?php get_template_directory_uri(); ?>/style.css" />

get_template_directory_uri returns 模板 URL，但不回显它。更新此行以使其工作：

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" />

将 HTML 转换为 WordPress 但 CSS 没有输出

Converting HTML to WordPress but CSS doesn't output

html

css

wordpress

wordpress-theming