如何在我的 WordPress 主题中使用 wp_enqueue_style()？答案

【问题标题】：How to use wp_enqueue_style() in my WordPress theme?如何在我的 WordPress 主题中使用 wp_enqueue_style()？
【发布时间】：2011-03-29 04:14:12
【问题描述】：

我正在为客户构建我的第一个 WordPress 网站。我真的很想用 LESS 做 CSS 并找到了一个名为 WP-LESS 的 WP 插件。

现在，我完全是 WordPress 新手，但似乎这个插件需要我使用一个名为 wp_enqueue_style() 的函数来告诉 WordPress 处理 .less 文件。

我不知道我在哪里使用这个功能。我在我的主题目录中查看了我的 header.php 文件，我看到了这个。

<link rel="stylesheet" type="text/css" media="all"
  href="<?php bloginfo( 'stylesheet_url' ); ?>" />

我应该用这样的东西替换这段代码吗？

<?php wp_enqueue_style('mytheme',
  get_bloginfo('template_directory').'/style.less',
  array('blueprint'), '', 'screen, projection'); ?>

【问题讨论】：

标签： php wordpress

【解决方案1】：

如果您正确输入此代码，您必须在 index.php 文件 wp_head() 中查看此函数是否存在； & wp_footer(); 如果不存在，则需要在索引文件中添加此功能。你需要添加这个 wp_head();在haed标签之前，另外一个在body标签之前添加。

函数 load_style() {

wp_register_style('my_style', get_template_directory_uri().'/css/my_style.css');
wp_enqueue_style('my_style');
}
// 注册样式表。
add_action('wp_enqueue_scripts', 'load_style');

了解更多details

【讨论】：

欢迎来到 SO！您的回复只是代码，因此请编辑并将格式作为代码提供。此外，您应该只用代码注释一个答案，以便在有其他答案时最多解释它。

【解决方案2】：

在你的主题function.php中添加下面的函数，你就会得到样式和脚本。

<?php
if ( ! function_exists( 'add_script_style' ) ) {
    function add_script_style() {
        /* Register & Enqueue Styles. */

        wp_register_style( 'my-style', get_template_directory_uri().'/css/my-style.css' );
        wp_enqueue_style( 'my-style' );

        /* Register & Enqueue scripts. */

        wp_register_script( 'my-script', get_template_directory_uri().'/js/my-script.js' );
        wp_enqueue_script( 'my-script');
    }
}
add_action( 'wp_enqueue_scripts', 'add_script_style', 10 );
?>

【讨论】：

【解决方案3】：

wp_enqueue_style 在主题或插件内部的用法：

wp_enqueue_style( 'my-style', get_template_directory_uri() . '/css/my-style.css', false, '1.0', 'all' ); // Inside a parent theme
wp_enqueue_style( 'my-style', get_stylesheet_directory_uri() . '/css/my-style.css', false, '1.0', 'all' ); // Inside a child theme
wp_enqueue_style( 'my-style', plugins_url( '/css/my-style.css', __FILE__ ), false, '1.0', 'all' ); // Inside a plugin

【讨论】：

【解决方案4】：

我自己遇到了这个问题，EAMann 的提示几乎奏效了。它可能是 WordPress (3.4) 的版本，虽然我不是 php 开发人员所以我不确定，但我需要在函数下方而不是提供的内容：

add_action('wp', 'useLess');

【讨论】：

【解决方案5】：

不完全是，但差不多。您要做的是在 functions.php 中放置一个函数，该函数将您的脚本排入队列。

所以：

function addMyScript() {
    wp_enqueue_style('mytheme', get_bloginfo('template_directory').'/style.less', array('blueprint'), '', 'screen, projection');
}
add_action('wp_head', 'addMyScript');

然后确保您的header.php 文件中有do_action('wp_head');，它应该可以正常工作。

【讨论】：

是的，但我的标题不是主页独有的。所以如果我将它添加到我的标题中，它会包含在每个页面中。
马克，那么您可以将wp_enqueue_script() 调用放在if( is_front_page() ) { ... } 条件语句中。这将导致脚本只添加在主页上，而不是每一步。