- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在将网站的 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/
我正在通过 labrepl 工作,我看到了一些遵循此模式的代码: ;; Pattern (apply #(apply f %&) coll) ;; Concrete example user=> (a
我从未向应用商店提交过应用,但我会在不久的将来提交。 到目前为止,我对为 iPhone 而非 iPad 进行设计感到很自在。 我了解,通过将通用PAID 应用放到应用商店,客户只需支付一次就可以同时使
我有一个应用程序,它使用不同的 Facebook 应用程序(2 个不同的 AppID)在 Facebook 上发布并显示它是“通过 iPhone”/“通过 iPad”。 当 Facebook 应用程序
我有一个要求,我们必须通过将网站源文件保存在本地 iOS 应用程序中来在 iOS 应用程序 Webview 中运行网站。 Angular 需要服务器来运行应用程序,但由于我们将文件保存在本地,我们无法
所以我有一个单页客户端应用程序。 正常流程: 应用程序 -> OAuth2 服务器 -> 应用程序 我们有自己的 OAuth2 服务器,因此人们可以登录应用程序并获取与用户实体关联的 access_t
假设我有一个安装在用户设备上的 Android 应用程序 A,我的应用程序有一个 AppWidget,我们可以让其他 Android 开发人员在其中以每次安装成本为基础发布他们的应用程序推广广告。因此
Secrets of the JavaScript Ninja中有一个例子它提供了以下代码来绕过 JavaScript 的 Math.min() 函数,该函数需要一个可变长度列表。 Example:
当我分别将数组和对象传递给 function.apply() 时,我得到 NaN 的 o/p,但是当我传递对象和数组时,我得到一个数字。为什么会发生这种情况? 由于数组也被视为对象,为什么我无法使用它
CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界. 这篇CFSDN的博客文章ASP转换格林威治时间函数DateDiff()应用由作者收集整理,如果你
我正在将列表传递给 map并且想要返回一个带有合并名称的 data.frame 对象。 例如: library(tidyverse) library(broom) mtcars %>% spl
我有一个非常基本的问题,但我不知道如何实现它:我有一个返回数据框,其中每个工具的返回值是按行排列的: tmp<-as.data.frame(t(data.frame(a=rnorm(250,0,1)
我正在使用我的 FB 应用创建群组并邀请用户加入我的应用群组,第一次一切正常。当我尝试创建另一个组时,出现以下错误: {"(OAuthException - #4009) (#4009) 在有更多用户
我们正在开发一款类似于“会说话的本”应用程序的 child 应用程序。它包含大量用于交互式动画的 JPEG 图像序列。 问题是动画在 iPad Air 上播放正常,但在 iPad 2 上播放缓慢或滞后
我关注 clojure 一段时间了,它的一些功能非常令人兴奋(持久数据结构、函数式方法、不可变状态)。然而,由于我仍在学习,我想了解如何在实际场景中应用,证明其好处,然后演化并应用于更复杂的问题。即,
我开发了一个仅使用挪威语的应用程序。该应用程序不使用本地化,因为它应该仅以一种语言(挪威语)显示。但是,我已在 Info.plist 文件中将“本地化 native 开发区域”设置为“no”。我还使用
读完 Anthony's response 后上a style-related parser question ,我试图说服自己编写单体解析器仍然可以相当紧凑。 所以而不是 reference ::
multicore 库中是否有类似 sapply 的东西?还是我必须 unlist(mclapply(..)) 才能实现这一点? 如果它不存在:推理是什么? 提前致谢,如果这是一个愚蠢的问题,我们深表
我喜欢在窗口中弹出结果,以便更容易查看和查找(例如,它们不会随着控制台继续滚动而丢失)。一种方法是使用 sink() 和 file.show()。例如: y <- rnorm(100); x <- r
我有一个如下所示的 spring mvc Controller @RequestMapping(value="/new", method=RequestMethod.POST) public Stri
我正在阅读 StructureMap关于依赖注入(inject),首先有两部分初始化映射,具体类类型的接口(interface),另一部分只是实例化(请求实例)。 第一部分需要配置和设置,这是在 Bo
我是一名优秀的程序员,十分优秀!