Question

我正在转换HTML＆amp;带有JS的CSS成为WordPress主题的CSS。只是这种做法的新手。我观看并阅读了教程。我跟着他们的路。但是在这段代码中，WordPress主题的CSS不起作用。我不知道这个问题。我使用'inspect element'来查看问题。但是它没有读取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>

Answer 1

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

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

Answer 2

就像杰里米所说的那样，＆＃34; WordPress-way＆＃34;在主题中包含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返回模板网址，但不回显它。将行更新为此内容以使其正常工作：

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

将HTML转换为WordPress但不输出CSS

2 个答案: