清理 wp_head 插件的输出

Question

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

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

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

我该怎么做？我通常使用 grunt 或 gulp 。但是我可以说 ton wp 函数 "don't add scripts from plugins in the head, but add it in my main JS file " 吗？

此致

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 脚本加入队列（尽管您总是可以从模板手动 link如果你喜欢的话）。

下面是一些示例代码：

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 插件的输出

clean wp_head plugin's output

wordpress

gruntjs

gulp