WordPress에서 JavaScript를로드하는 방법을 알고 싶습니까?

모든 워드 프레스 테마 일반적으로 PHP, HTML, CSS 및 JavaScript 파일로 구성됩니다. JavaScript는 개발자들 사이에서 인기 있는 프로그래밍 언어입니다. 워드 프레스 테마. HTML 페이지를 대화형으로 만들고 서버와 상호 작용할 수도 있는 언어입니다.

웹 사이트에서 사용하는 방법을 아는 것은 큰 이점이 될 것입니다.

실제로 JavaScript를 사용하려면 웹 사이트에 JavaScript를로드하는 방법을 알아야합니다.

그러나 이전에 WordPress discover를 설치 한 적이 없다면 워드 프레스 블로그 7 단계를 설치하는 방법 et 어떻게 찾아 설치하고 블로그에 워드 프레스 테마를 활성화하려면 

그런 다음 왜 우리가 여기 있는지 다시 돌아옵니다.

자바 스크립트 워드 프레스를로드하는 방법

한 걸음 물러서서 WordPress가 스크립트와 스타일을로드하는 방법을 먼저 살펴 보겠습니다. JavaScript 파일을 만들 때 머리글 섹션이나 바닥 글의 페이지에 추가 할 수 있다는 것을 배웠습니다.

에 대한 튜토리얼도 살펴보십시오 CSS, HTML 및 Javascript 파일을 압축하는 방법

WordPress는 완전히 동일한 기능을 수행하지만 이러한 스크립트 태그를 헤더 파일이나 바닥글에 그냥 놓을 수는 없습니다. 워드 프레스 테마. WordPress는 ''라는 스마트 로딩 메커니즘을 사용합니다. 대기열에 포함 ".

이 메커니즘은 종속성에 의미를 부여하는 데 필요합니다. WordPress 테마에 대한 jQuery 코드를 작성하는 경우 jQuery 자체를 먼저로드해야합니다.

jQuery 플러그인에 의존하는 코드를 작성합니다. 이 경우 jQuery를 먼저로드 한 다음 jQuery 플러그인, 코드를로드해야합니다.

스크립트 "큐에 대기"방법 (대기열에 추가)

WordPress 테마 폴더 또는 워드 프레스 플러그인. 다음은 jQuery에 의존하는 스크립트를 포함하는 전체 코드입니다.

함수의 my_theme_scripts () {

 wp_enqueue_script ( 'my-script ", get_template_directory_uri ().'/js/my-script.js ', 배열 ('jquery '),'1.0.0 ', true);

}

add_action ( 'wp_enqueue_scripts', 'my_theme_scripts');

우선 함수는 " 중독 워드 프레스 (후크 워드 프레스를 사용하여). 함수의 첫 번째 인수 ADD_ACTION () 이러한 스크립트를 어디에 배치해야하는지 WordPress에 알려줍니다.

  • 공공 장소에서
  • 대시 보드에

"를 사용하면 wp_enqueue_scripts "를 사용하면 공개 공간에로드됩니다. admin_enqueue_scripts 대시 보드에로드됩니다.

기능에서« ADD_ACTION "를 사용할 수 있습니다 wp_enqueue_script 필요한 스크립트를 추가하십시오. 이 함수는 필수 매개 변수와 네 가지 선택적 매개 변수를 사용합니다.

  • 첫 번째 매개 변수는 스크립트 이름입니다. 원하는 것을 선택할 수 있지만 고유 한 이름을 사용해야합니다.
  • 두 번째 매개변수에는 WordPress 테마 또는 워드 프레스 플러그인.
  • 세 번째 매개 변수에는 종속성 배열이 포함됩니다. 위의 예에서 jQuery는 종속성이라고 말했습니다. 모든 종속성은 문제의 스크립트 전에로드됩니다.
  • 네 번째 매개 변수는 버전 번호입니다
  • 다섯 번째 및 마지막 매개 변수는 스크립트를 머리글 또는 바닥 글에로드할지 여부를 나타냅니다. 바닥 글에로드하려면 "true"를 사용하고 헤더에 스크립트를로드하려면 "false"를 사용하십시오 (이 매개 변수를 채울 수도 없습니다).

의존성

WordPress는 jQuery 사본을 제공하므로 번거 로움없이 종속성으로 추가 할 수 있습니다. WordPress에서 제공하는 다른 jQuery 스크립트 및 플러그인이 많이 있습니다. 코드가 이들 중 하나에 의존하는 경우 복사본 중 하나를 사용할 필요가 없으며 종속성으로 추가하기 만하면됩니다. 여기 있습니다 이벤트를 워드 프레스 스크립트의 목록.

여러 독립 스크립트를 포함하는 경우 정확히 동일한 방식으로 종속성으로 추가 할 수 있습니다. 아래 예를 살펴보십시오.

함수의 my_theme_scripts () {

 wp_enqueue_script ( "my-base 스크립트", get_template_directory_uri (). '/js/my-base-script.js', 배열 ( 'jquery'), '1.0.0', true);

 wp_enqueue_script ( "my-script-extension", get_template_directory_uri (). '/js/my-script-extension.js', 배열 ( "my-script-base '),'1.0.0 ', true);

}

add_action ( 'wp_enqueue_scripts', 'my_theme_scripts');

첫 번째 스크립트는 jQuery에 의존하므로 다음 스크립트도 이에 의존합니다. 따라서 jQuery를 둘 다의 종속성으로 추가 할 필요가 없습니다. 따라서 종속성 관리가 쉬워집니다.

조건로드

모든 페이지에서 스크립트를 사용하고 싶을 때도 있지만 특정 페이지에서 스크립트를로드하고 싶을 때도 있습니다. 대시 보드에 스크립트 추가를 고려할 때 특히 그렇습니다. 좋은 예는 단축 코드 사용. 단축 코드를 사용하면 몇 가지 간단한 트릭을 사용하여 시각적 텍스트 편집기에서 고급 디스플레이를 만들 수 있습니다.

함수의 my_theme_scripts () {

 wp_register_script ( 'my-script', get_template_directory_uri (). '/js/my-script.js', 배열 ( 'jquery'), '1.0.0', true);

 wp_enqueue_script ( '내 스크립트');

}

add_action ( 'wp_enqueue_scripts', 'my_theme_scripts');

우리는 워드 프레스가 스크립트에 대해 배울 수 있도록 스크립트를 저장했지만 " 대기열에 넣다 ". 이런 식으로,이 페이지에서 단축 코드가 사용되는 경우에만 스크립트가 페이지에 추가됩니다.

조건이있는 스크립트를로드하는 또 다른 방법은 조건 함수를 사용하는 것입니다. 카테고리의 모든 아카이브 페이지에 스크립트를로드하려면 다음 기능을 사용할 수 있습니다. is_category ().

예를 들어 다음과 같이 사용자가 기사에 추가 할 수있는 이미지 회전식 메뉴를 만들 수 있습니다. [carousel ids = '42,124,123,331,90, XNUMX ′]. ID로 지정된 이미지를 사용하여 기사 페이지에 캐 러셀이 생성됩니다.

이렇게하려면 " carousel.js jQuery를 기반으로합니다. 여기에 도달하는 코드가 있습니다 (회전 목마를 만들지는 않지만 로딩 프로세스가 어떻게 진행되는지 확인할 수 있습니다).

add_action ( 'wp_enqueue_scripts', 'my_theme_scripts');

함수의 my_theme_scripts () {

 wp_register_script ( 'my-carousel', get_template_directory_uri (). '/js/my-carousel.js', 배열 ( 'jquery'), '1.0.0', true);

}

add_shortcode ( 'carousel', 'my_carousel');

my_carousel 함수 ($ args) {

 $ atts = shortcode_atts (배열 (

 'ID'=> ",

 ), $ Atts, '캐 러셀');

 wp_enqueue_script ( '내 캐 러셀');

 // 회전 목마를 표시하는 코드

}

스크립트를 제거 및 교체

이것은 일반적인 시나리오이지만 때로는 스크립트를 제거하거나 교체해야 할 수도 있습니다. 플러그인으로 스크립트를 추가 한 상황에 빠졌습니다 (테마로 사용되지는 않습니다)가 호환성 문제를 일으켰습니다. 오류가 완전히 사라졌기 때문에 "철수"가 최선의 선택이었습니다.

새 버전과 호환되는지 확인하기 위해 무언가를 테스트하는 경우 jQuery를 새 버전으로 바꿀 수도 있습니다.

이러한 상황에서 기능 wp_deregister_script () "그리고" wp_dequeue_script () 유용합니다. WordPress에 이미 추가 된 코드를 편집하는 방법은 다음과 같습니다.

함수의 my_theme_scripts () {

 wp_deregister_script ( 'jquery');

 wp_enqueue_script ( 'jquery', get_template_directory_uri (). '/js/jquery3.0.0.js', 배열 (), '3.0.0', true);

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

}

add_action ( 'wp_enqueue_scripts', 'my_theme_scripts');

마지막 생각

WordPress에 업로드하는이 방법은 모듈 방식으로 스크립트를 추가 할 수 있기 때문에 훌륭합니다. 이를 통해 종속성이 모듈 식으로 추가되었는지 확인할 수 있습니다.

프리미엄 워드 프레스 플러그인도 만나보세요  

당신은 다른 것을 사용할 수 있습니다 워드 프레스 플러그인 현대적인 외관을 제공하고 블로그 또는 웹사이트의 처리를 최적화합니다.

우리는 여기에 당신을 도울 수있는 프리미엄 WordPress 플러그인을 제공합니다.

1. 프리미엄 SEO 팩

프리미엄 SEO 팩은 워드 프레스 플러그인 SEO를 최적화하고 CSS를 압축하여 웹 사이트의 로딩 속도를 향상시킵니다.

플러그인을 사용하면 몇 번의 클릭만으로 웹 사이트 디자인을 관리 할 수도 있습니다. 기능으로는 CSS 및 JS 압축, 비디오 및 스 니펫 사이트 맵 통합, HTML 및 XML 파일 형식 지정, 404 및 301 페이지 리디렉션, 소셜 네트워크에서 공유, 제공 'ALT 레이블, 고도로 사용자 정의 가능한 레이아웃

다운로드 | 데모 | 웹 호스팅

2. 배송을위한 Woocommerce Delivery Time Picker

WooCommerce 배송 시간 선택 도구는 고객이 결제 페이지에서 배송 날짜와 시간을 선택할 수있는 WooCommerce 확장 프로그램입니다. 

고객은 집에서 패키지의 배송 시간을 선택할 수 있습니다. 배달 시간은 웹 사이트 관리자에게 표시되며 웹 사이트 관리자 또는 온라인 상점 관리자에게 전자 메일로 전송됩니다.

다운로드 | 데모 | 웹 호스팅

3. 메뉴 영웅

이 플러그인을 사용하면 몇 가지 매우 쉬운 단계로 사용자 정의 WordPress 메뉴를 만들 수 있습니다. 특히 우아하고 전문적인 WordPress 메뉴를 쉽고 직관적으로 만들 수 있습니다. 

기능이 가득한 가장 복잡한 메가 메뉴부터 드롭 다운 메뉴가있는 가장 간단한 메뉴 인 워드 프레스 플러그인까지 HeroMenu 모든 유형의 메뉴를 설정하고 몇 분만에 실행합니다.

PC, 태블릿 및 스마트 폰에서 완벽하게 작동하는 기능 : 맞춤 CSS 메뉴, 메가 메뉴 빌더, Chrome, Firefox, Safari, Opera, IE9 등 지원되는 브라우저에 자신의 스타일을 추가하십시오.

다운로드 | 데모 | 웹 호스팅

추천 자료

기타 일반적인 WordPress 오류를 해결하는 데 도움이되는 기타 권장 리소스를 확인하세요. 

결론

여기 있습니다! 이것으로이 튜토리얼을 마쳤습니다. WordPress에서 JavaScript를로드하는 방법을 이해하는 데 도움이 되었기를 바랍니다. 당신의 친구와 공유하는 것을 망설이지 마십시오 소셜 네트워크 선호했다. 

그러나 귀하는 우리와 상담 할 수 있습니다. 능숙, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작.

그러나 그 동안 귀하의 commentaires 전용 섹션의 제안.

...