在unctions.php文件中链接Java脚本

时间:2014-05-03 作者:peteremeke

下面是我从html模板中嵌入的原始javascript。但我不知道如何将其添加到我的函数中。php文件。这似乎很难。请您使用wp_enqueue_script 作用

<script src="../assets/components/plugins/ajaxify/script.min.js?v=v1.9.6&sv=v0.0.1"></script>

<script>var App = {};</script>

<script data-id="App.Scripts">
App.Scripts = {

    /* CORE scripts always load first; */
    core: [
        \'../assets/components/library/jquery/jquery.min.js?v=v1.9.6&sv=v0.0.1\', 
        \'../assets/components/library/modernizr/modernizr.js?v=v1.9.6&sv=v0.0.1\'
    ],

    /* PLUGINS_DEPENDENCY always load after CORE but before PLUGINS; */
    plugins_dependency: [
        \'../assets/components/library/bootstrap/js/bootstrap.min.js?v=v1.9.6&sv=v0.0.1\', 
        \'../assets/components/library/jquery/jquery-migrate.min.js?v=v1.9.6&sv=v0.0.1\'
    ],

    /* PLUGINS always load after CORE and PLUGINS_DEPENDENCY, but before the BUNDLE / initialization scripts; */
    plugins: [
        \'../assets/components/plugins/nicescroll/jquery.nicescroll.min.js?v=v1.9.6&sv=v0.0.1\', 
        \'../assets/components/plugins/breakpoints/breakpoints.js?v=v1.9.6&sv=v0.0.1\', 
        \'../assets/components/plugins/ajaxify/davis.min.js?v=v1.9.6&sv=v0.0.1\', 
        \'../assets/components/plugins/ajaxify/jquery.lazyjaxdavis.min.js?v=v1.9.6&sv=v0.0.1\', 
        \'../assets/components/plugins/preload/pace/pace.min.js?v=v1.9.6&sv=v0.0.1\', 
        \'../assets/components/plugins/owl-carousel/owl.carousel.min.js?v=v1.9.6&sv=v0.0.1\', 
        \'../assets/components/common/forms/elements/bootstrap-select/assets/lib/js/bootstrap-select.js?v=v1.9.6&sv=v0.0.1\', 
        \'../assets/components/plugins/less-js/less.min.js?v=v1.9.6&sv=v0.0.1\', 
        \'../assets/components/modules/admin/charts/flot/assets/lib/excanvas.js?v=v1.9.6&sv=v0.0.1\', 
        \'../assets/components/plugins/browser/ie/ie.prototype.polyfill.js?v=v1.9.6&sv=v0.0.1\'
    ],

    /* The initialization scripts always load last and are automatically and dynamically loaded when AJAX navigation is enabled; */
    bundle: [
        \'../assets/components/plugins/ajaxify/ajaxify.init.js?v=v1.9.6\', 
        \'../assets/components/core/js/preload.pace.init.js?v=v1.9.6\', 
        \'../assets/components/modules/admin/content/assets/news-featured-2.init.js?v=v1.9.6\', 
        \'../assets/components/modules/admin/content/assets/news-featured-1.init.js?v=v1.9.6\', 
        \'../assets/components/modules/admin/content/assets/news-featured-3.init.js?v=v1.9.6\', 
        \'../assets/components/core/js/sidebar.main.init.js?v=v1.9.6\', 
        \'../assets/components/core/js/sidebar.collapse.init.js?v=v1.9.6\', 
        \'../assets/components/common/forms/elements/bootstrap-select/assets/custom/js/bootstrap-select.init.js?v=v1.9.6&sv=v0.0.1\', 
        \'../assets/components/core/js/sidebar.kis.init.js?v=v1.9.6\', 
        \'../assets/components/core/js/core.init.js?v=v1.9.6\', 
        \'../assets/components/core/js/animations.init.js?v=v1.9.6\'
    ]

};
</script>

