如何在我的WordPress主题中使用wp_enqueue_style()?

zhte4eai  于 2022-11-22  发布在  WordPress
关注(0)|答案(6)|浏览(146)

我正在为一个客户建立我的第一个WordPress站点。我真的很想使用LESS的CSS,并发现了一个名为WP-LESS的WP插件。
现在,我是总WordPress的newb,但它似乎这个插件需要我使用一个名为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'); ?>
dwbf0jvd

dwbf0jvd1#

主题或插件内的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
a11xaf1n

a11xaf1n2#

不完全是,但差不多了。你要做的是在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');,它应该工作得很好。

dnph8jn4

dnph8jn43#

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

add_action('wp', 'useLess');
qyuhtwio

qyuhtwio4#

在你的主题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 );
?>
twh00eeo

twh00eeo5#

如果你输入的代码正确,你一定会看到这个函数在你的index.php文件wp_head()中是否存在;& wp_footer()的最大值如果不存在,你需要在索引文件中添加这个函数。2你需要添加这个wp_head();在haed标记之前,另一个添加在body标记之前。
函数load_style(){
如果您的浏览器中有一个模板,那么您就可以使用这个模板来创建一个模板。
wp_入队样式('我的样式');
}
//注册样式表。
添加操作('wp_入队脚本','加载样式');
更多details

eit6fx6z

eit6fx6z6#

要确保在适当的时间完成入队,请使用add_action()
因此,在functions.php中,它将类似于以下内容:

add_action( 'wp_enqueue_scripts', function() {
  wp_enqueue_style('main-style', get_template_directory_uri() . '/style.less');
});

确保在您的header.php中的某个地方有一个<?php wp_head(); ?>
顺便说一句,不需要命名函数,它只能是一个潜在的名称冲突或打字错误最好使用anonymous function
最后备注:为什么不在开发环境中编译.less文件,然后部署生成的.css文件(缩小的或其他的)?

相关问题