Question

我正在将网站的HTML / CSS / jquery模型转换为wordpress主题。该网站作为HTML网站运行完美，所有css规则都选择了正确的html元素。

但是，当我将脚本排入Wordpress并查看该网站时，只会应用某些规则，导致网站外观破损。我知道css正在排队，因为我可以看到它出现在网站的页面源代码中。当我使用Web检查器查看特定元素时，它表明只实现了某些规则而不是其他规则。为什么将我的CSS转移到Wordpress会改变css规则如何应用于几乎相同的HTML？

下面是我如何排队脚本的代码。请注意对normalize的依赖：

<?php

//
function theme_styles() {
    wp_enqueue_style( 'normalize', get_template_directory_uri() . '/normalize.css' );
    wp_enqueue_style( 'main', get_template_directory_uri() . '/style.css', array( 'normalize' ) );
}


// Load the theme JS
function theme_js() {

    wp_register_script('stickynav',get_template_directory_uri() . '/js/stickynav.js', array('jquery'), '', true);
    wp_register_script('nouislider',get_template_directory_uri() . '/js/nouislider.js', array('jquery'), '', true);
    wp_register_script('bootstrap2',get_template_directory_uri() . '/js/bootstrap2.js', array('jquery'), '', true);
    wp_register_script('foundation',get_template_directory_uri() . '/js/foundation.js', array('jquery'), '', true);
    wp_register_script('orbit',get_template_directory_uri() . '/js/foundation.orbit.js', array('jquery'), '', true);
    wp_register_script('modernizr',get_template_directory_uri() . '/js/modernizr.custom.49510.js', array('jquery'), '', true);

    wp_enqueue_script('stickynav');
    wp_enqueue_script('nouislider');
    wp_enqueue_script('bootstrap2');
    wp_enqueue_script('modernizr');
    wp_enqueue_script('theme_js', get_template_directory_uri() . '/js/theme.js', array('jquery'), '', true);

    if (is_home() && !is_paged() ) {
        wp_enqueue_script('foundation');
        wp_enqueue_script('orbit');
    }
}

add_action( 'wp_enqueue_scripts', 'theme_js');

add_action('wp_enqueue_scripts','theme_styles');

// Enable custom menus
add_theme_support ('menus');

?>

这是我在header.php中的html / php：

<!DOCTYPE html>
<html>
    <head>
        <title>
            <?php

                wp_title( '-', true, 'right' );

                bloginfo('name');

            ?>
        </title>
        <meta name="viewport" content="width=device-width, initial-scale = 1.0">
        <?php wp_head(); ?>
    </head>
    <body>

    <div  id="header_top_wrapper">

          <!-- header and subheader -->
          <div class="row" id="header-top">
              <div class="large-12 columns" id="my_logo">
                  <a href ="<?php bloginfo( 'siteurl'); ?>"><?php bloginfo( 'name'); ?></a>
              </div>
              <div class="large-6 columns large-uncentered" id="subheader">
                <a href ="<?php bloginfo( 'siteurl'); ?>"><h4><?php bloginfo( 'description'); ?></h4></a>
              </div>
          </div>

          <!-- sticky navigation bar -->
          <div id="sticky_navigation_wrapper">
            <div id="sticky_navigation">
              <div class="navigation_items">
                  <li class="nav-left"><a href="#">HOUSEPLANS.INFO</a></li>
                  <li class="nav-left"><a href="#search_modal" data-toggle="modal">SEARCH PLANS</a></li>
                  <li class="nav-left"><a href="#">MOST VIEWED</a></li>
                  <li class="nav-right"><a  href="about.html">ABOUT</a></li>
                  <li class="nav-right" id="site-search">
                    <form action="/search" method="get">
                      <input type="text" name="s" data-provide="typeahead" autocomplete="off" placeholder="Search";>
                      <i class="icon-search"></i>
                    </form>
                  </li>
              </div>
            </div>
          </div>

  </div><!-- end #header_top_wrapper -->

作为选择性应用程序的一个示例，这些是应用于嵌套在HTML模型上的列表项li内的链接的规则

#sticky_navigation ul li a {
float: left;
margin: 0 0 0 5px;
height: 36px;
padding: 0;
line-height: 36px;
font-size: 12px;
font-weight: normal;
color: white;
}

#sticky_navigation ul {
list-style: none;
}

body {
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-style: normal;
}

这就是应用于同一HTML和CSS的Wordpress版本中的同一链接

a {
color: inherit;
text-decoration: none;
line-height: inherit;
}

li {
text-align: -webkit-match-parent;
}

body {
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: normal;
font-style: normal;
}

以下是相关区域的CSS样式：

/* Logo and subheader */

#my_logo { 
  font:45px Georgia, Times, serif;
  padding-left: 8px;
}

#subheader h4{
  margin: 6px 0 0 0;
}


/* our menu styles */
#sticky_navigation_wrapper { 
  width:100%; 
  height:36px;
}

#sticky_navigation { 
  width:100%;
  height:36px;
  /* background: rgba(65, 105,255,.4); */
  background: black;
  z-index: 1030;
}

.navigation_items { 
  width:960px; 
  margin:0 auto;
}

.navigation_items ul{
  padding-left: 0;
}

.navigation_items ul.pull-left:after {
  clear: both;
}

#sticky_navigation ul { 
  list-style:none; 
  margin: 0;
  /* padding:0; */
}

#sticky_navigation ul li{ 
  margin:0;
  display:inline-block;
}
#sticky_navigation ul li a{ 
  /* float:left; */
  /*margin:0 0 0 5px;*/
  height:36px;
  /* padding: 0; */
  line-height:36px; 
  font-size:12px;
  font-weight:normal; 
  color:white;
}

.nav-left{
  padding-left: 10px;
  padding-right: 20px;
}

.nav-right {
  float: right !important;
  padding-right: 10px;
  padding-left: 20px;
}

这里发生了什么？我一整夜都试图解决这个问题。我正确排队，根据页面源代码，我的非Wordpress版本中的标题与css完全相同。

Answer 1

你有：

add_action('wp_enqueue_scripts','theme_styles');

但可能你应该把它改成：

add_action('wp_enqueue_style','theme_styles');

参考：http://codex.wordpress.org/Function_Reference/wp_enqueue_style

Answer 2

更改

add_action('wp_enqueue_scripts','theme_styles');

到

add_action('wp_enqueue_style','theme_styles');

另请注意，如果您更改或编辑css，则需要删除缓存，访问者还需要删除浏览器的缓存。但当然有更好的方法。只需在wp_enqueue_style上填写“版本”参数。

这样做：

add_action('wp_enqueue_style','theme_styles', array(), '1.0.0');

每次编辑你的CSS。只需将版本更改为“1.0.1”或“1.0.2”，依此类推。这将迫使访问者的浏览器获取最新版本的CSS。

Answer 3

想出来......

li缺少UL标签 - 在插入PHP时以某种方式删除。

DOH！

Wordpress在wp_enqueue_style之后有选择地应用css规则

3 个答案: