Question

我正在尝试将CSS样式添加到我正在开发的WordPress主题中，如本教程所示：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（），因为在 header.php 文件中它是从未打过电话。

有人可以帮助我吗？

TNX

安德烈

Answer 1

只需粘贴此代码：

<?php
function wpb_adding_styles() {
    wp_register_style('my_stylesheet', get_stylesheet_uri());
    wp_enqueue_style('my_stylesheet');
}
add_action('wp_enqueue_scripts', 'wpb_adding_styles');
?>

您的代码出现问题：
plugins_url它实际打印http://example.com/wp-content/plugins而不是http://example.com/wp-content/themes/your-theme

检索时使用get_stylesheet_uri http://example.com/wp-content/themes/your-theme/style.css

不知道为什么本教程使用wp_register_script和wp_enqueue_script作为样式表用于Javascript文件。使用wp_register_style和wp_enqueue_style获取css文件。

Answer 2

您对样式表（style.css）的引用不正确。 plugins_url函数适用于WP插件，但您正在尝试开发WP主题。

将此代码放入主题的functions.php文件中：

function wpb_adding_styles() {
     wp_register_script('my_stylesheet', get_stylesheet_uri() );
     wp_enqueue_script('my_stylesheet');
}

add_action('wp_enqueue_scripts', 'wpb_adding_styles');

Answer 3

在functions.php

中使用此功能

/**
 * Proper way to enqueue scripts and styles
 */
function theme_name_scripts() {
    wp_enqueue_style( 'style-name', get_stylesheet_uri() );
    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}

add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

并将其添加到您的header.php

中

<?php wp_enqueue_scripts(); ?>

只需替换姓名和地址即可。如果您需要添加多个.css或.js，只需复制并制作新行。

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

3 个答案: