WordPress에 jQuery 스크립트를 쉽게 추가하는 방법

게시 됨: 2021-09-21

워드프레스는 10년 넘게 우리 주변에 있었습니다. 플랫폼이 액세스 용이성으로 널리 유명하지만 WordPress 테마 및 플러그인에 jQuery를 추가하는 것은 많은 개발자의 관심사입니다.

우리는 이전에 WordPress 화이트 스크린의 죽음과 같은 문제를 수정하고 WordPress 사이트를 유지 관리 모드로 전환하는 방법에 대한 가이드를 작성했습니다. 그리고 이 글에서는 워드프레스에 jQuery를 추가하는 방법을 설명할 것이지만, 이에 대해 알아보기 전에 jQuery의 호환성 모드에 대한 간략한 개요를 살펴보겠습니다.

jQuery의 호환성 모드

WordPress에서 jQuery를 사용하기 전에 jQuery의 호환성 모드가 무엇인지 이해하는 것도 마찬가지로 중요합니다.

WordPress의 jQuery는 미리 로드되어 있으며 코드에서 사용할 수 있습니다. 그러나 여기서 요점은 jQuery의 호환성 모드도 함께 제공되어 다른 프로그래밍 언어의 다른 라이브러리와의 충돌을 방지한다는 것입니다.

이것이 지극히 정상적인 것처럼 들릴 수 있지만 이 방어 메커니즘에는 약간의 문제가 있습니다. 워드프레스에서 jQuery를 사용할 때 우리의 좋은 $ 기호 대신 " jQuery "라는 용어를 사용해야 합니다.

이 예를 살펴보십시오.

/* 일반 jQuery */

$('.hideable').on('클릭', function() {

$(이).hide();

})

/* 호환 모드 */

jQuery('.hideable').on('클릭', function() {

jQuery(이).hide();

})

이제 여기의 문제는 그다지 크지 않지만 그다지 유쾌하지 않습니다. 첫째, 매번 " jQuery "를 작성해야 하기 때문에 시간이 많이 걸리고, 둘째, 스크립트가 복잡해 보이고 읽기 어려워집니다.

그러나 걱정하지 마십시오. 몇 가지 수정만 하면 호환성 문제를 해결할 수 있고 좋은 이전 $ 기호를 사용할 수 있습니다.

참고로 $는 jQuery() 의 별칭이고 함수의 핸들입니다.

기본적인 구조는 이렇습니다.

$(선택기).액션()

여기서 $ 기호는 jQuery를 참조하고 $(selector) 는 HTML 요소를 찾고 action() 은 이러한 요소에 대해 수행할 작업을 정의합니다.

다음은 jQuery의 호환성 문제를 해결하기 위해 활용할 수 있는 몇 가지 기술입니다.

jQuery의 호환성 문제를 극복하는 방법?

  1. "jQuery 스텔스" 모드로 들어가기
  2. "충돌 없음" 모드로 전환

jQuery의 스텔스 모드로 들어가기

PBS 로고

이미지 출처: Podfeet

호환성 문제를 해결하는 첫 번째이자 가장 일반적인 방법은 스텔스 모드로 들어가는 것입니다(코드를 은밀하게 사용).

바닥글에 스크립트를 로드하려고 한다고 가정해 보겠습니다. 코드를 익명 함수로 래핑하면 궁극적으로 jQuery를 $로 매핑합니다.

이 예를 참조하십시오

(함수($) {

$('.hideable').on('클릭', function() {

$(이).hide();

})

})(제이쿼리);

이제 헤더에 스크립트를 추가하려면 문서 준비 기능으로 모든 것을 래핑하고 $를 전달하십시오.

여기 예가 있습니다.

jQuery(문서).ready(함수( $ ) {

$('.hideable').on('클릭', function() {

$(이).hide();

})

});

충돌 없음 모드로 전환

이제 이것은 호환성 문제를 해결하는 아주 간단한 방법입니다. 스크립트 위에 이 코드 줄을 선언하기만 하면 기본 $ 기호 대신 $j를 사용할 수 있습니다.

var $j = jQuery.noConflict();

이제 WordPress에서 jQuery를 사용하는 방법을 알았으므로 주요 주제인 WordPress 사이트에 jQuery 스크립트를 추가하는 방법으로 이동하겠습니다.

WordPress 사이트에 jQuery를 추가하는 방법

wordpress-vs-jquery

이미지 출처: fl1digital.com

워드프레스에 jQuery를 추가하는 것은 Enqueueing 이라는 프로세스로 쉽게 할 수 있습니다.

<link> 요소를 사용하여 일반 HTML 웹사이트에 스크립트를 추가합니다. WordPress에서도 동일한 작업을 수행할 수 있습니다. 그러나 우리는 WordPress의 특수 기능 중 일부를 실행해야 합니다. 이렇게 하면 모든 종속성이 자동으로 처리됩니다.

