wp_register_style에 crossorigin 및 무결성을 추가하는 방법은 무엇입니까? (Font Awesome 5)

Font Awesome 4를 버전 5로 업그레이드하여 무결성 및 crossorigin 속성을 <link rel="stylesheet">마크 업에 도입했습니다.

현재, 나는 다음을 사용하고 있습니다 :

wp_register_style('FontAwesome', 'https://example.com/font-awesome.min.css', array(), null, 'all' );
wp_enqueue_style('FontAwesome');

다음과 같은 출력 :

<link rel="stylesheet" id="FontAwesome-css" href="https://example.com/font-awesome.min.css" type="text/css" media="all" />

Font Awesome 5에서는 두 가지 새로운 속성과 값 ( integrity및 crossorigin) 이 도입되었습니다 .

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

따라서 무결성과 crossorigin을 wp_register_style에 추가하는 방법을 찾아야하지만 시도했지만 사용하려는 시도 wp_style_add_data가 실패했습니다.이 방법은 conditional, rtl및 suffix, alt및 만 지원합니다 title.

style_loader_tag
style_loader_tag는 공식 WordPress API입니다. 문서를 참조하십시오 : https://developer.wordpress.org/reference/hooks/style_loader_tag/

apply_filters( 'style_loader_tag', $html, $handle, $href, $media )
대기열에 포함 된 스타일의 HTML 링크 태그를 필터링합니다.

먼저 스타일 시트를 큐에 넣습니다. 문서를 참조하십시오 : https://developer.wordpress.org/reference/functions/wp_enqueue_style/

wp_enqueue_style( 'font-awesome-5', 'https://use.fontawesome.com/releases/v5.5.0/css/all.css', array(), null );

는 $handle것입니다 'font-awesome-5'
내가 null어떤 버전 번호가없는만큼. 이런 식으로 캐시됩니다.

간단한 str_replace
간단한 str_replace는 원하는 것을 달성하기에 충분합니다 (아래 예 참조).

function add_font_awesome_5_cdn_attributes( $html, $handle ) {
    if ( 'font-awesome-5' === $handle ) {
        return str_replace( "media='all'", "media='all' integrity='sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU' crossorigin='anonymous'", $html );
    }
    return $html;
}
add_filter( 'style_loader_tag', 'add_font_awesome_5_cdn_attributes', 10, 2 );

다른 속성
을 추가 예제 아래에 여러 스타일 시트에 여러 속성을 추가하려면

function add_style_attributes( $html, $handle ) {

    if ( 'font-awesome-5' === $handle ) {
        return str_replace( "media='all'", "media='all' integrity='sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU' crossorigin='anonymous'", $html );
    }

    if ( 'another-style' === $handle ) {
        return str_replace( "media='all'", "media='all' integrity='blajbsf' example", $html );
    }

    if ( 'bootstrap-css' === $handle ) {
        return str_replace( "media='all'", "media='all' integrity='something-different' crossorigin='anonymous'", $html );
    }

    return $html;
}
add_filter( 'style_loader_tag', 'add_style_attributes', 10, 2 );

모든 스타일에 속성 추가
예제 아래에서 둘 이상의 스타일 시트에 동일한 속성을 추가하려면

function add_attributes_to_all_styles( $html, $handle ) {

        // add style handles to the array below
        $styles = array(
            'font-awesome-5',
            'another-style',
            'bootstrap-css'
        );

        foreach ( $styles as $style ) {
            if ( $style === $handle ) {
                return str_replace( "media='all'", "media='all' integrity='sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU' crossorigin='anonymous'", $html );
            }
        }

        return $html;
}
add_filter( 'style_loader_tag', 'add_attributes_to_all_styles', 10, 2 );

script_loader_tag
또한 script_loader_tag 도 설명하고 싶습니다.이 기능도 편리하지만이 API는 wp_enqueue_script 와 함께 작동합니다 .

script_loader_tag API는 거의 동일하며 약간의 차이점 만 있습니다. 설명서를 참조하십시오 : https://developer.wordpress.org/reference/hooks/script_loader_tag/

apply_filters( 'script_loader_tag', $tag, $handle, $src )
큐에 넣은 스크립트의 HTML 스크립트 태그를 필터링합니다.

단일 스크립트를 연기하는 예제 아래

function add_defer_jquery( $tag, $handle ) {
    if ( 'jquery' === $handle ) {
        return str_replace( "src", "defer src", $tag );
    }
    return $tag;
}
add_filter( 'script_loader_tag', 'add_defer_jquery', 10, 2 );

하나 이상의 스크립트를 연기하는 예제 아래

