제대로 워드 프레스에 jQuery 코드를 추가하는 방법

년부터 블레어 Jersyer | 워드프레스(WordPress)

워드 프레스는 16 년 넘게 우리 삶의 일부 였지만 테마와 플러그인에 스크립트를 추가하는 방법은 많은 개발자에게 미스터리로 남아 있습니다. 이 기사에서 우리는 마침내 혼란을 종식 시켰습니다.

가장 널리 사용되는 JavaScript 라이브러리 중 하나이기 때문에 오늘 우리는 jQuery 스크립트를 테마에 추가하거나 워드 프레스 플러그인.

jQuery 호환성 모드

WordPress에 스크립트를 추가하기 전에 jQuery의 호환성 모드를 이해하는 것이 중요합니다.

아시다시피 WordPress에는 jQuery가 이미 포함되어 있습니다.

WordPress의 jQuery 버전에도 " 호환 모드 », 다른 자바 스크립트 라이브러리와의 충돌을 방지하는 메커니즘입니다.

이 방어 메커니즘의 일부는 네 푸베 파 사용 $다른 프로젝트에서와 같이 직접 서명하십시오.

대신 WordPress 용 jQuery 코드를 작성할 때 다음을 사용해야합니다. jQuery.

해당 코드의 예는 다음과 같습니다.

/ * JQuery régulier * /
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})

/ * Mode de compatibilité * /
jQuery ( '.hideable' ).on( 'click' , function () {
jQuery( this ).hide();
})

문제는 jQuery를 백만 번 작성하는 데 시간이 더 오래 걸리고 읽기가 더 어려워지며 스크립트에 부담을 줄 수 있다는 것입니다.

좋은 소식?

약간만 수정하면 귀여운 작은 달러 기호를 다시 사용할 수 있습니다.

그건 그렇고, 당신이 있다면 jQuery를 처음 사용함 $ 기호는 jQuery ()의 별칭 일 뿐이고 함수의 별칭 일뿐입니다.

기본 구조는 다음과 같습니다. $(selector).action(). 달러 기호는 jQuery를 정의합니다. "(selector)"는 HTML 요소를 쿼리하거나 찾습니다. 마지막으로 "jQuery () action"은 요소에 대해 수행 할 작업입니다.

호환성 문제를 해결하는 방법으로 돌아가서 다음과 같은 실행 가능한 옵션이 있습니다.

1. jQuery 스텔스 모드 들어가기

호환성 모드를 해결하는 첫 번째 방법은 코드를 몰래 들어가는 것입니다.

예를 들어 바닥 글에 스크립트를로드하면 코드를 익명 함수로 감싸서 jQuery를 매핑 할 수 있습니다. $.

아래 예에서와 같이 :

( fonction ( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
}) (jQuery);

헤더에 스크립트를 추가하려면 (가능하면 피해야합니다. 아래 내용에 대해 자세히 설명) 문서 준비 함수로 모든 것을 래핑하고 $길을 따라.

jQuery( document ).ready( function( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
});

2. "충돌 없음"모드로 들어갑니다

jQuery 철자를 피하는 또 다른 쉬운 방법은 모드로 전환하는 것입니다. "충돌 무료" 다른 단축키를 사용하십시오.

이 경우 : $j기본값 대신 $.

스크립트 상단에 선언하면됩니다.var $j = jQuery.noConflict();

자, 이제 WordPress용으로 유효한 jQuery 코드를 작성하는 방법에 대해 더 많이 알게 되었습니다. 사이트 웹.

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

jQuery 스크립트를 WordPress에 추가하는 가장 쉬운 방법 중 하나는 '설정 대기 줄 ".

에 대한 사이트 웹 클래식 HTML, 우리는  <link> 스크립트를 추가 할 항목. 워드 프레스는 결국 똑같은 작업을 수행하지만이를 달성하기 위해 특별한 WP 기능을 사용할 것입니다.

이런 식으로, 그것은 우리를 위해 우리의 모든 의존성을 관리합니다 (WP 감사합니다).

테마로 작업하는 경우 기능을 사용할 수 있습니다  wp_enqueue_script() 당신의  functions.php 파일.

그 모습은 다음과 같습니다.

