Bootstrap 的 CDN 的 WordPress 回退而不依赖 JavaScript？

Question

使用 Bootstrap 开发 WordPress 主题 4 我熟悉建议的编码方法 <div>:

<div id="bootstrapCssTest" class="hidden"></div>

并用 JavaScript 检查它：

<script type="text/javascript">
    if ($('#bootstrapCssTest').is(':visible') === true) {
        $('<link href="/localcopy/css/bootstrap.css" rel="stylesheet" type="text/css" />').appendTo('head');
    }
</script>

引用:》How to load local copy of bootstrap css when the cdn server is down?" but I would like a way to test the CSS without JavaScript and enqueue Bootstrap's CSS depending on if the CDN is found. Upon research I read that fopen may not be allowed always on the server level so I opted for get_headers,代码:

function bootstrap_css() {
    $bootstrap_cdn   = 'https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css';
    $cdn_check       =  @get_headers($bootstrap_cdn);

    if ($cdn_check[0] === "HTTP/1.1 200 OK") :
        wp_enqueue_style('bootstrap',$bootstrap_cdn,array(),'4.2.1');

        function add_cross_origin($html,$handle) {
            if ('bootstrap' === $handle) {
                return str_replace("media='all'","media='all' integrity='sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS' crossorigin='anonymous'",$html);
            }
                return $html;
            }
        add_filter('style_loader_tag','add_cross_origin',10,2);
    else :
        wp_enqueue_style('bootstrap',get_site_url() . '/css/bootstrap.min.css',false,'4.2.1');
    endif;
}
add_action('wp_enqueue_scripts','bootstrap_css');

是否有更好的方法来检查 Bootstrap CSS CDN 是否可用而不使用 JavaScript 进行测试？我应该检查 "HTTP/1.1 200 OK" 之外的任何内容吗？ cURL 会比 get_headers 更好用吗？

Answer 1

在 php 脚本第一次尝试访问 CSS 文件后，服务器 returns 状态代码为 304。最简单的检查方法如下：

function bootstrap_css() {
$bootstrap_cdn   = 'https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css';
$cdn_check       =  @get_headers($bootstrap_cdn);

if (strpos($cdn_check[0], "200") !== false || strpos($cdn_check[0], "304") !== false) :
    wp_enqueue_style('bootstrap',$bootstrap_cdn,array(),'4.2.1');

function add_cross_origin($html,$handle) {
    if ('bootstrap' === $handle) {
        return str_replace("media='all'","media='all' integrity='sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS' crossorigin='anonymous'",$html);
    }
        return $html;
    }
add_filter('style_loader_tag','add_cross_origin',10,2);
    else :
        wp_enqueue_style('bootstrap',get_site_url() . '/css/bootstrap.min.css',false,'4.2.1');
    endif;
}
add_action('wp_enqueue_scripts','bootstrap_css');

Bootstrap 的 CDN 的 WordPress 回退而不依赖 JavaScript？

WordPress fallback for Bootstrap's CDN without relying on JavaScript?

css

wordpress

cdn

bootstrap-4