将 HTML 转换为 WordPress 但 CSS 不输出答案

【问题标题】：Converting HTML to WordPress but CSS doesn't output将 HTML 转换为 WordPress 但 CSS 不输出
【发布时间】：2015-10-13 04:29:41
【问题描述】：

我正在将带有一些 JS 的 HTML 和 CSS 转换为 WordPress 主题。只是一个有这种做法的新手。我观看并阅读教程。我跟着他们的方式。但在这段代码中，WordPress 主题的 CSS 不起作用。我不知道问题所在。我使用“检查元素”来查看问题。但它不读取 CSS 文件，所以这就是问题所在。但我已经在标题中包含了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>

【问题讨论】：

检查过任何控制台错误吗？
是的，我查过了。它没有任何错误。也许是因为，它不读取 css 文件。
如果由于您提供的相对路径而导致 CSS 无法找到，它应该会给出 404 错误。检查您的页面中呈现的 html 为您的 link
我在“Web 控制台”中激活了“日志网络访问”，使用请求方法 GET 在某些 css、js 和图像文件中出现“404 未找到”等错误。
您是否故意将 grid.css 和 animate.css 注释掉了？

标签： html css wordpress wordpress-theming

【解决方案1】：

就像 JeremyE 所说，在主题中包含 JavaScript 和 CSS 资产的“WordPress 方式”是使用 wp_enqueue_style 和 wp_enqueue_script 函数。 WPBeginner 有一个great tutorial 告诉你如何去做。

但是，你的代码的问题是这一行：

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：