WordPress wp_enQueue_style支持noscript吗？

时间：2017-10-01 作者：Zorro Here

我想为自定义主题添加包装在noscript标记中的样式表。wp\\u enqueue\\u style是否支持它？或者我应该像在html中通常那样包含它吗？

3 个回复

最合适的回答,由SO网友:Milan Petrovic 整理而成

不，没有。如果你需要NOSCRIPT, 您需要将其添加到主题标题中。php直接或使用wp_head 从代码添加的操作。

SO网友:Celso Bessa

Zorro Here 今天，当我想为排队脚本解决同样的问题时，我偶然发现了这个问题。我猜你真正想要的是noscript 在脚本之后，而不是样式之后，对吗

如果是，我将分享我解决问题的方法，因为它可能也会对您有所帮助。

使用noscript 遗憾的是，到目前为止，WordPress还没有一种特定于本机的方法来向任何使用本机wp\\u register\\u script/wp\\u enqueue\\u script functionsw排队的Javascript添加noscript元素

好消息是，你可以通过使用WordPress过滤器来解决这个问题。具体来说，通过使用script\\u loader\\u标记，如下面的示例所示。

/**
 * @summary        filters an enqueued script tag and adds a noscript element after it
 * 
 * @description    filters an enqueued script tag (identified by the $handle variable) and
 *                 adds a noscript element after it. If there is also an inline script enqueued
 *                 after $handled, adds the noscript element after it.
 * 
 * @access    public
 * @param     string    $tag       The tag string sent by `script_loader_tag` filter on WP_Scripts::do_item
 * @param     string    $handle    The script handle as sent by `script_loader_tag` filter on WP_Scripts::do_item
 * @param     string    $src       The script src as sent by `script_loader_tag` filter on WP_Scripts::do_item
 * @return    string    $tag       The filter $tag variable with the noscript element
 */
function add_noscript_filter($tag, $handle, $src){
    // as this filter will run for every enqueued script
    // we need to check if the handle is equals the script
    // we want to filter. If yes, than adds the noscript element
    if ( \'script-handle\' === $handle ){
        $noscript = \'<noscript>\';
        // you could get the inner content from other function
        $noscript .= \'<p>this site demands javascript</p>\';
        $noscript .= \'</noscript>\';
        $tag = $tag . $noscript;
    }
        return $tag;
}
// adds the add_noscript_filter function to the script_loader_tag filters
// it must use 3 as the last parameter to make $tag, $handle, $src available
// to the filter function
add_filter(\'script_loader_tag\', \'add_noscript_filter\', 10, 3);

基本上，你必须附加noscript 使用add_noscript_filter, 这给了你最后的机会script 包含原始脚本和wp_enqueue_script 以及添加的任何内联脚本wp_add_inline_script 钩

使用noscript 对于样式，如果您真的需要将其用于样式，有style_loader_tag 以类似方式工作的过滤器

您可以这样使用它：

/**
 * @summary        filters an enqueued style tag and adds a noscript element after it
 * 
 * @description    filters an enqueued style tag (identified by the $handle variable) and
 *                 adds a noscript element after it.
 * 
 * @access    public
 * @param     string    $tag       The tag string sent by `style_loader_tag` filter on WP_Styles::do_item
 * @param     string    $handle    The script handle as sent by `script_loader_tag` filter on WP_Styles::do_item
 * @param     string    $href      The style tag href parameter as sent by `script_loader_tag` filter on WP_Styles::do_item
 * @param     string    $media     The style tag media parameter as sent by `script_loader_tag` filter on WP_Styles::do_item
 * @return    string    $tag       The filter $tag variable with the noscript element
 */
function add_noscript_style_filter($tag, $handle, $href, $media){
    // as this filter will run for every enqueued script
    // we need to check if the handle is equals the script
    // we want to filter. If yes, than adds the noscript element
    if ( \'script-handle\' === $handle ){
        $noscript = \'<noscript>\';
        // you could get the inner content from other function
        $noscript .= \'<p>this site demands javascript</p>\';
        $noscript .= \'</noscript>\';
        $tag = $tag . $noscript;
    }
        return $tag;
}
// adds the add_noscript_filter function to the style_loader_tag filters
// it must use 4 as the last parameter to make $tag, $handle, $href, $media available
// to the filter function
add_filter(\'style_loader_tag\', \'add_noscript_style_filter\', 10, 4);

参考文献：

SO网友:ssnepenthe

其他回答提供了您所问问题的答案，但它们忽略了一种更常见的基于客户端是否支持JavaScript修改样式的方法。

第一：在您的header.php 文件添加ano-js 类设置为根（html）元素。它可能看起来像：

<html class="no-js" <?php language_attributes(); ?>>

下一步：添加替换no-js 使用js 班这也可以在中直接处理header.php 但我更愿意把它放在wp_head 行动以下是当前默认主题“2017年”的一个示例：

function twentyseventeen_javascript_detection() {
    echo "<script>(function(html){html.className = html.className.replace(/\\bno-js\\b/,\'js\')})(document.documentElement);</script>\\n";
}
add_action( \'wp_head\', \'twentyseventeen_javascript_detection\', 0 );

最后：决定你想如何应用你的风格。具体情况会有所不同。您可以：

应用您的样式，假设JavaScript不可用于以下情况的覆盖：

.my-element {
    display: block;
}

.js .my-element {
    display: none;
}

或者应用样式，假设JavaScript在以下情况下可以使用覆盖：

.my-element {
    display: none;
}

.no-js .my-element {
    display: block;
}

结束

小码农CODE

WordPress wp_enQueue_style支持noscript吗？

相关推荐