Я в процессе передачи HTML/CSS/jquery макета веб-сайта в тему wordpress. Сайт отлично работает как HTML-сайт, и все правила CSS выбирают правильные элементы html.Wordpress выборочно применяет правила css после wp_enqueue_style
Однако, когда я вставляю скрипты в Wordpress и просматриваю сайт, применяются только определенные правила, что приводит к нарушению работы веб-сайта. Я знаю, что css правильно помещается в очередь, так как я вижу, что он отображается в источнике страницы для веб-сайта. Когда я смотрю на определенные элементы с помощью веб-инспектора, это показывает, что реализуются только определенные правила, но не другие. Почему передача моего css в Wordpress изменила бы то, как правила CSS применяются к почти идентичному HTML?
Ниже, код, как я enqueuing скрипты. Обратите внимание на зависимость от нормализуют:
<?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');
?>
Это является HTML/PHP Я имею в header.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 -->
В качестве примера избирательного применения, эти правила, которые применяются к ссылка вложена в качестве элемента списка Li на HTML макете
#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;
}
и это то, что применяется к одной и той же ссылке в версии Wordpress того же HTML и CSS
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;
}
Что здесь происходит? Я всю ночь пытался понять это. Я завоююсь правильно, и, согласно источнику страницы, тот же самый css находится в заголовке, как и в моей версии, отличной от Wordpress.