清理 wp_head 插件的输出答案

【问题标题】：clean wp_head plugin's output清理 wp_head 插件的输出
【发布时间】：2016-09-21 10:17:54
【问题描述】：

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

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

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

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

最好的问候

【问题讨论】：

标签： wordpress gruntjs gulp

【解决方案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' );

【讨论】：