function add_defer_attribute( $tag, $handle ) {

    // add script handles to the array below
    $scripts_to_defer = array(
        'jquery',
        'jquery-migrate',
        'bootstrap-bundle-js'
    );

    foreach ( $scripts_to_defer as $defer_script ) {
        if ( $defer_script === $handle ) {
            return str_replace( "src", "defer src", $tag );
        }
    }

    return $tag;
}
add_filter( 'script_loader_tag', 'add_defer_attribute', 10, 2 );

나는 두 API의 설명 그래서 style_loader_tag및 script_loader_tag. 그리고 나는 두 API 모두에 대한 몇 가지 예를 들었습니다. 이것이 많은 사람들에게 유용하기를 바랍니다. 두 API 모두에 경험이 있습니다.

업데이트
@CKMacLeod 업데이트 해 주셔서 감사합니다. 우리는 대부분 같은 페이지에 있습니다. 내가 말했듯이, 나는 WordPress 개발자이고 https://wordpress.org 에 테마 및 / 또는 플러그인을 게시 하려면 본질적으로 " WordPress Coding Standards " 를 준수해야 합니다. 테마 및 / 또는 플러그인.

그래서 개발자들이 "워드 프레스 방식"을 사용하도록 권장합니다. 때로는 차이가 없지만 때로는 편리하다는 것을 알고 있습니다. 스스로 말했듯이 Font Awesome을 다운로드하여 테마 및 / 또는 플러그인에 포함시킬 수 있으므로 style_loader_tag 함수를 제거하고 wp_enqueue_style 함수 만 수정하면됩니다.

그리고 마지막으로 (5 년 전) 플러그인을 캐싱, 결합 및 축소하는 것이 효과가 없었으며 대부분 테마를 만든 개발자가 단순히 테마에 머리를 넣은 이유를 알았습니다. 또는 반향을 일으켰습니다. 대부분의 캐싱 플러그인은 (대부분) 스크립트 실행을 결합, 최소화 및 지연하는 옵션을 제공하여 불량 코드를 감지하고 해결하는 데 더 현명하고 나아졌습니다. 그러나 이것은 바람직하지 않습니다. 그렇기 때문에 사람들이 표준 / 컨벤션을 염두에두고 코딩하도록 권장합니다.

개발자는 항상 사람들이 코드로 수행 할 수있는 작업과 호환성을 염두에 두어야합니다. 따라서 쉬운 솔루션이 아니라 최상의 최적의 솔루션을 선택하십시오. 내 견해를 명확히했으면 좋겠다.

@CKMacLeod 편집 (기술적) 토론에 감사드립니다. 이것이 당신 자신의 개발에서 WordPress API를 사용하여 이것이 얼마나 중요한지를 깨닫기를 바랍니다. 다시, 나는 주변을 둘러 보았고 지금도 가장 인기있는 축소 플러그인의 FAQ를 보면 보통이 방법을 볼 수 있습니다.

질문 : 일부 CSS 및 JS 파일이 병합되지 않는 이유는 무엇입니까?
답변 : 플러그인은 공식 WordPress API 메소드 ( https://developer.wordpress.org/themes/basics/include-css-javascript/) 와 동일한 도메인의 파일 (지정하지 않는 한)을 사용하여 대기열에 포함 된 JS 및 CSS 파일 만 처리 합니다. 설정에서).

FAQ를 참조하십시오 : https://wordpress.org/plugins/fast-velocity-minify/

@Remzi Cavdar의 script_ 및 style_loader_tag에 대한 리뷰는 흥미롭지 만 약간의 분노를 유발할 위험이 있으며 누군가가 WP 대기열을 사용하는 이점이 무엇인지 상기시킬 수 있기를 바랍니다. 쉽게 빠져 나가고 Fontawesome의 스타일 시트를 후크를 통해로드하는 것이 좋습니다.

/* ADD FONTAWESOME 5.5.0 via action hook */
add_action( 'wp_head', 'sewpd_add_fontawesome' );

function sewpd_add_fontawesome() {

echo '
<!--FONTAWESOME 5.5.0 added via functions.php -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<!--END FONTAWESOME -->
'; 

}

심지어 테마 바닥 글 또는 게시물 내의 일부 아이콘에 대해서만 FA를 사용하는 경우 페이지 본문 내에서 FA를 사용하여 페이지 하단에 추가해야한다고 주장 할 수도 있습니다. 렌더 차단, 그러나 나는 그것을 한 적이 없다고 고백합니다 ... 그리고 그것을 header.php 또는 다른 템플릿 파일에 직접 추가하는 것을 권장하지는 않습니다. 그건 틀렸어 ;)

최신 정보