function my_theme_scripts () {
wp_enqueue_script('mon-grand-script', get_template_directory_uri(). '/js/my-great-script.js', array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');

이 기능은 다섯 가지 주장 :

  1. $ handle-스크립트를 참조하는 데 사용할 수있는 고유 한 핸들입니다.
  2. $src – 스크립트 파일의 위치.
  3. $ deps-종속성 배열을 지정합니다.
  4. $ ver-스크립트의 버전 번호.
  5. $ in_footer-WordPress에 스크립트를 넣을 위치를 알립니다.

* 참고 사항  $in_footer 기본적으로 스크립트가 헤더에로드됨을 의미합니다.

이것은 나쁜 습관이며 사이트 속도가 상당히 느려질 수 있습니다. 따라서 바닥 글에 스크립트를 배치하려면이 매개 변수가 true로 설정되어 있는지 확인하십시오.

WordPress 관리자에게 스크립트 추가

관리자에게 스크립트를 추가 할 수도 있습니다. 사용되는 기능은 정확히 동일하며 다른 후크를 사용하면됩니다.

파 exemple :

기능 my_admin_scripts () {
wp_enqueue_script ( 'my-great-script', plugin_dir_url (__FILE__). '/js/my-great-script.js', 배열 ( 'jquery'), '1.0.0', true);
}
add_action ( 'admin_enqueue_scripts', 'my_admin_scripts');

로그인하는 대신 wp_enqueue_scripts우리는 사용해야합니다 admin_enqueue_scripts.

WordPress에서 jQuery를 구독 취소하는 방법

그러나 WordPress에 미리로드 된 버전과 다른 버전의 jQuery를 사용하려면 어떻게해야합니까?

대기열에 넣을 수 있지만 페이지에 두 가지 버전의 jQuery가 있음을 의미합니다.

이를 방지하려면 WP 버전의 등록을 취소해야합니다.

그 모습은 다음과 같습니다.

// 사용자 정의 jQuery 포함
shapeSpace_include_custom_jquery () 함수 {

wp_deregister_script ('jquery');
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 () 용 등록 해제 WP의 jQuery를 추가 한 다음 추가하려는 jQuery 스크립트를 포함합니다.

위의 예에서 우리는 Google이 호스팅하는 jQuery 라이브러리 ,하지만 분명히 자신의 스크립트 URL로 대체 할 것입니다.

대기열에 추가하기 전에 스크립트를 저장해야하지 않습니까?

스크립트를 페이지에 직접로드하는 대신 필요에 따라로드하려면 스크립트를 더 일찍 저장할 수 있습니다.

예를 들어  wp_loaded:

add_action ('wp_loaded', 'register_all_scripts');
fonction register_all_scripts () {
wp_register_script (…);
}

이 작업을 완료하면 필요할 때 스크립트를 대기열에 넣을 수 있습니다.

add_action ( 'wp_enqueue_scripts', 'enqueue_front_scripts');
add_action ( 'admin_enqueue_scripts', 'enqueue_back_scripts');

다른 스크립트와 충돌하지 않도록 동일한 이름을 사용해야합니다.

조건부 태그 사용

조건부 태그를 사용하여 필요한 경우에만 스크립트를로드하십시오.

이는 전체 관리자가 아닌 특정 페이지에서만 스크립트를 사용하려는 관리자에서 더 자주 사용됩니다. 또한 대역폭과 처리 시간이 절약되므로 로드 시간이 더 빨라집니다. 사이트 웹.

보세요 큐잉 스크립트 문서  자세한 내용은 워드 프레스 코덱스에서 확인하십시오.

플러그인을 사용하여 WordPress에 jQuery 추가

WP 플러그인 디렉토리에는 게시물, 페이지 또는 워드 프레스 테마.

다음은 잘 알려진 JavaScript / jQuery 플러그인의 몇 가지 예입니다. 고급 맞춤 입력란 , 간단한 커스텀 CSS와 JS , 스크립트 스타일 n et 자원 청소.

나만의 jQuery 프로젝트 만들기

jQuery를 더 잘 이해하면 작업에 더 많은 영향을 미칠 수 있습니다. 자신의 웹 사이트 또는 클라이언트 프로젝트를위한 것입니다.

jQuery는 단순함으로 잘 알려져 있으며,이 기사에서 배운 것처럼 간단한 jQuery 스크립트를 WordPress에 추가하는 것은 간단합니다.

예, 바닐라 HTML을 사용하는 것에 비해 약간의 오버 헤드가 있지만 종속성 관리 및 명확성의 추가 이점도 있습니다.

뿐만 아니라 jQuery WP의 기본 호환성을 우회하는 것과 같은 약간의 트릭을 사용하면 많은 시간, 노력 및 부풀린 코드를 절약 할 수 있습니다.

포스터 르 논평

귀하의 이메일 주소는 공개되지 않습니다. 필수 필드는 표시됩니다 *

이 사이트는 원하지 않는 것을 줄이기 위해 Akismet을 사용합니다. 댓글 데이터 사용 방법에 대해 자세히 알아보기.