programing

WordPress - LT IE 9의 경우에만 스크립트를 큐잉

abcjava 2023. 2. 25. 19:30
반응형

WordPress - LT IE 9의 경우에만 스크립트를 큐잉

WordPress 테마에서 ie8 이하의 스크립트를 조건부로 포함하려면 어떻게 해야 합니까?이는 주로 다양한 html5/css3 기능에 폴리필을 적용하기 위한 것입니다.wp가 $is_를 가지고 있는 것을 알 수 있습니다.IE 변수: IE용 스크립트만 포함하는 조건으로 사용할 수 있습니다.IE의 모든 버전이 아닌 특정 버전에만 스크립트를 추가할 수 있는 방법이 있습니까?이것은 HTML ie 조건부 코멘트로 간단하게 할 수 있습니다만, 모든 스크립트를 함수 파일의 같은 장소에 포함시키고 싶습니다.

HTML의 특정 버전에 대한 조건:

<!--[if lt IE 9]> <script src="iepolyfill.min.js"></script> <![endif]-->

WP의 모든 IE에 대한 조건부:

    global $is_IE;

    if ( $is_IE ) {
        wp_enqueue_script( 'iepolyfill', bloginfo('stylesheet_directory').'/js/iepolyfill.min.js' );
    }

wp 백엔드에 한해 조건부 스크립트에 대한 자세한 내용을 확인했습니다.

좋은 의견이라도 있나?

WordPress 4.2+의 경우

이 명령을 사용하여 스크립트를 조건부 코멘트로 랩합니다.

wp_enqueue_script( 'html5shiv', '//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.js' );
wp_script_add_data( 'html5shiv', 'conditional', 'lt IE 9' );

wp_enqueue_script( 'respond', get_template_directory_uri() . '/js/respond.min.js' );
wp_script_add_data( 'respond', 'conditional', 'lt IE 9' );

호출하기 전에 스크립트를 등록해야 합니다.wp_script_add_data(등록처리는wp_enqueue_script위) 및 그 첫 번째 인수는 다음과 같습니다.wp_script_add_data는 스크립트 등록 시 전달된 첫 번째 인수와 일치합니다.


WordPress 4.1의 경우

현재 필터를 사용하여 조건부 코멘트로 랩된 스크립트를 큐잉할 수 있습니다.다음으로 구현 예를 제시하겠습니다.

wp_enqueue_script( 'html5shiv', '//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.js', array(), '3.7.2', false );
add_filter( 'script_loader_tag', function( $tag, $handle ) {
    if ( $handle === 'html5shiv' ) {
        $tag = "<!--[if lt IE 9]>$tag<![endif]-->";
    }
    return $tag;
}, 10, 2 );

같은 방법으로 여러 스크립트를 포함하려면 다음과 같은 방법을 사용할 수 있습니다.

// Conditional polyfills
$conditional_scripts = array(
    'html5shiv'           => '//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.js',
    'html5shiv-printshiv' => '//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv-printshiv.js',
    'respond'             => '//cdn.jsdelivr.net/respond/1.4.2/respond.min.js'
);
foreach ( $conditional_scripts as $handle => $src ) {
    wp_enqueue_script( $handle, $src, array(), '', false );
}
add_filter( 'script_loader_tag', function( $tag, $handle ) use ( $conditional_scripts ) {
    if ( array_key_exists( $handle, $conditional_scripts ) ) {
        $tag = "<!--[if lt IE 9]>$tag<![endif]-->";
    }
    return $tag;
}, 10, 2 );
  • 를 사용해 주세요.wp_register_script()스크립트를 WP 테마 또는 플러그인에 추가할 때마다.
  • 서버측의 스니핑은 불명확하기 때문에 일반적으로 좋지 않은 생각입니다.
  • 일반적으로 IE 브라우저뿐만 아니라 서비스 기능이 없는 브라우저를 대상으로 합니다.Modernzr은 그것을 하기 위한 좋은 대본이다.

