我正在尝试向我正在开发的WordPress主题添加CSS样式,如本教程所示:http://www.wpbeginner.com/wp-tutorials/how-to-properly-add-javascripts-and-styles-in-wordpress/ 但似乎不起作用,我不明白为什么。
这就是head.php 我的个人主题文件:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo(\'html_type\'); ?>; charset=<?php bloginfo(\'charset\'); ?>" />
<title><?php bloginfo(\'name\'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title>
<meta name="generator" content="WordPress <?php bloginfo(\'version\'); ?>" /> <!-- leave this for stats -->
<!--
<link rel="stylesheet" href="<?php bloginfo(\'stylesheet_url\'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo(\'name\'); ?> RSS Feed" href="<?php bloginfo(\'rss2_url\'); ?>" />
-->
<link rel="pingback" href="<?php bloginfo(\'pingback_url\'); ?>" />
<!-- <?php bloginfo(\'stylesheet_directory\'); ?>/ -->
<script language="javascript" type="text/javascript" src="<?php bloginfo(\'stylesheet_directory\'); ?>/js.js"></script>
<!--
<script language="javascript" type="text/javascript">
if(f)
{
write_css(\'<?php bloginfo(\'stylesheet_directory\'); ?>\');
}
</script>
-->
<?php wp_head(); ?>
</head>
<body>
<center>
<div id="page">
<div id="header">
<h1><a href="<?php echo get_settings(\'home\'); ?>"><?php bloginfo(\'name\'); ?></a></h1>
<div class="description"><?php bloginfo(\'description\'); ?></div>
</div>
<hr />
在我的
functions.php 文件我已输入以下代码:
<?php
function wpb_adding_styles() {
wp_register_script(\'my_stylesheet\', plugins_url(\'style.css\', __FILE__));
wp_enqueue_script(\'my_stylesheet\');
}
add_action(\'wp_enqueue_scripts\', \'wpb_adding_styles\');
?>
但是文件
style.css 未加载。为什么?我错过了什么?
特别是在上一篇教程中,我无法理解的是wpb_adding_styles() 调用,因为在标头中。php文件,它从未被调用。
有人能帮我吗?
Tnx公司
安德烈
最合适的回答,由SO网友:Borek 整理而成
您正在使用plugins_url
- 因此指向与当前主题完全不同的目录。如果您只是尝试将主题样式排队,请执行以下操作:
function load_theme_styles() {
wp_enqueue_style(\'main-css\', get_template_directory_uri() . \'/style.css\', array(), \'1.0\', \'all\');
}
add_action(\'wp_enqueue_scripts\', \'load_theme_styles\');
the
wp_enqueue_style
获取一些参数。在上述示例中,我使用:
唯一的ID(句柄)—然后我可以将其用于依赖项—样式本身的路径—这应该是显而易见的array()
依赖项的数量(在本例中为空)-例如,如果有两种样式排队,则可以在第二种样式中设置array(\'main-css\')
然后,WP将等待ID为main css style的样式被加载后再加载版本-现在这可以是你想要的任何东西。我总是以更新主题为例,当客户端出现问题时,我可以通过查看代码快速确定版本。另一个好处是,更新版本号较高(或较低)的文件将确保样式实际加载,而不是从缓存中提取最后一个只是定义了此样式表的媒体PS。无需先注册。它就像注册然后通过排队调用一样安全。如果要注册脚本,但不直接将其加载到页面中,则可以注册一次文件,然后在需要时通过调用wp_enqueue_script( $handle )
(只需传递$句柄,其余将从wp_register_script()
). 因此,如果您只想加载它(99%的次数),您可以省略它。
Refference:
- wp_enqueue_style
- wp_enqueue_script至于你的头球。php文件此部分:
<script language="javascript" type="text/javascript" src="<?php bloginfo(\'stylesheet_directory\'); ?>/js.js"></script>
<!--
<script language="javascript" type="text/javascript">
if(f)
{
write_css(\'<?php bloginfo(\'stylesheet_directory\'); ?>\');
}
</script>
-->
应该删除,任何脚本都应该添加到WP中,就像添加样式一样。例如:function load_java_scripts() {
wp_enqueue_script(\'custom-js\', get_template_directory_uri() . \'/js/main.js\', array(\'jquery\'), \'1.0\', true);
}
add_action(\'wp_enqueue_scripts\', \'load_java_scripts\');
同样的事情也适用于其他元素,例如谷歌字体等wp_enqueue_scripts
还要添加它们:function load_google_fonts() {
$protocol = is_ssl() ? \'https\' : \'http\';
wp_enqueue_style( \'theme-default-fonts\', "$protocol://fonts.googleapis.com/css?family=ADD_YOUR_DESIRED_FONT_FAMILIES_HERE\' rel=\'stylesheet\' type=\'text/css" );}
add_action( \'wp_enqueue_scripts\', \'load_google_fonts\' );
我在此处添加了\\u YOUR\\u DESIRED\\u FONT\\u FAMILIES\\u您应该从Google FONT添加字体系列。如果需要多个,只需将它们除以|
. 例如,如果我想要Roboto字体和PT衬线字体,我会这样写Roboto:400,700,300|PT+Serif:400,700,400italic
SO网友:Rachel Baker
注册和排队需要使用的CSS文件时wp_register_style()
和wp_enqueue_style()
.
如果主题函数中有此代码,则返回。要使用的php文件get_template_directory_uri()
引用自定义CSS文件的路径时。
您的代码非常接近,但应更正为以下内容:
function wpb_adding_styles() {
wp_register_style(\'my_stylesheet\', get_template_directory_uri() . \'/style.css\');
wp_enqueue_style(\'my_stylesheet\');
}
add_action(\'wp_enqueue_scripts\', \'wpb_adding_styles\');