为什么我不能在这个WordPress主题中添加一个css样式？

时间：2014-01-18 作者：AndreaNobili

我正在尝试向我正在开发的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公司

安德烈

2 个回复

最合适的回答,由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\');

thewp_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

<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\');

结束

小码农CODE

为什么我不能在这个WordPress主题中添加一个css样式？

相关推荐

有条件地加载我的插件的CSS