gpt4 book ai didi

php - Wordpress 根据 wp_enqueue_style 有选择地应用 css 规则

转载 作者:行者123 更新时间:2023-11-28 11:29:11 24 4
gpt4 key购买 nike

我正在将网站的 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com