워드 프레스 테마에 자바 스크립트 추가하기

플러그인 또는 상위 WordPress 테마와의 충돌을 방지하기 위해 WordPress 테마에 Javascript를 추가하는 특정 방법이 있습니다. 문제는 많은 “개발자”가 header.php 또는 footer.php 파일에서 자바 스크립트 파일을 직접 호출하는 잘못된 방법입니다..


이 가이드에서는 functions.php 파일을 사용하여 자바 스크립트 파일을 올바르게 호출하여 사이트의 헤드 또는 바닥 글 태그에 바로로드하는 방법을 보여줍니다. 배포 할 테마를 개발 중이고 최종 사용자가 하위 테마를 통해 스크립트를 수정하려는 경우 또는 축소 / 캐싱 또는 기타 최적화 플러그인을 사용하는 경우 올바르게 작동합니다. 하위 테마로 작업하는 경우 header.php 또는 footer.php 파일을 하위 테마로 복사하지 않고 스크립트를 올바르게 추가 할 수 있습니다 (잘 코딩 된 테마로 작업 할 때)

워드 프레스 테마에 자바 스크립트를 추가하는 잘못된 방법

아래에 표시된 것처럼 header.php 파일 또는 footer.php 파일에서 javascript를 호출하는 것은 올바른 방법이 아니므로 다른 플러그인과 충돌을 일으키고 CMS로 작업 할 때 수동으로 작업을 수행하지 않는 것이 좋습니다. 좋은 아이디어.

워드 프레스 테마에 자바 스크립트를 추가하는 올바른 방법

WordPress 테마에 자바 스크립트를 추가하는 것이 더 좋습니다. wp_enqueue_script. wp_enqueue_scripts 액션을 사용하여 자바 스크립트를로드하면 테마가 문제를 해결하는 데 도움이됩니다..

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

위의 코드는 귀하의 사이트에 my-script.js 파일을로드합니다. 보시다시피 $ handle 만 포함했지만 스크립트, 버전 번호 및 머리글 또는 바닥 글에로드 여부 (기본값은 머리글)에 대한 종속성을 추가 할 수도 있습니다.

wp_enqueue_script () 함수는 기술적으로 모든 테마 또는 플러그인 템플릿 파일에서 사용할 수 있지만 전역 스크립트를로드하는 경우 테마의 function.php 파일 또는 스크립트를로드하려는 별도의 파일에 배치하려고합니다. 대지. 그러나 특정 템플릿 파일 (예 : 갤러리 게시물)에만 스크립트를로드하려는 경우 템플릿 파일에 바로 기능을 배치 할 수는 있지만 개인적으로 모든 스크립트를 한 곳에 보관하고 조건부를 사용하여로드하는 것이 좋습니다 필요에 따라 스크립트.

워드 프레스 호스팅 스크립트

WordPress의 멋진 점 중 하나는 테마 개발에 사용할 수있는 호스트되고 등록 된 스크립트가 이미 있다는 것입니다. 예를 들어, 거의 모든 프로젝트에서 사용되는 jQuery는 항상 WordPress에서로드해야하며 Google과 같은 타사 사이트에서 호스팅해서는 안됩니다. 프로젝트에 커스텀 스크립트를 추가하기 전에 등록 된 스크립트 WordPress에 아직 포함되어 있지 않은지 확인하려면 자신의 등록과는 반대로로드해야합니다..

워드 프레스 인큐 훅 사용

이전에는 사이트에 스크립트를로드하는 데 필요한 함수를 언급했지만 functions.php 파일과 같은 비 템플릿 파일로 작업 할 때 적절한 WordPress 후크에 연결된 다른 함수 안에이 함수를 추가해야합니다. 하위 테마를 사용할 때 WordPress, 타사 플러그인 및 상위 테마에서 등록한 다른 모든 스크립트에 등록.

워드 프레스에는 스크립트 호출에 사용할 수있는 두 가지 동작 후크가 있습니다..

  1. wp_enqueue_scripts – 프론트 엔드에서 스크립트를로드하는 데 사용되는 작업
  2. admin_enqueue_scripts – WP 관리자에서 스크립트를로드하는 데 사용되는 조치

다음은 함수를 생성 한 다음 워드 프레스 훅을 사용하여 스크립트를 호출하는 방법에 대한 예제 (functions.php 파일에 추가됨)입니다..

/ **
* 스크립트를 큐에 넣다
* /
함수 myprefix_enqueue_scripts () {
wp_enqueue_script ( 'my-script', get_template_directory_uri (). '/js/my-script.js', array (), true);
}
add_action ( 'wp_enqueue_scripts', 'myprefix_enqueue_scripts');

노트: 스크립트의 위치를 ​​정의 할 때 “get_template_directory_uri”기능을 어떻게 사용하고 있는지 확인하십시오. 이 기능은 테마 폴더의 URL을 만듭니다. 자식 테마로 작업하는 경우 부모 테마가 아닌 자식 테마를 가리 키도록 “get_stylesheet_directory_uri”를 대신 사용하려고합니다..

인라인 자바 스크립트 코드 추가

스크립트 태그를 통해 템플릿 파일에 인라인 자바 스크립트를 쉽게 붙여 넣을 수 있지만 특히 핵심 플러그인 또는 테마 코드 인 경우 인라인 코드를 추가 할 때 WordPress 후크를 사용하는 것이 좋습니다. 다음은 사이트에 인라인 스크립트를 추가하는 예입니다.

함수 myprefix_add_inline_script () {
wp_add_inline_script ( 'my-script', 'alert ( "hello world");', 'after');
}
add_action ( 'wp_enqueue_scripts', 'myprefix_add_inline_script');

이 작업은 이전에 등록 된“my-script”스크립트 뒤에 인라인 자바 스크립트를 추가하는 것입니다. wp_add_inline_script를 사용하는 경우 이미 등록 된 스크립트 전후에 인라인 코드 만 추가 할 수 있으므로 특정 스크립트의 코드를 수정하려는 경우 그 뒤에로드되었는지 확인하거나 일부 사용자 정의 코드를 추가해야하는 경우 후크 할 수 있습니다 일반적으로 대부분의 WordPress 테마에 의해로드되는 jquery 스크립트로 전달되며, 그렇지 않은 경우 wp_enqueue_script를 사용하여 jQuery의 WordPress 호스팅 버전을로드 할 수 있습니다.

이 방법을 사용하면 사람들이 하위 테마 또는 플러그인 애드온을 통해 인라인 스크립트를 쉽게 제거 할 수 있으므로 모든 사용자 정의 자바 스크립트를 깔끔하게 정리할 수 있으며 WordPress에 의해 구문 분석되어 더욱 안전합니다. 하위 테마를 사용하는 경우 header.php 또는 footer.php 파일을 하위 테마로 복사하는 대신 functions.php 파일을 통해 스크립트를로드 할 수 있습니다..

즉, 하위 테마로 작업하는 경우이 작업을 수행 할 필요가 없습니다. 아래 예와 같이 wp_head 또는 wp_footer 후크를 사용하여 헤더에 코드를 덤프하면됩니다.

add_action ( 'wp_footer', function () {?>  
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me