Remzi Cavdar는 왜 wp_head () 후크를 통해 Fontawesome 또는 유사한 태그를 추가하는 것이 WordPress 대기열을 이용하는 것보다 덜 바람직 할 수 있는지에 대한 알림 요청에 충분히 친절했습니다. 그는 일반적으로 모범 사례의 개념을 언급하고 다소 구체적으로 캐싱 플러그인이 큐를 통해 스타일 시트에 액세스 할 수 있어야한다는 아이디어를 언급합니다.

자세히 설명하기 전에, 나는 그것이 실제로 "워드 프레스 방식"이라는 것 외에는 다른 중요한 특정 정당성을 알지 못하지만, Cavdar 동지의 접근 방식을 좋아하고 미래에 나 자신을 사용할 수 있다고 말할 것이다. .

그러나 그의 다른 주장은 설득력이 없습니다. 그 또는 다른 사람이 추가 할 수 있습니다. 그렇다면 나는 모두 귀입니다. 결론적으로, Pingdom 및 GTMetrix에서 테스트 블로그의 "대기열 추가"와 "헤드를 통한 추가"를 비교 한 20 개 이상의 테스트를 실행 한 후에는 등급별 성능 측면에서 유의미하고 일관된 차이가 없습니다. 두 가지 접근 방식 사이의 총 페이지 요청 수 또는로드 시간 (예 : "First Paint", "First Contentful Paint"및 "OnLoad")

특히 캐싱과 관련하여 캐싱 플러그인은 외부 호스팅 파일이 WP 대기열에 추가되는지 여부에 관계없이 크게 수행 할 수 없습니다. 파일 자체는 영향을받지 않으며 페이지는 여전히 각 파일에 대한 요청을 생성합니다.

더 일반적으로, 나는 스크립트와 스타일을로드하기위한 다양한 접근 방식을 보았습니다. 그들 중 일부는 WP 대기열을 부분적으로 또는 완전히 우회합니다. Fontawesome 또는 다른 타사 태그를 대기열에 넣는 것이 약간 유용하고 두 가지를 처음 배포하는 인스턴스-특정 스타일의 페이지에로드되지 않도록하는 스타일 핸들 배열을 사용하는 함수가있을 것입니다. 대기열에 넣고 필터링하는 함수는 실제로는 단순히로드하는 것보다 더 포용 적입니다.

FA의 경우 스타일 시트는 이미 축소 되었으며 FA 자체 CDN을 통해로드됩니다. wp_head () 또는 대기열을 통해로드 되든간에 성능에 대한 본질적인 영향은 최소화 될 것입니다. Google Page Speed ​​Insights 및 앞서 언급 한 GTMetrix 및 Pingdom과 같은 동일한 등급의 성능 등급의 여러 지점에 여전히 단점을 등록합니다. 하나 또는 다른 이미지 파일을 다시 최적화하는 몇 바이트 (킬로바이트조차 아님)를 저장하지 않은 성능 포인트를 도킹합니다.

대기열이 아닌 wp_head를 통해로드하면 "올바른 스크립트 및 스타일 순서"검사가 트립 될 수 있지만 (다른 사람이 로컬에서 호스팅 된 파일을로드 한 후 외부에서 호스팅 된 파일을로드하는 데 더 높은 등급을 매기는 경우도 있지만) 실제로로드가 걱정되는 경우 귀하의 사이트에 가장 적합한 방법으로 FA를 사용하면 파일과 하위 파일을 로컬로 호스팅 하려고 시도 합니다.스타일과 스타일 시트가 @ font-face를 통해 호출하는 글꼴입니다. 이 경우 다른 로컬 파일과 마찬가지로 스타일 시트를 대기열에 넣을 수 있으며, 최적화 플러그인을 통해 직접 또는 직접 "수동으로"스타일 시트를 결합하고 결합 할 수 있습니다. Fontawesome을 직접 수정하고 테마 스타일 시트 및 구조와 통합 할 수도 있습니다. 또는 (앞서 간단히 언급했듯이) 특정 페이지의 구조에 CSS를 인라인으로 추가하는 것과 같은 좀 더 이국적인 성능 최적화 전술을 시도해 볼 수 있습니다.

어쨌든, 새로운 "무결성"과 "원산지"태그에 대해 걱정할 필요가 없으며 언젠가 Fontawesome이 CDN 청구서 지불을 잊어 버린 경우에도 걱정할 필요가 없습니다.

또는 스타일 시트와 스크립트가 어떤 방식 으로든로드 된 상태에서 이미 완전한 혼란에 빠진 사이트에서 작업하고있을 수 있으며 functions.php 파일의 맨 위에 최신 항목을 추가하는 것이 더 쉬울 수도 있습니다. 다음 개발자는 쉽게 다시 찾을 수 있습니다 ...