jQuery와 JavaScript 파일을 올바르게 포함시키는 방법은 무엇입니까?


16

다음 코드로 지금하고 있습니다.

function uw_load_scripts() {
    // De-register the built in jQuery
    wp_deregister_script('jquery');
    // Register the CDN version
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), null, false); 
    // Load it in your theme
    wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'uw_load_scripts' );

이것은 작동하지만이 같은 사람이나 관리자를 제외한 모든 사람을 위해이 작업을 수행해야합니다 (따라서 백엔드는 WordPress 버전을 사용합니까?).

if (function_exists('load_my_scripts')) {  
function load_my_scripts() {  
    if (!is_admin()) {  
    wp_deregister_script( 'jquery' );  
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), null, false); 
    wp_enqueue_script('jquery');   
    }  
}  
}  
add_action('init', 'load_my_scripts');

이 버전은 실제로 작동하지 않습니다 .Google 버전이 아닌 WordPress jQuery 버전을 얻습니다.

따라서 WordPress에 포함 된 jQuery를 전혀 등록 취소해야합니까?

또한 내 자신의 스크립트 (슬라이더 스크립트, modernizr 및 내 custom.js)를 올바른 방법으로 추가하려면 어떻게합니까? 내가 지금하고있는 것처럼 헤더에서가 아니라 functions.php를 통해이 작업을 수행해야한다고 생각하지만 어떻게 그렇게 할 지 확신 할 수 없습니다.

답변:


20

첫 번째 규칙 : 버전 변경으로 인해 테마, 플러그인 또는 코어 자체가 중단되지 않을 것이 확실하지 않으면 코어 번들 스크립트를 등록 취소하고 다른 버전 으로 바꾸지 마십시오 . 실제로 코어 번들 스크립트의 대체 버전 이 절대적으로 필요 하지 않으면 코어와 함께 번들로 제공되는 것을 사용하십시오.

둘째, wp_enqueue_scripts대신 스크립트 등록 및 대기열에 연결하는 것이 좋습니다 init. ( 에서 작동init 하지만 놀랍게도 다른 사람들과의 관점에서 가장 의미 적으로 올바른 후크를 사용하는 것이 가장 좋습니다.)

셋째, 사용자 정의 스크립트를 큐에 넣으려면 위와 동일한 방법을 사용하십시오.

<?php
function wpse45437_enqueue_scripts() {
    if ( ! is_admin() ) {
        $script_path = get_template_directory_uri() . '/js/';
        // Enqueue slider script
        wp_enqueue_script( 'wpse45437_slider', $script_path . 'slider.js', array( 'jquery' ) );
        // Enqueue modernizr script
        wp_enqueue_script( 'wpse45437_modernizr', $script_path . 'modernizr.js', array( 'jquery' ) );
    }
}
add_action( 'wp_enqueue_scripts', 'wpse45437_enqueue_scripts' );
?>

큐에 넣을 스크립트를 추가하십시오.


4
절대적으로 필요한 +1 ! 너무 많은 (보통 '프리미엄') 테마가 오래된 버전의 jQuery를 등록합니다. 플러그인을 끊습니다.
Stephen Harris

이 스크립트를 함수 파일에 추가하면 (이미 PHP 선언이없는 상태에서) 'Http-error 500 (Internal server error)'가 표시됩니다. 어딘가에 오류가 있습니까?
Johan Dahl

예; wp_enqueue_script()호출에 구문 오류가있었습니다 .
Chip Bennett

고마워 이제 작동합니다! 그러나 여전히 헤더에 출력됩니다. 바닥 글의 위치에 있으면 더 좋지 않습니까? 그렇다면 코드를 수정할 수 있습니까?
Johan Dahl

바닥 글에 확실히 넣을 수 있습니다. $in_footer에 대한 호출에서 매개 변수를 true로 설정하면 됩니다 wp_enqueue_script().
Chip Bennett

4