<script>
$script(App.Scripts.core, \'core\');

$script.ready([\'core\'], function(){
    $script(App.Scripts.plugins_dependency, \'plugins_dependency\');
});
$script.ready([\'core\', \'plugins_dependency\'], function(){
    $script(App.Scripts.plugins, \'plugins\');
});
$script.ready([\'core\', \'plugins_dependency\', \'plugins\'], function(){
    $script(App.Scripts.bundle, \'bundle\');
});
</script>
    <script>if (/*@cc_on!@*/false && document.documentMode === 10) { document.documentElement.className+=\' ie ie10\'; }</script>

1 个回复
SO网友:codearachnid

这看起来像是在使用JS包管理器,可能Dustin Diaz\'s ScriptJS? 我假设您正在主题文件夹中存储所有这些文件,那么只需链接到您的脚本即可。min.js文件,通过wp_enqueue_script 机制如下:

function wpse143251_enqueue_theme_scripts() {
    wp_enqueue_script( \'dustindiaz-scriptjs\', get_template_directory_uri() . \'/assets/components/plugins/ajaxify/script.min.js?v=v1.9.6&sv=v0.0.1\' );
}
add_action( \'wp_enqueue_scripts\', \'wpse143251_enqueue_theme_scripts\' );
剩下的脚本需要通过JS加载程序引用;然而,由于路径似乎是相对的,如果它们包含在模板片段中,则层次结构将使路径无效。所以使用wp_footer 然后,您可以使用主题资产的正确路径打印此链接:

function wpse143251_custom_theme_scripts(){
    $theme = get_template_directory_uri();
    ?>
    <script>var App = {};</script>
    <script data-id="App.Scripts">
    App.Scripts = {

        /* CORE scripts always load first; */
        core: [
            \'<?php echo $theme; ?>/assets/components/library/jquery/jquery.min.js?v=v1.9.6&sv=v0.0.1\', 
            \'<?php echo $theme; ?>/assets/components/library/modernizr/modernizr.js?v=v1.9.6&sv=v0.0.1\'
        ],

        /* PLUGINS_DEPENDENCY always load after CORE but before PLUGINS; */
        plugins_dependency: [
            \'<?php echo $theme; ?>/assets/components/library/bootstrap/js/bootstrap.min.js?v=v1.9.6&sv=v0.0.1\', 
            \'<?php echo $theme; ?>/assets/components/library/jquery/jquery-migrate.min.js?v=v1.9.6&sv=v0.0.1\'
        ],

        /* PLUGINS always load after CORE and PLUGINS_DEPENDENCY, but before the BUNDLE / initialization scripts; */
        plugins: [
            \'<?php echo $theme; ?>/assets/components/plugins/nicescroll/jquery.nicescroll.min.js?v=v1.9.6&sv=v0.0.1\', 
            \'<?php echo $theme; ?>/assets/components/plugins/breakpoints/breakpoints.js?v=v1.9.6&sv=v0.0.1\', 
            \'<?php echo $theme; ?>/assets/components/plugins/ajaxify/davis.min.js?v=v1.9.6&sv=v0.0.1\', 
            \'<?php echo $theme; ?>/assets/components/plugins/ajaxify/jquery.lazyjaxdavis.min.js?v=v1.9.6&sv=v0.0.1\', 
            \'<?php echo $theme; ?>/assets/components/plugins/preload/pace/pace.min.js?v=v1.9.6&sv=v0.0.1\', 
            \'<?php echo $theme; ?>/assets/components/plugins/owl-carousel/owl.carousel.min.js?v=v1.9.6&sv=v0.0.1\', 
            \'<?php echo $theme; ?>/assets/components/common/forms/elements/bootstrap-select/assets/lib/js/bootstrap-select.js?v=v1.9.6&sv=v0.0.1\', 
            \'<?php echo $theme; ?>/assets/components/plugins/less-js/less.min.js?v=v1.9.6&sv=v0.0.1\', 
            \'<?php echo $theme; ?>/assets/components/modules/admin/charts/flot/assets/lib/excanvas.js?v=v1.9.6&sv=v0.0.1\', 
            \'<?php echo $theme; ?>/assets/components/plugins/browser/ie/ie.prototype.polyfill.js?v=v1.9.6&sv=v0.0.1\'
        ],

        /* The initialization scripts always load last and are automatically and dynamically loaded when AJAX navigation is enabled; */
        bundle: [
            \'<?php echo $theme; ?>/assets/components/plugins/ajaxify/ajaxify.init.js?v=v1.9.6\', 
            \'<?php echo $theme; ?>/assets/components/core/js/preload.pace.init.js?v=v1.9.6\', 
            \'<?php echo $theme; ?>/assets/components/modules/admin/content/assets/news-featured-2.init.js?v=v1.9.6\', 
            \'<?php echo $theme; ?>/assets/components/modules/admin/content/assets/news-featured-1.init.js?v=v1.9.6\', 
            \'<?php echo $theme; ?>/assets/components/modules/admin/content/assets/news-featured-3.init.js?v=v1.9.6\', 
            \'<?php echo $theme; ?>/assets/components/core/js/sidebar.main.init.js?v=v1.9.6\', 
            \'<?php echo $theme; ?>/assets/components/core/js/sidebar.collapse.init.js?v=v1.9.6\', 
            \'<?php echo $theme; ?>/assets/components/common/forms/elements/bootstrap-select/assets/custom/js/bootstrap-select.init.js?v=v1.9.6&sv=v0.0.1\', 
            \'<?php echo $theme; ?>/assets/components/core/js/sidebar.kis.init.js?v=v1.9.6\', 
            \'<?php echo $theme; ?>/assets/components/core/js/core.init.js?v=v1.9.6\', 
            \'<?php echo $theme; ?>/assets/components/core/js/animations.init.js?v=v1.9.6\'
        ]

    };
    </script>

    <script>
    $script(App.Scripts.core, \'core\');

    $script.ready([\'core\'], function(){
        $script(App.Scripts.plugins_dependency, \'plugins_dependency\');
    });
    $script.ready([\'core\', \'plugins_dependency\'], function(){
        $script(App.Scripts.plugins, \'plugins\');
    });
    $script.ready([\'core\', \'plugins_dependency\', \'plugins\'], function(){
        $script(App.Scripts.bundle, \'bundle\');
    });
    </script>
    <script>if (/*@cc_on!@*/false && document.documentMode === 10) { document.documentElement.className+=\' ie ie10\'; }</script>
    <?php
}
add_action( \'wp_footer\', \'wpse143251_custom_theme_scripts\' );
作为补充说明,我建议删除JS资产末尾的查询字符串vars,因为它会破坏访问者浏览器上的缓存,并要求他们重复下载这些资产。

结束