WordPress 테마를 작업 중이라고 가정해 보겠습니다. functions.php 파일에서 이 함수를 사용하십시오.

wp_enqueue_script()

다음은 어떻게 생겼는지입니다.

함수 my_theme_scripts() {

wp_enqueue_script( 'my-great-script', get_template_directory_uri() . '/js/my-great-script.js', array( 'jquery' ), '1.0.0', true );

}

add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

다음은 이 함수가 취하는 5가지 인수입니다.

  1. $handle: 스크립트를 참조하는 데 사용할 수 있는 고유 핸들
  2. $src: 스크립트 파일의 위치
  3. $deps: 종속성 배열을 지정하는 데 사용
  4. $ver: 스크립트의 버전 번호
  5. $in_footer: 스크립트를 배치할 위치에 대해 WordPress에 지시

기본적으로 스크립트는 웹사이트의 헤더에 로드되며, 이는 사이트 속도에 큰 영향을 미치므로 권장하지 않습니다.

관련: WordPress 편집 방법에 대한 궁극적인 가이드 – HTML, CSS, PHP, JavaScript

WordPress 관리자에 jQuery 스크립트를 추가하는 방법

동일한 기능을 사용하여 jQuery를 WordPress 관리자에 추가할 수 있습니다. 여기서 해야 할 일은 다른 후크를 사용하는 것입니다.

다음은 예입니다.

함수 my_admin_scripts() {

wp_enqueue_script( 'my-great-script', plugin_dir_url( __FILE__ ) . '/js/my-great-script.js', array( 'jquery' ), '1.0.0', true );

}

add_action( 'admin_enqueue_scripts', 'my_admin_scripts' );

이제 wp_enqueue_scripts 를 admin_enqueue_scripts 로 바꾸면 됩니다.

WordPress에서 jQuery를 등록 취소하는 방법

사전 로드와 다른 버전의 jQuery를 사용하려면 WordPress의 jQuery를 등록 취소해야 합니다.

다음은 WordPress에서 jQuery를 등록 취소하는 방법의 예입니다.

// 사용자 정의 jQuery 포함

함수 shapeSpace_include_custom_jquery() {

wp_deregister_script('제이쿼리');

wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js', array(), null, true);

}

add_action('wp_enqueue_scripts', 'shapeSpace_include_custom_jquery');

간단 해. wp_deregister_script() 를 사용하여 WordPress의 jQuery를 등록 취소하고 원하는 스크립트를 포함하기만 하면 됩니다.

여기서 기억해야 할 한 가지는 이 예제에서 Google에서 호스팅하는 jQuery 라이브러리를 추가했다는 것입니다. 자신의 스크립트 URL로 전환해야 합니다.

대기열에 넣기 전에 스크립트를 등록해야 합니까?

스크립트가 페이지에서 필요할 때만 로드되도록 하려면 프로세스 초기에 스크립트를 등록할 수 있습니다.

다음은 예입니다.

add_action( 'wp_loaded', 'register_all_scripts' );

함수 register_all_scripts()

{

wp_register_script(…);

}

이 작업이 끝나면 필요할 때 스크립트를 대기열에 넣습니다. 방법은 다음과 같습니다.

add_action( 'wp_enqueue_scripts', 'enqueue_front_scripts' );

add_action( 'admin_enqueue_scripts', 'enqueue_back_scripts' );

조건부 태그 사용

조건부 태그를 사용하여 필요할 때만 WordPress에서 jQuery를 로드할 수도 있습니다.

이 방법은 일반적으로 특정 페이지에서만 사용하려는 Admin에서 사용되지만 많은 대역폭과 처리 시간을 절약하여 궁극적으로 사이트의 로딩 속도를 향상시킵니다.

추가 태그 사용에 대한 자세한 내용은 WordPress의 관리자 대기열에 추가 스크립트 문서를 참조하세요.

플러그인을 사용하여 WordPress에 jQuery를 추가하는 방법

워드프레스 플러그인

WordPress는 45000개 이상의 플러그인이 있는 플러그인 디렉토리를 자랑합니다. WordPress 사이트에서 원하는 기능에 대한 플러그인을 찾을 수 있습니다.

WordPress 사이트 페이지, 테마, 게시물 등에 jQuery를 추가하는 경우도 마찬가지입니다.

다음은 WordPress에 jQuery를 추가하는 데 가장 많이 사용되는 플러그인입니다.

  • 고급 사용자 정의 필드
  • 간단한 사용자 정의 CSS 및 JS
  • 스크립트 N 스타일
  • 자산 정리

결론

그래서 당신은 간다. 이제 WordPress jQuery를 추가하고 사용하는 방법을 알게 되었습니다.

이 지식을 프로젝트에 적용하면 훌륭한 프로젝트를 만드는 데 도움이 됩니다. JPG 대 JPEG 및 WordPress White Label과 같은 주제에 대한 최종 가이드를 읽고 지식을 높일 수도 있습니다.