이것이 도움이되기를 wp_enqueue_scripts바랍니다. 자세한 내용 은 코덱을 찾아보십시오 .

  1. 그나마 사용 init엔큐 . 사용 wp_enqueue_scripts프런트 엔드 물건과 admin_enqueue_scripts관리자 측. 그래도 스크립트 init등록 하는 데 사용할 수 있습니다 .
  2. 후크 wp_enqueue_scripts는 프론트 엔드에서만 발생하며 로그인 페이지에서는 실행되지 않으므로 확인하지 않아도됩니다 is_admin().
  3. 당신이 그렇지 않으면 할 수있는 특별한 이유가없는 한, 나는 등록 및 사용하여 스크립트를 대기 제안 functions.php에 대한 주제 나에 달리 플러그인. 당신은 간단히 말하면 :

     function myprefix_load_scripts() {
       // Load scripts here
     }
     add_action( 'wp_enqueue_scripts', 'myprefix_load_scripts' );
  4. 단축 코드를 사용할 때 스크립트를 대기열에 넣는 것이 목표라면 wp_enqueue_script단축 코드 콜백에서 필요할 때만 대기열 에 넣기를 원할 수 있습니다 ( 3.3 이후 바닥 글에 인쇄됩니다 ).

  5. 관리자 측에서 기존 jQuery를 다시 등록해서는 안됩니다. 무언가를 깨뜨릴 수 있습니다 : D.

  6. 플러그인 은 기존 jQuery를 다시 등록 하지 않아야합니다 .

  7. jQuery 재 등록의 장단점을 고려해야합니다. 예를 들어, 이전 버전을 등록하면 일부 플러그인이 작동하지 않을 수 있습니다 (현재는 아니지만 나중에는 ...)


1
광고 5) 재 등록은 실제로 중요하지 않습니다. 이것이 우리가 enqueue와 register 함수를 얻는 이유입니다. :)
kaiser

2

공정한 경고 : WP의 패키지 버전의 jQuery를 자신에게 유리하게 등록 취소하면 문제가 발생할 수 있습니다. 특히 WP가 버전을 업데이트 할 때마다 사용자가 가리키는 버전을 변경하도록 특별히주의하지 않으면 더욱 그렇습니다. 플러그인의 경우에는 두 가지가 있습니다. 플러그인은 종종 WP 버전의 jQuery와의 호환성을 극대화하기 위해 플러그인을 작성해야합니다.

즉, 첫 번째 버전은 정확합니다 wp_enqueue_scripts.에 연결되어 있습니다. 두 번째 함수가에 연결되어 init있어 제대로 작동하지 않을 수 있습니다.

비슷한 방식으로 자신의 스크립트를 추가하십시오.

function bbg_enqueue_scripts() {
    // You should probably do some checking to see what page you're on, so that your
    // script only loads when it needs to
    wp_enqueue_script( 'bbg-scripts', get_stylesheet_directory_url() . '/js/bbg-scripts.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'bbg_enqueue_scripts' );

js현재 테마 디렉토리 의 디렉토리에서 스크립트를로드한다고 가정합니다 . 그렇지 않은 경우 URI 매개 변수를 변경하십시오. 세 번째 매개 변수 array( 'jquery' )는에 bbg-scripts따라 다르 jquery므로 나중에로드해야합니다. 자세한 내용은 https://codex.wordpress.org/Function_Reference/wp_enqueue_script 를 참조하십시오.


1
if (function_exists('load_my_scripts')) {  
function load_my_scripts() {  
    if (!is_admin()) {  
    wp_deregister_script( 'jquery' );  
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), null, false); 
    wp_enqueue_script('jquery');   
    }  
}  
}  
add_action('init', 'load_my_scripts');

이것은 아무것도하지 않을 것입니다 ... 당신이 의미 의심

