Question

I'am trying to include all my css and JS files of a theme using functions.php

Folowing is what i have done so far

 <?php

    function blogroom() {

        wp_enqueue_style('bootstrap',  get_stylesheet_directory_uri() . '/assets/lib/bootstrap/dist/css/bootstrap.min.css');
        wp_enqueue_style('loaders',  get_stylesheet_directory_uri() . '/assets/lib/loaders.css/loaders.min.css');
        wp_enqueue_style('iconsmind',  get_stylesheet_directory_uri() . '/assets/lib/iconsmind/iconsmind.css');
        wp_enqueue_style('hamburgers',  get_stylesheet_directory_uri() . '/assets/lib/hamburgers/dist/hamburgers.min.css');
        wp_enqueue_style('font-awesome-css',  get_stylesheet_directory_uri() . '/assets/lib/font-awesome/css/font-awesome.min.css');
        wp_enqueue_style('theme-style',  get_stylesheet_directory_uri() . '/assets/css/style.css');
        wp_enqueue_style('theme-style',  get_stylesheet_directory_uri() . '/assets/css/custom.css');
        wp_register_script( 'bootstrap-js', get_template_directory_uri() . '/assets/lib/bootstrap/dist/js/bootstrap.min.js');
        wp_register_script( 'imageloaded', get_template_directory_uri() . '/assets/lib/imagesloaded/imagesloaded.pkgd.min.js', array( 'bootstrap-js' ) );
        wp_register_script( 'tweenmax', get_template_directory_uri() . '/assets/lib/gsap/src/minified/TweenMax.min.js', array('imageloaded') );
        wp_register_script( 'scroll-to-plugin', get_template_directory_uri() . '/assets/lib/gsap/src/minified/plugins/ScrollToPlugin.min.js', array('tweenmax') );
        wp_register_script( 'customToEase', get_template_directory_uri() . '/assets/lib/CustomEase.min.js', array('scroll-to-plugin') );
        wp_register_script( 'configJs', get_template_directory_uri() . '/assets/js/config.js', array('customToEase') );
        wp_register_script( 'zanimation', get_template_directory_uri() . '/assets/js/zanimation.js', array('configJs') );
        wp_register_script( 'corejs', get_template_directory_uri() . '/assets/js/core.js', array('zanimation') );
        wp_register_script( 'mainjs', get_template_directory_uri() . '/assets/js/main.js', array('corejs') );
        wp_enqueue_script( 'mainjs' );    
     }

    add_action( 'wp_enqueue_scripts', 'blogroom' );


?>

Here, this only loads my CSS file and not my js files. not a single javascript file is loaded.

Can someone please help?

Answer 1

您只是在不加入脚本的情况下注册脚本。

为每个脚本执行与main.js相同的操作，对于每个已注册的脚本，将其排入队列

wp_enqueue_script( 'your registered script name' );

还要确保主题标题和页脚中都有wp_head（）和wp_footer（）。

Answer 2

我认为这可能是由于对wp_register_script vs wp_enqueue_script的误解。

wp_register_script只告诉WP在给定位置有一个脚本，并给它一个＆＃34;句柄＆＃34;用于其他目的。 wp_enqueue_scripts告诉WP 使用脚本。并且，有两种格式 - ＆＃34; long＆＃34;格式类似于wp_register_script，因此您可以在一个命令中告诉WP脚本在哪里，并加载它。

以下代码可以使用 - 我已将wp_register_script来电更改为wp_enqueue_script：

function blogroom() {
    wp_enqueue_style('bootstrap',  get_stylesheet_directory_uri() . '/assets/lib/bootstrap/dist/css/bootstrap.min.css');
    wp_enqueue_style('loaders',  get_stylesheet_directory_uri() . '/assets/lib/loaders.css/loaders.min.css');
    wp_enqueue_style('iconsmind',  get_stylesheet_directory_uri() . '/assets/lib/iconsmind/iconsmind.css');
    wp_enqueue_style('hamburgers',  get_stylesheet_directory_uri() . '/assets/lib/hamburgers/dist/hamburgers.min.css');
    wp_enqueue_style('font-awesome-css',  get_stylesheet_directory_uri() . '/assets/lib/font-awesome/css/font-awesome.min.css');
    wp_enqueue_style('theme-style',  get_stylesheet_directory_uri() . '/assets/css/style.css');
    wp_enqueue_style('theme-style',  get_stylesheet_directory_uri() . '/assets/css/custom.css');
    wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/assets/lib/bootstrap/dist/js/bootstrap.min.js');
    wp_enqueue_script( 'imageloaded', get_template_directory_uri() . '/assets/lib/imagesloaded/imagesloaded.pkgd.min.js', array( 'bootstrap-js' ) );
    wp_enqueue_script( 'tweenmax', get_template_directory_uri() . '/assets/lib/gsap/src/minified/TweenMax.min.js', array('imageloaded') );
    wp_enqueue_script( 'scroll-to-plugin', get_template_directory_uri() . '/assets/lib/gsap/src/minified/plugins/ScrollToPlugin.min.js', array('tweenmax') );
    wp_enqueue_script( 'customToEase', get_template_directory_uri() . '/assets/lib/CustomEase.min.js', array('scroll-to-plugin') );
    wp_enqueue_script( 'configJs', get_template_directory_uri() . '/assets/js/config.js', array('customToEase') );
    wp_enqueue_script( 'zanimation', get_template_directory_uri() . '/assets/js/zanimation.js', array('configJs') );
    wp_enqueue_script( 'corejs', get_template_directory_uri() . '/assets/js/core.js', array('zanimation') );
    wp_enqueue_script( 'mainjs', get_template_directory_uri() . '/assets/js/main.js', array('corejs') );  
 }

add_action( 'wp_enqueue_scripts', 'blogroom' );

通常情况下，您只会在几种情况下使用wp_register_script - 这是两个常见的情况：
1.您希望localize_script使用wp_localize_script（这允许您输出PHP中的javascript变量，这些变量将被视为＆＃34;相关＆＃34;到注册的脚本）
2.您想要注册脚本，因为您可能会或可能不会在以后输出脚本（这在编写短代码时特别有用，您可以注册脚本，设置＆＃34;标记＆＃34;如果呈现短代码，并且仅当设置了标志时，页脚才能输出脚本）。可以在本文中看到此方法：How to load JavaScript like a WordPress Master

wordpress functions.php not loading javascript files

2 个答案: