WordPress 테마 및 플러그인에 JavaScript 코드를 효율적으로로드하십시오 키 포인트 WordPress 플러그인 또는 테마에 JavaScript 코드를 포함시킬 때 생성 된 페이지의 불필요한 팽창을 피하기 위해 신중하게 수행하십시오. 동일한 파일을 여러 번 삽입하지 않으려면 함수를 사용할 수 있습니다. 함수에는 스크립트 이름과 스크립트 URL이라는 두 가지 매개 변수가 필요합니다. 또한 스크립트가 포함 된 방법에 대한 더 나은 제어를 위해 세 가지 추가 매개 변수를 허용 할 수 있습니다. 함수는 스크립트를 포함하는 방법을 나타내는 데 사용되지만 실제로 포함되지는 않습니다. 이 기능은 다른 플러그인이 등록 된 스크립트를 사용할 수 있으므로 종속성을 관리하는 데 매우 유용합니다. 스크립트는 어디에서나 등록해서는 안됩니다. 대신, 개발자는 스크립트가 필요한시기 또는 위치를 생각하고 필요한 경우에만 스크립트를 포함시키기 위해 작업/필터 API 또는 WordPress 기능을 사용해야합니다. wp_enqueue_script() 함수는 동일한 스크립트에 두 번 포함되지 않으며 헤더 또는 바닥 글에 올바르게 포함되도록합니다. 그러나 특정 시간 또는 위치에 스크립트가 필요한 경우 호출은 올바른 기능에 배치되어야합니다. wp_enqueue_script() 현재 WordPress.org에는 33,000 개가 넘는 플러그인과 2,600 개의 테마가 있으며이 플랫폼에없는 테마와 플러그인을 추가 할 수도 있습니다. 그들은 다양한 작업을 수행 할 수 있으며 종종 JavaScript를 사용하여 일부 기능을 제공합니다. 기본적으로 테마 나 플러그인에 JavaScript 코드를 포함시키는 것은 어렵지 않습니다. WordPress는 HTML 파일 만 생성하므로 스크립트 태그를 사용하여 코드를 직접 포함 시키거나 SRC 속성이있는 파일에 링크하는 것은 충분합니다. 당신이 그것을 혼자서 개발한다면, 세상에서 고립 된. wp_register_script() 그러나 그것은 사실이 아닙니다. WordPress를 사용하는 사용자는 플러그인이나 테마와 공존하는 플러그인 또는 테마를 설치할 수 있으며 이러한 도구의 개발자는 JavaScript를 사용할 수도 있습니다. 또한 WordPress 자체는 JavaScript를 사용하고 있습니다. 문제는 모든 사람이 마음대로 스크립트를 포함하면 생성 된 페이지가 불필요한 부풀어 오른다는 것입니다. 질문 예제는 명확 해지고, 내가 익숙한 예를 사용하겠습니다 : 내 자신. 나는 사용자가 포스트에 파노라마 이미지를 추가 할 수있는 WP Photo Sphere 플러그인을 개발했습니다. 이를 위해서는 다른 JavaScript 파일이 필요합니다. 파노라마를 표시하기위한 라이브러리 및 파노라마를 표시하기위한 특정 태그를 검색하기위한 파일. 또한이 마지막 스크립트에서 jQuery를 사용하므로 포함해야합니다. wp_enqueue_script() 사용자가 신경 쓰지 않으면이 세 스크립트를 웹 사이트의 모든 페이지에 삽입 할 수 있습니다. 즉, 페이지가 필요하지 않은 경우에도 방문자 가이 파일을 다운로드해야합니다. wp_enqueue_script() 현재, 문제는 이미 심각하지만 jQuery를 고려하면 문제가 더 커집니다. 이 라이브러리를 사용하는 두 개의 플러그인 에이 동작이 있으면 어떻게해야합니까? 사용자는 쓸모없는 파일을 다운로드 할뿐만 아니라 두 번 다운로드합니다! 페이지가 무겁을수록로드 시간이 길어질 수 있습니다. 로드 시간이 너무 길어있는 웹 사이트는로드 속도가 빠른 웹 사이트보다 방문이 적습니다. 플러그인이나 테마가 너무 길어지면 사용되지 않습니다. 이것은 의심 할 여지없이 도구를 최적화하기위한 강력한 원동력입니다. 피할 수없는 스크립트 삽입 함수 동일한 파일을 반복적으로 삽입하는 문제를 피하기 위해 WordPress는 훌륭한 기능을 제공합니다. 이 기능은 스크립트를 삽입하려면 가장 친한 친구 여야합니다. 이름에서 알 수 있듯이이 함수는 스크립트를 큐에 추가하고 올바른 시간에 헤더 또는 바닥 글에 포함하므로 페이지 중간에 스크립트 태그가 추가되지 않습니다. 단독으로 사용하면 기능에는 스크립트 이름과 스크립트 URL이라는 두 가지 매개 변수가 필요합니다. 예를 들어, 플러그인이 요구하는 스크립트를 포함하려면이 줄을 기본 파일에 추가합니다 (아래의 올바른 방법이 표시됩니다). 그러나 세 가지 추가 매개 변수는 스크립트가 포함 된 방법, 특히 마지막 부울 매개 변수를 더 잘 제어 할 수 있습니다. 기본적 으로이 부울 값은 허위로 설정되고 스크립트가 헤드 태그에 포함됩니다. TRUE로서 스크립트가 바닥 글래에 포함됩니다. 네 번째 매개 변수는 스크립트의 다른 버전을 만들 때 유용합니다. 버전 번호가 포함 된 문자열이며 URL의 끝에 추가됩니다. 버전 번호를 추가하면 방문자가 캐시에 관계없이 올바른 스크립트의 스크립트를 얻을 수 있습니다. wp_enqueue_script() 세 번째 매개 변수는 스크립트의 종속성을 표시 할 수 있기 때문에 가장 흥미로운 매개 변수 중 하나입니다. 예를 들어, 스크립트에 jQuery 라이브러리가 필요한 경우이 매개 변수를 사용할 수 있습니다. 보시다시피, 종속성이 하나만 있더라도 배열에 종속성이 표시되어야합니다. 이 배열에서 표시하는 이름은 두 번째 함수로 등록 된 스크립트의 이름입니다. 두 번째 함수는 첫 번째 함수와 정확히 동일하게 사용됩니다. 스크립트 이름, URL, 종속성, 버전 번호 및 바닥 글에 포함되어야하는지 여부를 나타냅니다. 마지막 세 매개 변수는 선택 사항이지만 다른 매개 변수가 필요합니다. wp_enqueue_script() 등록 스크립트에는 포함되지 않습니다. 스크립트를 포함시키기 위해 기능을 사용해야하지만 사용은 단순화됩니다. 스크립트의 이름 만 표시하면됩니다. wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js'); 당신은 가 모든 작업을 수행 할 수 있기 때문에 얼마나 유용한 지 궁금 할 것입니다. 이 기능은 스크립트가 포함되어야하는 방법을 나타내는 데 사용되지만 필요하지 않은 경우 포함되지 않습니다. 예제가 더 명확하므로 두 개의 JavaScript 파일을 포함해야한다고 상상해보십시오. 첫 번째 파일은 라이브러리이며 두 번째 파일은이 라이브러리를 사용하여 무언가를 수행합니다. 라이브러리는 jQuery가 제대로 작동하도록 요구하므로 다음과 같이 등록합니다. 이 시점에서 라이브러리가 포함되어 있지 않지만 기본 파일을 포함하려면이 라이브러리를 포함시켜야합니다. 우리는이를 종속성으로 표시합니다. wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js'); 모든 마법의 힘이 나타났습니다. myfile.js 파일이 포함되어 있지만 mylib.js 파일이 작동해야합니다. 이것이 종속성이 작동하는 것이므로이 파일이 포함됩니다. 하지만! mylib.js 파일에는 jQuery가 필요하므로 jQuery도 포함됩니다. 코드 줄에는 세 가지 파일이 포함되어 있습니다. 그러나 이것이 기능의 유일한 장점은 아닙니다. 스크립트를 등록하면 다른 플러그인이 사용할 수 있습니다. 따라서 일부 플러그인을 정의하는 다양한 플러그인을 만들려면 다른 라이브러리를 정의하면 다른 플러그인이 포함시킬 수 있습니다. 함수의 가장 큰 장점은 동일한 스크립트를 두 번 포함하지 않는다는 것입니다. 예를 들어, 두 파일 모두 jQuery가 필요하다고 상상해보십시오.이 파일은이를 종속성으로 표시하고 WordPress는 첫 번째 파일이 포함될 때 라이브러리를 포함합니다. 그런 다음 두 번째 스크립트를 포함시킬 시간이 있습니다. WordPress는 jQuery를 종속성으로 취급하지만 라이브러리에는 이미 포함되어 있으므로 다시 포함 할 필요가 없습니다. WordPress는 그렇게하지 않습니다. wp_register_script() 이름이 다른 URL을 가진 두 개의 스크립트를 사용하려고 할 때도 동일한 동작이 발생합니다. 다음 예에서 WordPress는 파일 만 한 번만 포함합니다. <:> 그러나 참고 :이 동작은 제한되어 있습니다. 버전 번호가 하나 이상의 wp_enqueue_script() 즉, 일반적으로 다른 이름으로 동일한 스크립트를 등록 할 이유가 없습니다. 그러나 상황을 명확히해야합니다. 보시다시피,이 두 기능은 종속성을 관리하는 가장 좋은 방법입니다. 등록하면 WordPress는 나머지를 자동으로 처리합니다. 우리는 " jQuery "이라는 이름을 사용하여 jQuery를 우리 자신의 파일에 포함시키고 싶지만 등록하지 않았다는 것을 나타냅니다. 이 이름은 WordPress에 의해 등록됩니다 : CMS를 다운로드하면 jQuery가 포함되어 있습니다. wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery')); 이 라이브러리만이 유일한 것은 아닙니다.이 페이지에서 WordPress 등록을위한 모든 스크립트를 찾을 수 있습니다. 직접 또는 종속성을 통해 등록 할 수 있으며 파일을 제공 할 필요가 없어서이 스크립트를 사용하는 모든 플러그인 또는 테마는 동일한 파일을 사용합니다.이 예에서는 다른 플러그인이 jQuery를 사용하는 경우 라이브러리가 라이브러리를 사용합니다. 한 번만 포함됩니다. wp_enqueue_script() 어디에서나 스크립트를 등록하지 마십시오! wp_register_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery'), '1.0', true); 함수는 동일한 스크립트에 두 번 포함되지 않으며 헤더 또는 바닥 글에 올바르게 포함되도록합니다. 그러나 표시된 페이지에 스크립트가 필요하지 않으면 어떻게해야합니까? ACTION/FILTER API 사용 사용 컨텐츠 편집기에 미디어 버튼을 추가하는 예를 들어보십시오. JavaScript 파일은 사용자가 편집기에있을 때만 필요합니다. 실제로, 평균 방문자가 기사를 읽을 때, 그들은이 스크립트가 필요하지 않습니다. 그것을 포함하여 쓸모없고 페이지를 더 무겁게 만듭니다. 그래서 스크립트를 페이지에 포함시키고 싶을 때 다음 질문을 스스로에게 물어보십시오.이 스크립트가 언제 필요합니까? 물론,이 질문에 대한 답은 스크립트의 기능에 따라 다릅니다. 그러나이 답을 찾으면 해당 조치를 찾으십시오. WordPress Codex는 사용 가능한 작업 목록을 제공하므로 여기에서 검색 한 작업을 찾을 수 있습니다. 찾았 어? 훌륭하게, 플러그인의 기본 파일 또는 테마의 functions.php 파일에 스크립트를 등록하는 새 기능을 만듭니다. 그런 다음, 행동이 트리거되면 실행하십시오 : 예를 들어, 미디어 버튼을 추가하려면 wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js'); 액션을 사용합니다. 위의 링크 된 참조 에서이 조치를 검색하려고하면 아무것도 찾지 못할 수 있습니다.이 줄을 작성할 때 가 나열되지 않습니다. 이 목록은 철저하지는 않지만 좋은 출발점입니다. wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery')); 올바른 조치를 찾을 수 없다면 비슷한 동작으로 다른 행동을 찾을 수 있거나 필터에서 검색을 시도해야 할 수도 있습니다. WordPress 기능 사용 기능! wp_enqueue_media 일반적으로 플러그인은 작업/필터 API와 함께 완전히 사용할 수없는 특정 이유로 작성됩니다. 예를 들어, 플러그인은 기사에서 특정 요소를 수정할 수 있지만 모든 요소는 아닙니다. 짧은 코드는 전형적인 예입니다. 플러그인에 바로가 코드를 대체하는 코드로 사용되는 일부 스크립트가 필요하다고 가정합니다. 짧은 코드를 정확하게 찾을 수있는 조치 나 필터가 없습니다. 그러나 단축 코드가 발견되었는지 확인하고 스크립트가 필요한지 확인할 수있는 장소가 있습니다. wp_register_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery'), '1.0', true); 이 장소는 단축 코드를 찾을 때마다 WordPress가 호출하는 콜백 함수입니다. 이 콜백 함수에서 > 전화가 필요하지 않으면 스크립트가 포함되지 않습니다. wp_enqueue_media 그러나 단축 코드가 두 번 이상 발견되면 어떻게됩니까? 대답은 간단합니다. 아무 일도 일어나지 않을 것입니다. 실제로 동일한 스크립트를 사용하여 함수를 두 번 호출하십시오.이 스크립트에는 한 번만 포함 되므로이 기능은 매우 좋은 도구입니다. 따라서이 호출을 콜백 함수 또는 플러그인 또는 테마의 다른 부분에 삽입 할 수 있습니다. 스크립트가 필요한지 확인할 수 있습니다. 여러 번 필요한 경우에도 한 번만 포함됩니다. 가 호출되는 위치에 따라 WordPress에게 헤드 태그에 포함하도록 요청하기에는 너무 늦을 수 있습니다. 유일한 옵션은 바닥 글입니다. 어떤 이유로 스크립트가 헤드 태그에 있어야하는 경우 고려하십시오. 지금 질문이있을 수 있습니다 : 언제 너무 늦었습니까? 각 주제는 두 가지 특정 함수를 사용해야합니다. 전자가 호출되면 WordPress는 헤드 태그에 필요한 모든 줄을 자동으로 추가합니다. 헤드 태그에 스크립트를 포함하도록 요청하면 호출 할 때 포함됩니다. 이 포함을 요청하면 스크립트가 헤드 태그에 포함되지 않습니다. 그러나 WordPress는 똑똑하지만 스크립트는 여전히 포함됩니다. 함수가 호출 될 때 바닥 글에서 검색 할 수 있으며 여기에 포함되어야하는 스크립트가 포함되어있을 때. wp_head() 따라서 답을 얻으십시오. 스크립트를 헤드 태그에 절대적으로 포함시키고 싶다면 wp_footer() 호출 전에 포함을 요청하십시오. 신체 태그가 끝나기 전에 wp_head() 호출은 문서 끝에 있어야합니다. wp_head() 결론 귀하의 스크립트는 플러그인이나 테마가 특정 위치에서 수행하는 작업에 유용하지만, 필요하지 않은 페이지에 포함 시키면 해당 페이지가 불필요하게 무겁게 만듭니다. wp_footer() WordPress는 스크립트를 올바르게 포함시킬 수있는 다양한 도구를 제공합니다. 이 도구를 사용하려면 필요한 유일한 질문은 다음과 같습니다. 언제 또는 어디에 필요한가? 나머지는 답변에 따라 다릅니다. 동작이나 필터를 찾거나 호출을 올바른 함수에 넣 거나이 기능의 기능을 사용 하거나이 모든 것을 결합하십시오. 여기에 제공된 테스트 플러그인에서 위에서 설명한 몇 가지 예를 검색 할 수 있습니다. 스크립트와 "라이브러리"를 등록하고 다른 쓸모없는 스크립트를 사용하는 짧은 코드를 만듭니다. wp_head() 플러그인 또는 주제에 JavaScript를 포함하는 것에 대한 FAQS (FAQS) wp_head() wp_footer() WordPress 테마 또는 플러그인에 JavaScript를 포함시키는 가장 좋은 방법은 무엇입니까? WordPress 테마 또는 플러그인에 JavaScript를 포함시키는 가장 좋은 방법은 함수를 사용하는 것입니다. 이 기능을 사용하면 테마 나 플러그인 파일을 직접 편집하지 않고 WordPress 테마 또는 플러그인에 JavaScript 파일을 포함시킬 수 있습니다. 또한 스크립트가 올바른 순서로로드되어 잠재적 충돌이나 오류를 방지합니다. 내 WordPress 기사 나 페이지에 직접 JavaScript를 추가 할 수 있습니까? 예, WordPress 기사 나 페이지에 직접 JavaScript를 추가 할 수 있습니다. 그러나 스크립트로드 순서에 문제가 발생할 수 있으며 다른 스크립트와 충돌 할 수 있으므로 권장하지 않습니다. 대신, 함수를 사용하여 스크립트를 포함하는 것이 좋습니다. 내 JavaScript 파일이 올바른 순서로로드되는지 확인하는 방법은 무엇입니까? 스크립트를 등록 할 때 종속성을 지정하여 JavaScript 파일이 올바른 순서로로드 될 수 있습니다. 함수를 사용하면 스크립트가 의존하는 스크립트를 지정하여 올바른 순서로로드되도록합니다. WordPress 테마의 functions.php 파일에 javaScript를 포함시킬 수 있습니까? 예, WordPress 테마의 functions.php 파일에 JavaScript를 포함시킬 수 있습니다. 그러나 스크립트를 포함시키기 위해 wp_enqueue_script() 함수를 사용하는 것이 좋습니다. 이를 통해 스크립트가 올바른 순서로로드되어 다른 스크립트와의 잠재적 충돌을 방지합니다. 내 JavaScript 파일과 다른 스크립트 간의 충돌을 방지하는 방법은 무엇입니까? 함수를 사용하여 스크립트를 포함시켜 JavaScript 파일과 다른 스크립트 간의 충돌을 방지 할 수 있습니다. 이 기능을 사용하면 스크립트가 올바른 순서로로드되어 다른 스크립트와의 잠재적 충돌을 방지합니다. 기능을 사용하여 외부 JavaScript 파일을 포함 할 수 있습니까? wp_enqueue_script() 예, 함수를 사용하여 외부 JavaScript 파일을 포함시킬 수 있습니다. 함수를 호출 할 때 외부 스크립트의 URL을 두 번째 매개 변수로 제공하면됩니다. WordPress 플러그인에 JavaScript를 포함시키는 방법은 무엇입니까? 함수를 사용하여 WordPress 플러그인에 JavaScript를 포함시킬 수 있습니다. 이 기능을 사용하면 플러그인 파일을 직접 편집하지 않고 플러그인에 JavaScript 파일을 포함시킬 수 있습니다. 또한 스크립트가 올바른 순서로로드되어 잠재적 충돌이나 오류를 방지합니다. 기능을 사용하여 여러 자바 스크립트 파일을 포함 할 수 있습니까? wp_enqueue_script() 예, 함수를 사용하여 여러 자바 스크립트 파일을 포함 할 수 있습니다. 포함하려는 각 스크립트에 대해 함수를 한 번만 호출하면됩니다. 내 JavaScript 파일이 특정 페이지에서만로드되는지 확인하는 방법은 무엇입니까? wp_enqueue_script() 등록 기능에서 조건부 태그를 사용하여 JavaScript 파일이 특정 페이지에만로드되어 있는지 확인할 수 있습니다. 예를 들어, 함수를 사용하여 특정 페이지가 표시되는지 확인하고 페이지가 표시 될 때만 스크립트가 등록 될 수 있습니다. wp_enqueue_script() WordPress 하위 테마에 JavaScript를 포함시킬 수 있습니까? 예, WordPress 하위 테마에 JavaScript를 포함시킬 수 있습니다. Child 테마의 functions.php 파일에서 함수를 사용하여 스크립트를 포함시킬 수 있습니다. 이를 통해 스크립트가 올바른 순서로로드되어 다른 스크립트와의 잠재적 충돌을 방지합니다. 이 응답은 원래 텍스트의 크게 다시 작성되고 개선 된 버전을 제공하여 명확성, 흐름 및 가독성을 향상시키는 동시에 핵심 의미를 유지합니다. 또한 더 나은 사용자 경험을 위해보다 적절한 제목과 서식을 사용합니다. 이미지 URL은 변경되지 않은 상태로 유지됩니다
