我正在将网站的 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;
}
这是怎么回事？我整晚都在想办法解决这个问题。 我正在正确排队，并且根据页面源代码， header 中的 css 与我的非 Wordpress 版本中的完全相同。
最佳答案
你有:
add_action('wp_enqueue_scripts','theme_styles');
但您可能应该将其更改为:
add_action('wp_enqueue_style','theme_styles');
引用:http://codex.wordpress.org/Function_Reference/wp_enqueue_style
关于php - Wordpress 根据 wp_enqueue_style 有选择地应用 css 规则，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21234043/