为什么我不能在这个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\');

结束