IE의 경우 조건부 태그가 매우 잘 작동합니다.다음은 스크립트에 조건부 태그를 추가하는 방법입니다. 예를 들어 HTML5shiv의 경우입니다.

global $wp_scripts;
wp_register_script( 
    'html5shiv', 
    get_bloginfo('template_url').'/assets/js/html5shiv.js', 
    array(), 
    '3.6.2'
    );
$wp_scripts->add_data( 'html5shiv', 'conditional', 'lt IE 9' );

WordPress 4.2 이상용 솔루션

올바른 방법은 여기에 JavaScript를 적용하기 때문에 wp_enqueue_script를 적용하는 것이지 css 스타일은 적용할 수 없습니다.또한 get_bloginfo('stylesheet_url')를 사용하여 이 기능이 하위 테마에서도 작동하는지 확인하는 것이 좋습니다.

/**
 * IE Fallbacks
 */

function load_IE_fallback() {
    wp_register_script( 'ie_html5shiv', get_bloginfo('stylesheet_url'). '/js/html5shiv.min.js', __FILE__, false, '3.7.2' );
    wp_enqueue_script( 'ie_html5shiv');
    wp_script_add_data( 'ie_html5shiv', 'conditional', 'lt IE 9' );

    wp_register_script( 'ie_respond', get_bloginfo('stylesheet_url'). '/js/respond.min.js', __FILE__, false, '1.4.2' );
    wp_enqueue_script( 'ie_respond');
    wp_script_add_data( 'ie_respond', 'conditional', 'lt IE 9' );
}
add_action( 'wp_enqueue_scripts', 'load_IE_fallback' ); 

CDN에서 스크립트를 로드한 WordPress 4.7.3 업데이트:

    add_action( 'wp_enqueue_scripts', 'load_IE_fallback' );
function load_IE_fallback() {
    wp_register_script( 'ie_html5shiv', 'https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js', '', '3.7.3', false );
    wp_register_script( 'ie_respond', 'https://oss.maxcdn.com/respond/1.4.2/respond.min.js', '', '1.4.2', false );

    wp_enqueue_script( 'ie_html5shiv');
    wp_enqueue_script( 'ie_respond');

    wp_script_add_data( 'ie_html5shiv', 'conditional', 'lt IE 9' );    
    wp_script_add_data( 'ie_respond', 'conditional', 'lt IE 9' );
}

가장 좋은 방법은 스크립트를 큐잉한 후 wp_style_add_data()를 사용하여 조건을 붙이는 것입니다.이 방법은 2113과 같은 공식 주제에서 사용되고 있다.

이것과 비슷한 답이 있지만, 그는 잘못된 조건이라면 추가한다.

wp_register_style( 'ie_html5shiv', get_template_directory_uri() . '/js/html5shiv.js' );
    wp_enqueue_style( 'ie_html5shiv');
    wp_style_add_data( 'ie_html5shiv', 'conditional', 'lt IE 9' );

    wp_register_style( 'ie_respond', get_template_directory_uri() . '/js/respond.min.js' );
    wp_enqueue_style( 'ie_respond');
    wp_style_add_data( 'ie_respond', 'conditional', 'lt IE 9' );

워드프레스는 PHP 스크립트이므로 $_SERVER를 통해 서버 변수에 액세스할 수 있습니다.

그런 다음 PHP, PHP를 사용하여 탐지 브라우저를 검색할 수 있습니다. Internet Explorer 6, 7, 8 또는 9인 경우

도 한번 .wp_style_add_data()function (공식적으로 21, 24 테마에서 사용됨)

wp_enqueue_style( 'iepolyfill', bloginfo( 'stylesheet_directory' ) . '/js/iepolyfill.min.js' );
wp_style_add_data( 'iepolyfill', 'conditional', 'if lt IE 9' );

업데이트 : WordPress > = 4.2.0이므로 동일하게 사용하는 기능이 있습니다.이름:

wp_script_add_data()

언급URL : https://stackoverflow.com/questions/11564142/wordpress-enqueue-scripts-for-only-if-lt-ie-9

반응형