WordPress와 외부 jQuery / 자바 스크립트 파일을 연결하는 방법

그래서 Starkers를 사용하여 다음 WP 테마를 기반으로하고 작은 문제가 발생했습니다. header.php파일 에 자체 jQuery 버전을 포함 했지만 Firebug를 사용하여 사이트를 검사 할 때 jquery가 두 번 다운로드되는 것을 알았습니다. 약간의 파기를하고 파일을 포함했을뿐만 아니라 wp_head()기능도 있음을 알았습니다 .

문제를 해결하려고 할 때 헤더 파일에서 주석이 발견되었습니다.이 주석은 Twenty Ten 테마에서 유래했습니다.

/* Always have wp_head() just before the closing </head>
 * tag of your theme, or you will break many plugins, which
 * generally use this hook to add elements to <head>, such 
 * as styles, scripts, and meta tags
 */

그래서 여기 내 문제가 있습니다 .jQuery 파일을 사용하려는 다른 파일보다 먼저 설정 wp_head()해야하고 <head>요소 의 마지막 항목이어야한다는 인상을 받고 있습니다. 지금 궁금해 할 때 약간 혼란 스럽습니다. 나는 넣어 wp_head()WP와 jQuery를 파일이 그렇게하지 말한다하더라도, 내 모든 플러그인에 사용되는 포함 있도록 상단에.

wp_head()함수 에서 jQuery 줄을 주석 처리 했지만 관리자 페이지에 필요하므로 다시 넣어야했습니다.

또한 jQuery의 Google CDN 버전을 사용하여 (적어도 실험적) 사용하고 싶지만 두 번 포함하고 싶지는 않습니다!

내가 설명하려고하는 것을 이해하기를 바랍니다.이 문제를 해결할 수있는 방법에 대한 제안은 가장 감사하겠습니다. 헤더 파일로 JavaScript 파일을 처리하는 방법에 대한 조언도 감사합니다.

감사!

— 벤 에버 라드
소스

"외부 jQuery / Javascript 파일을 WordPress와 연결하는 방법"과 같은 제목을 사용해야합니다.

— MikeSchinkel

난 내가 :-) 한 문제에 너무 익숙하지 않았다 나는 그것을 호출 할 것을 확신 할 수 없었다 동의

— 벤 에버 라드

답변:

질문의 문구 <script>에서 템플릿에 태그를 작성하여 스크립트를 추가해야합니다 . jQuery에 대한 의존성을 적절하게 설정 wp_enqueue_script()하여 템플릿을 통해 자신의 스크립트를 추가하고 스크립트를 추가하십시오.functions.phpwp_head()

function my_scripts() {
    wp_enqueue_script( 'my-sweet-script', get_bloginfo('template_directory') . '/script.js', array('jquery') );
}
add_action('template_redirect', 'my_scripts');

자세한 내용은 코덱스 페이지 를 참조하십시오.

— 아니카 백 스트롬
소스

<script>태그를 사용하여 스크립트를 추가한다고 생각하는 것이 맞습니다 . 이것은 내가 찾던 대안입니다. 많은 감사합니다! :-)

— 벤 에버 라드

프론트 엔드에만 스크립트를 추가하려면 'template_redirect'대신에 연결하십시오 'init'.

— John P Bloch

좋은 것들, 나는 대답을 업데이트 할 것이다. 나는에 큐를 감싸는 것을 거의 제안했다 is_admin().

— Annika Backstrom

나는 일반적으로 위의 템플릿 파일에 스크립트를 대기열 get_header()에 그 일을 functions.php필요하지 않을 수 있습니다 모든 페이지를 큐에 넣습니다. 내가 세계적인 것을 가지고 있다면, 나는 그것을 호출 header.php하기 전에 그것을 대기열에 넣습니다 wp_head(). 그런 식으로 대기열에 들어갈 수있는 곳은<head>

— Joe Hoyle

때로는 페이지 하단에 스크립트를 추가하는 것이 좋습니다. codex.wordpress.org/Function_Reference/wp_enqueue_script(5 번째, $ in_footer) 의 마지막 매개 변수이며 true로 설정하십시오. 더 많은 제어가 필요한 사람들을위한 정보가 거의 없습니다.

— hakre

WordPress와 함께 jQuery를 사용하기위한 5 가지 팁을 살펴 보는 것이 좋습니다 . 무엇보다도 Google 라이브러리에서 jQuery를로드하는 데 필요한 코드를 보여줍니다.

function my_init() {
    if (!is_admin()) {
        // comment out the next two lines to load the local copy of jQuery
        wp_deregister_script('jquery');
        wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2');
        wp_enqueue_script('jquery');
    }
}
add_action('init', 'my_init');

Google 라이브러리 사용 플러그인을 확인할 수도 있습니다 .

— 트래비스 노스 컷
소스

jQuery의 Google CDN 버전을 대기열에 넣는 방법을 보여 주므로 실제로 더 나은 대답입니다. John이 다른 곳에서 제안한 것처럼 프런트 엔드에서만이 작업을 수행하려면 template_redirect대신에 연결하십시오 init.

— EAMann

로드 위치에 대한 좋은 지적. 실제로 관리 영역은 jQuery도 사용합니다. 어느 쪽이든, 그것을 제어하는 방법을 보여 주셔서 감사합니다.

— 트래비스 노스 컷

네 방금 jquery / wp post에 대한 5 가지 팁을 찾았습니다. 답변 주셔서 감사합니다 :-)

— Ben Everard

WordPress에서 jQuery를 사용하기위한 5 가지 팁-링크가 더 이상 작동하지 않습니다.

— hakre

참고 : 예에는 "이전"버전의 jQuery가 포함되어 있으며 현재 WP 버전 (3.0.1)에서 jQuery 1.4.2를 실행 중입니다.

— t31os

@tnorthcutt가 자신을로드하려는 경우 WP의 기본 jquery를 올바르게 대기열에 넣는 것이 맞지만 WP 코어와 다른 jquery 버전을로드 할 때 문제가 발생합니다. 코어와 플러그인은 모두 거기에 의존합니다. WP가 업데이트 될 때마다 최신 jquery로 테마를 업데이트하지 않으면 사이트가 중단 될 수 있습니다.

다음 코드는 먼저 WP가 사용중인 버전을 찾은 다음 Google에서 해당 버전을로드하여 테마가 항상 올바른 버전의 jquery를로드하도록합니다.

$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');

— cjbj
소스