if (!function_exists('load_my_scripts')) {

귀하의 예제는 이미 존재하는 경우 load_my_scripts 함수를로드합니다 (그렇지 않으면 오류가 발생합니다)


0

성능상의 이유로 CDN에서 jquery 및 기타 핵심 js 파일을로드하려는 경우 코어 및 플러그인 기능으로 불쾌한 일이 발생하지 않도록 동일한 버전을로드해야합니다. 이처럼 :

$wp_jquery_version = $GLOBALS['wp_scripts']->registered['jquery-core']->ver;
$jquery_version = ( $wp_jquery_version == '' ) ? '1.8.3' : $wp_jquery_version; // fallback, just in case 
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/'. $jquery_version .'/jquery.min.js', $jquery_version, false );
wp_enqueue_script('jquery');

-2

jquery (이 게시물뿐만 아니라)를로드하기위한 모든 다른 방법을 확인한 후에는 이들 중 어느 것도 이러한 작업을 수행하지 않는다는 것을 깨달았습니다.

  1. function을 사용하여 jquery를 등록하고 아마도 큐에 넣을 수 있으므로 플러그인에서 사용할 수 있습니다.
  2. 프로토콜 상대 URL을 사용하여 Google CDN에서로드하십시오.
  3. Google이 오프라인 인 경우 로컬 사본으로 폴백합니다.

목록에 이들 중 일부를 수행하는 대체 버전이 많이 있지만 전부는 아니므로 이미 사용 가능한 방법 중 일부를 빗질하고 수정하는 버전을 작성했습니다. 여기있어:

function nautilus7_enqueue_scripts() {

    // Load jquery from Google CDN (protocol relative) with local fallback when not available
    if ( false === ( $url = get_transient('jquery_url') ) ) {

        // Check if Google CDN is working
        $url = ( is_ssl() ? 'https:' : 'http:' ) . '//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js';
        $resp = wp_remote_head($url);

        // Load local jquery if Google down
        if ( is_wp_error($resp) || 200 != $resp['response']['code'] ) {

            $url = get_template_directory_uri() . '/js/vendor/jquery-1.7.2.min.js';
        }

        // Cache the result for 5 minutes to save bandwidth
        set_transient('jquery_url', $url, 60*5);
    }

    // Deregister Wordpress' jquery and register theme's copy in the footer
    wp_deregister_script('jquery');
    wp_register_script('jquery', $url, array(), null, true);

    // Load other theme scripts here

}
add_action('wp_enqueue_scripts', 'nautilus7_enqueue_scripts');

페이지를 다시로드 할 때마다 대역폭을 절약하고 Google을 ping하지 않기 위해 Wordpress Transient API를 사용하여 Google CDN이 온라인 상태인지 5 분 동안 기억합니다.


권장하지 않습니다. 이제 WordPress가 사용하는 정확한 jQuery 버전과 일치하도록 각 WordPress 업데이트 후에 스크립트를 업데이트해야합니다. 또한 일부 경우 Google은 압축 된 라이브러리를 보내지 않으므로 페이지 로딩 속도가 느려집니다.
fuxia

워드 프레스 'jquery를 사용하지 않습니다. 코드를 읽으십시오. 테마 버전을 사용하고 있습니다. Google이 마음에 들지 않으면 다른 CDN을 사용할 수 있습니다.
nautilus7

그러나 요점은 다음과 같습니다. WordPress jQuery를 사용하여 버전이 올바른지 확인해야합니다.
fuxia

나는 당신을 따르지 않습니다. Google에서 필요한 모든 버전을 가져 와서 동일한 버전을 테마와 번들로 제공합니다. 그것이 모두가하는 일입니다. Wordpress는 함께 제공되는 모든 버전을 (관리자 섹션에서) 사용할 수 있습니다.
nautilus7

1
원하는 버전의 jQuery를 사용할 수 있지만 테마와 함께 번들로 제공하는 경우 사용자에게이를 강요합니다. 모든 사람이 jQuery 1.8.2를 사용하고있는 몇 년 후부터 사용자는 테마를 최신 상태로 유지하지 않으면 구식 버전을 사용하게됩니다.
Chris_O
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.