Question

我是wordpress的初学者，我的工作是整合模板和主题。但是对wp_head和wp_footer函数有疑问。

它们都生成样式表和脚本，但是在我的主题和模板页面上，并且希望只有一个样式表和一个脚本（例如：css / style.css和js / app.js）

我的意思是，style.css将有模板规则，但已经有来自插件的样式等。 app.js将有jQuery缩小，几个插件（如灯箱等）和我自己的脚本。

我该怎么做？我通常使用grunt或gulp。但我可以说ton wp函数＆＃34;不要从头部插件中添加脚本，而是将它添加到我的主JS文件中＃34; ？

祝你好运

Answer 1

通过wp_head或wp_footer加载的脚本在Wordpress中排队。

如果要删除它们而只加载单个样式表和一个JS文件，则需要将所有其他脚本出列。

但是，首先，您需要确定哪些脚本已加入队列，您可以通过加载全局$wp_styles和$wp_scripts变量并按如下方式迭代它们来执行此操作：

function se_inspect_styles() {
    global $wp_styles;
    echo "<h2>Enqueued CSS Stylesheets</h2><ul>";
    foreach( $wp_styles->queue as $handle ) :
        echo "<li>" . $handle . "</li>";
    endforeach;
    echo "</ul>";
}
add_action( 'wp_print_styles', 'se_inspect_styles' );

function se_inspect_scripts() {
    global $wp_scripts;
    echo "<h2>Enqueued JS Scripts</h2><ul>";
    foreach( $wp_scripts->queue as $handle ) :
        echo "<li>" . $handle . "</li>";
    endforeach;
    echo "</ul>";
}
add_action( 'wp_print_scripts', 'se_inspect_scripts' );

然后，您可以通过挂钩wp_print_styles操作（对于CSS文件）和wp_print_scripts操作（对于JS文件）来手动取消并取消注册所有这些脚本，如下所示：

// Dequeue CSS
function se_dequeue_unnecessary_styles() {
    wp_dequeue_style( 'bootstrap-map' );
        wp_deregister_style( 'bootstrap-map' );
}
add_action( 'wp_print_styles', 'se_dequeue_unnecessary_styles' );

// Dequeue JS
function se_dequeue_unnecessary_scripts() {
    wp_dequeue_script( 'modernizr-js' );
        wp_deregister_script( 'modernizr-js' );
    wp_dequeue_script( 'project-js' );
        wp_deregister_script( 'project-js' );
}
add_action( 'wp_print_scripts', 'se_dequeue_unnecessary_scripts' );

如果您仍然需要任何出列的脚本，那么只需确保将其源添加到您的grunt / gulp文件中。

最后，您想要将由grunt / gulp生成的单个CSS和JS脚本排入队列（尽管您可以随时从模板中手动链接到这些脚本）。

以下是一些示例代码：

function se_theme_js(){
    // Theme JS
    wp_register_script( 'my-scripts',
        get_template_directory_uri() . '/js/main.min.js',
        array('jquery'),
        null,
        true );
    wp_enqueue_script('my-scripts');
}
add_action( 'wp_enqueue_scripts', 'se_theme_js' );

function se_theme_styles() {
    // Theme CSS
    wp_register_style( 'my-style',
        get_stylesheet_directory_uri() . '/css/main.min.css',
        array(),
        null,
        'all' );
    wp_enqueue_style( 'my-style' );
}
add_action( 'wp_enqueue_scripts', 'se_theme_styles' );

清理wp_head插件的输出

1 个答案: