WordPress에 jQuery 코드를 추가하는 방법을 마스터하고 싶습니까? 더 많은 것을 배우기 위해 계속 읽으십시오.

워드 프레스가 한동안 사용 가능했고 테마 스크립트와 플러그인의 추가가 한동안 임박 했음에도 불구하고, 어떤 방법을 사용해야하는지에 대한 혼란이 여전히 남아 있습니다. WordPress에 스크립트를 추가하는 데 사용합니다.

그래서 우리는 사물을 명확히하려고 노력할 것입니다.

jQuery는 가장 널리 사용되는 JavaScript 프레임워크이므로 테마 또는 워드 프레스 플러그인.

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

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

JQuery 호환 모드

WordPress에 스크립트를 추가하기 전에 jQuery의 호환 모드를 살펴 보겠습니다. WordPress에는 코드와 함께 사용할 수있는 jQuery 사본이 제공됩니다. WordPress jQuery가로드되면 호환성 모드를 사용하는데, 이는 다른 라이브러리와의 충돌을 피하는 메커니즘입니다.

그가 있는지 알아보십시오 테마 및 플러그인에서 jQuery를 제거해야합니다 워드프레스(WordPress) ?

이것은 다른 프로젝트에서와 같이 달러 기호를 직접 사용할 수 없음을 의미합니다. WordPress에서 jQuery를 작성할 때 jQuery를 대신 사용해야합니다.

무슨 의미인지 아래 코드를 살펴보십시오.

/ * 일반 모드 * / $ ( '. Hideable'). On ( 'click', function () {$ (this) .hide ();}) / * Compatibility mode * / jQuery ( '. Hideable'). On ( 'click', function () {jQuery (this) .hide ();})

알아야 할 것은 약간의 수정으로 달러 기호를 다시 사용할 수 있다는 것입니다. 모든 코드에서 "jQuery"를 사용할 때마다 많은 쓰기가 복잡해집니다.

체크 아웃 개발자 워드 프레스에 대한 10 코드 편집기

요약하면, jQuery를 알고 있다면 $ 기호는 jQuery ()의 별칭이고 함수의 별칭입니다. 기본 구문은 다음과 같습니다. $ (선택기) .action () :

• jQuery를 정의하기위한 달러 기호
• HTML 요소를 "찾기"하는 (선택기)
• 이러한 요소에 대해 수행 할 jQuery () 작업

바닥 글에 스크립트를로드하면 익명 함수로 코드를 래핑 할 수 있습니다. 방법은 다음과 같습니다.

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

헤더에 스크립트를 추가하려면 (가능하다면 피해야 할 것문서가 준비 될 때 실행되는 함수로 랩핑 할 수 있습니다.

그건 그렇고 또한 발견 방법 facilement 웹 사이트를 중단하지 않고 워드 프레스의 코드

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

스크립트를 jQuery에 연결하는 방법

WordPress에 유효한 jQuery 코드를 작성할 수있게되었으므로 작업 내용을 웹 사이트에 연결합니다. 워드 프레스에서 프로세스는 ' 대기열에 포함 "(테일 시스템). 일반 HTML 웹 사이트의 경우스크립트>를 클릭하여 스크립트를 추가하십시오.

워드 프레스는 동일한 작업을 수행 할 수 있지만이를 위해 워드 프레스의 특수 기능을 사용합니다. 이런 식으로 WordPress는 우리의 모든 의존성을 관리합니다.

테마로 작업하는 경우 기능을 사용할 수 있습니다 wp_enqueue_script () 파일 내 functions.php 파일. 방법은 다음과 같습니다.

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

이 함수는 XNUMX개의 인수를 취합니다. 첫 번째는 스크립트를 참조하는 데 사용할 수 있고, 두 번째는 스크립트 파일의 위치이며, 세 번째 매개변수는 종속성 배열입니다.

스크립트에서 사용하기 때문에 jQuery를 종속성으로 추가했습니다. "에 종속 된 스크립트를 만드는 경우내 중대 스크립트 WordPress가 먼저로드해야하는 파일을 인식하도록 종속성 목록에 추가해야합니다.

너무 발견 워드 프레스에 자바 스크립트를로드하는 방법

네 번째 매개 변수는 버전 번호이고 다섯 번째 매개 변수는 WordPress가 스크립트를 넣을 위치를 알 수 있도록합니다. 기본적으로 스크립트는 헤더에로드됩니다. 이는 웹 사이트 페이지의로드 속도를 늦추기 때문에 나쁜 습관입니다 (브라우저는 모든 페이지 로딩을 중지합니다. est rencontré). 가능한 경우 다섯 번째 매개 변수를 '바닥 글'로 설정하여 모든 스크립트를 바닥 글에로드해야합니다. 참된 ".

대시 보드에 스크립트를 추가하는 방법

에 스크립트를 추가 할 수도 있습니다 계기판. 사용 된 기능은 정확히 동일합니다. " 훅 "다릅니다. 아래 예를 살펴보십시오.

function 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, 그리고 그게 전부입니다 !

조건부 태그 사용

필요한 경우에만 스크립트를로드하도록 조건부 태그를 사용하십시오. 특정 페이지에서만 스크립트를 사용하려는 대시 보드에서 가장 자주 사용됩니다. 이렇게하면 대역폭과 처리 시간이 절약되어 웹 사이트로드 시간이 빨라집니다.

또한 우리의 발견 블로그의 로딩 속도를 향상시키는 10 WordPress 플러그인

보세요 문서의 admin_enqueue_scripts 자세한 내용은 워드 프레스 코덱스에서 확인하십시오.

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

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

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

1. 인터랙티브 월드 맵

인터랙티브 월드맵은 워드 프레스 플러그인 대화형 및 컬러 마커, 대륙, 국가 또는 지역을 사용하여 원하는 만큼 지도를 만들 수 있습니다.

새로운 버전과 완벽하게 호환됩니다. 워드프레스(WordPress) 과 비주얼 컴포저. 이 플러그인 덕분에 전 세계의지도, 대륙 또는 하위 대륙 (아프리카, 유럽, 아메리카, 아시아, 오세아니아 및 모든 하위 대륙), 국가, 국가를 지역으로 나눈 값, 미국 주, 미국을 대도시 지역으로 나눈 값, 미국 주를 대도시 지역으로 나눈 값입니다.

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

2. 추적 기능이있는 AJAX 문의 양식

Ce 워드 프레스 플러그인 연락처나 댓글 양식을 쉽게 추가할 수 있습니다. 워드 프레스 블로그. WordPress 대시보드를 통해 직접 액세스할 수 있는 설정 관리자가 함께 제공됩니다.

주요 기능은 다음과 같습니다. a f이메일에 대한 지원 양식, 사용자 정의 및 구성에 대한 CAPTCHA 수학 워드 프레스 대시 보드를 통해사용자 정의 자동 응답 정의, 사용자 정의 CSS 지원 등

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

3. 닌자 양식을위한 PayPal 표준 결제 게이트웨이

Ninja Forms 용 PayPal 표준 게이트웨이를 사용하면 PayPal 결제 게이트웨이와 원활하게 통합되는 양식을 만들 수 있습니다. 

개인화 된 주문 양식을 만들고 표준 Paypal 계정을 사용하여 대금을받을 수 있습니다. 주요 기능은 쉽고 빠른 통합, IPN 통합, 개별 양식에서 PayPal 게이트웨이를 활성화 / 비활성화하는 기능, 정기 결제 지원 등입니다.

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

다른 추천 자료

또한 귀하의 웹 사이트 및 블로그에 대한 이해와 통제를 위해 아래 자료를 참조하십시오.

• 워드 프레스에 효과적으로 카테고리와 태그를 사용하는 방법
• 모바일 워드 프레스에 대한 응답 메뉴를 만드는 방법
• 조직에 WordPress 인트라넷을 만드는 방법
• 워드 프레스의 플러그인을 설치하는 방법

결론

여기 ! 이 튜토리얼은 끝났습니다. 이제 WordPress에 스크립트를 추가하는 방법을 알고 있기를 바랍니다. 주저하지 말라. 소셜 네트워크에서 친구들과 팁을 공유하십시오..

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

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

...