WP Enqueue란 무엇이며 어떻게 사용합니까?

게시 됨: 2017-10-28

HTML을 처음 배울 때 모든 종류의 상호 작용을 삽입하는 방법을 아는 유일한 방법은 페이지의 머리글이나 바닥글에 스크립트 태그를 사용하여 외부 JavaScript 파일의 유형과 소스를 설정하는 것입니다. (또는 정말 막 배우는 중이라면 본문 자체에 있는 스크립트 태그 사이의 전체 JS 기능. 학습에는 괜찮지만 고급 WordPress 개발로 이동하면 꽤 나쁜 습관입니다. enqueue 기능을 입력하십시오.

간단한 한 페이지 웹 사이트를 지나치면 이러한 초심자 연습은 정말 어려운 상황을 만들 수 있습니다. JavaScript를 더 많이 추가하기 시작하면 웹사이트가 점점 느려집니다. 업데이트 시간이 더 오래 걸립니다. 결국, 당신은 JavaScript-getti의 큰 더미를 만들었고 아무리 노력해도 그 국수 더미는 풀리지 않습니다.

고맙게도 WordPress의 대기열 에 추가 기능을 사용하여 CMS에서 처리하는 스타일과 스크립트를 추가할 수 있습니다. 모든 혼란은 당신을 위해 처리됩니다. 각 페이지의 머리글이나 바닥글에 원하는 스크립트나 스타일을 직접 붙여넣는 것만큼 간단하지는 않지만 올바른 처리 방법입니다. WordPress는 독단적이지 않습니다. 확실히 알아야 할 일련의 모범 사례가 있습니다.

그리고 wp_enqueue_scripts 는 이러한 관행의 최전선에 있습니다.

빅딜이 뭐야?

wp_enqueue 를 사용하려는 주된 이유는 사이트를 원활하고 빠르게 실행하는 것입니다. 페이지 속도는 중요하며 동일한 스크립트와 스타일을 반복해서 사용하는 것은 도움이 되지 않습니다. 조금도.

운 좋게도 wp_enqueue 는 함수형 프로그래밍의 예입니다. 즉, 실행할 단일 코드(JavaScript 조각)를 작성하고 필요할 때마다 전체를 다시 작성/붙여넣기하는 대신 wp_enqueue 를 사용하여 호출합니다.

그건. 엄청난.

더 놀라운 것은 enqueue 방법을 사용하면 WordPress 자체에서 _script_ 태그를 머리글과 바닥글에 자동으로 삽입하여 각 페이지에 개별적으로 입력할 필요 없이 로드할 수 있다는 것입니다.

WP 인큐 구문 및 매개변수

스크립트를 대기열에 추가하는 것은 그렇게 어렵지 않습니다. 처음에 JavaScript로 작업할 수 있을 만큼 능숙하다면 대기열에 추가하는 데 사용하는 PHP 함수는 간단할 것입니다.

일반적인 스크립트 태그에서는 외부 .js 파일을 직접 가져오거나 태그 자체 사이에 전체 긴 코드 조각을 붙여넣습니다. (Divi 코드 모듈이나 WP 사용자 정의 HTML 또는 텍스트 위젯에 무언가를 붙여넣는 경우에도 마찬가지입니다.)

몇 가지 기본 매개변수와 구문만 알면 됩니다.

Codex는 이것을 기본 대기열 코드로 제공합니다. 

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

대체로 매개변수별로 사용 ​​가능한 비트로 나누는 것은 매우 간단합니다.

  • wp_enqueue_script() 는 페이지에 모든 코드를 넣을 함수 all입니다.
  • $handle 은 스크립트 자체의 고유한 이름입니다.
  • $src 는 대기열에 넣는 실제 .js 파일의 URL을 나타냅니다.
  • $deps 는 이것이 필요한 모든 의존성의 $handle 입니다.
  • $ver 는 버전 번호가 됩니다. 아무 것도 지정하지 않으면 WP 설치 버전이 자동으로 추가됩니다.
  • $in_footer 또는 $in_header 는 WordPress에 스크립트를 저장할 위치를 알려줍니다.

스크립트를 대기열에 넣는 전체 문서는 Codex에서 볼 수 있습니다.

학생 여러분 주목하세요: WP 등록이 지금 시작됩니다!

_wp_enqueue__ 외에도 WP에는 _wp_register__라는 편리한 메소드도 있습니다. 두 방법 모두 동일한 매개변수와 구문을 사용하므로 실제로는 두 가지 방법으로 2대1 거래를 할 수 있습니다. 기본적으로 스크립트를 등록하는 것은 JavaScript에서 함수의 이름을 지정하는 것과 같습니다.

필요하지는 않지만 스크립트를 등록하면 나중에 종속성으로 선언할 필요가 없기 때문에 훨씬 쉽게 사용할 수 있습니다. 이미 등록되어 있을 것입니다. 따라서… _wp_register__. 스크립트가 등록되면 아래 예제에서 볼 수 있듯이 $handle로 다시 호출할 수 있습니다.

다음과 같이 코드를 등록합니다. 

wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js', false, null, $in_footer);

그런 다음 다시 필요할 때마다 항상 다음과 같이 다시 호출할 수 있습니다.

wp_enqueue_script( 'jquery' );

또한 등록은 필요하지 않은 경우에도 스크립트를 로드할 필요가 없다는 것을 의미합니다. WPMU에는 단축 코드 생성의 멋진 예가 있습니다. _wp_enqueue__를 사용하는 단축 코드에 스크립트를 등록하면 단축 코드가 사용되는 경우에만 사용됩니다. 하지만 enqueue로만 호출하면 숏코드를 사용하지 않아도 로드됩니다.

Codex에서 방법에 대한 모든 것을 읽을 수 있습니다.

또한 플러그인 작성자는 WordPress.org 리포지토리에 포함하려는 경우 스크립트를 대기열에 넣어야 합니다.

함께 넣어

코드를 구현하는 것은 쉽습니다. 당신의 functions.php 에 아래와 같은 스니펫을 놓기만 하면 됩니다 . 나머지는 WordPress가 처리합니다. 제 말은, 이것은 jQuery를 호출하기 위한 정말 기본적인 스니펫이지만, 어떻게 함께 작동하는지 볼 수 있습니다.

일반적으로 다음과 같은 것을 사용합니다. 

<script type="text/javascript" src="jquery.js"></script>

enqueue_scripts_ 사용 방법을 배우면 다음과 같은 것을 볼 수 있습니다. 

add_action('wp_enqueue_scripts', 'add_scripts');
function add_scripts(){
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js', false, null, true);
    wp_enqueue_script( 'jquery' ); 
}

이제 위의 코드에서 다음 몇 단계의 순서를 설명하기 위해 이미 WordPress의 일부인 add_scripts()_ 함수를 사용하는 방법에 주목하세요. 먼저 wp_register_ 함수는 지정된 모든 세부 정보를 가져오고 스크립트를 페이지 바닥글에 넣은 다음 wp_enqueue 를 사용하여 모든 것이 설정되면 마지막으로 호출합니다.

마무리

정말 그게 전부입니다. 글쎄요, 그것은 사실이 아닙니다. enqueue는 WP의 꽤 뿌리깊은 부분입니다. 그러나 이것들은 이전보다 WordPress로 더 많은 작업을 수행하는 데 도움이 되는 기본 사항입니다.

웹 개발을 시작할 때 스크립트를 입력하는 방법에 대해 모두 배운 기본 사항은 여전히 ​​작동하지만 항상 작업을 수행하는 가장 좋은 방법은 아닙니다. PHP를 기반으로 구축되는 WordPress의 장점 중 하나는 이러한 종류의 논리를 작업에 적용하면서 어쨌든 동일한 기본 구조와 워크플로를 유지할 수 있다는 것입니다.

hanss / shutterstock.com의 기사 축소판 이미지