프론트 엔드에서 WP 스크립트 / 스타일 로더를 사용하여 스크립트와 스타일을 연결하고 압축 할 수 있습니까?

27

WP에는 wp-admin에 포함 된 멋진 자바 스크립트 로더가 있습니다. http://core.trac.wordpress.org/browser/tags/3.0.4/wp-admin/load-scripts.php

CSS 로더 : http://core.trac.wordpress.org/browser/tags/3.0.4/wp-admin/load-styles.php

대기열에 포함 된 모든 스크립트를 연결하고 단일 gzipped 파일로 사용할 수 있기 때문에 관리자뿐만 아니라 프론트 엔드에서도 사용할 수 있는지 궁금합니다.

— 알렉스
소스

이 효과적으로 그냥 물어 아닌가요 "내가 비 관리자 페이지에 대한 대기열에 사용할 수 있습니까?" .. 그 대답은 예입니다.

— t31os

5

@ t31os 문제는 load-scripts.php와 load-styles를 사용 하여 관리자와 스타일과 스크립트 를 연결하고 압축하는 방법 입니다. 나는 질문의 제목을 명확히했다.

— Chris_O

12

늦게 대답

간단히 살펴보면 다음과 같습니다.

당신은 사용해야합니다

include( admin_url().'load-scripts.php' );
과 include( admin_url().'script-loader.php' );

그런 다음으로 이동하십시오 $GLOBALS['wp_scripts'].

용도…

$wp_scripts->default_dirs( array_merge( 
     $wp_scripts->default_dirs
    ,array( '/themes/your_theme/js/' ) 
);

… 확장하기 위해.

그런 다음 사용

$wp_scripts->add( $handle, $path_from_content_dir, false/array( $deps ), $ver )

스크립트를 추가합니다.

노트:

압축 스크립트로 검색 얻을 .dev.js(때 SCRIPT_DEBUG입니다 TRUE).
같은 것 같습니다 $wp_styles.
편집 : WP 3.5 이 동작 및 사용 변경됩니다 .js"dev에"버전 및 (가 ".min.js"에 대한 SCRIPT_DEBUG입니다 TRUE);

(하지만 플러그인이나 mu-plugin을 사용하는 경우에만 작동합니다.)

_{그것은 테스트되지 않았으며 이것이 효과가 있는지 확실하지 않습니다.}

— 황제
소스

나는 현재 이와 같은 일을하려고합니다. 나쁜 점은 load-scripts.php exit()에 결국에는 아무것도 없기 때문에 나중에 아무것도 할 수 없다는 것입니다.

— Benjamin Intal

이 답변은 실제로 엄청난 두통에서 나를 구했습니다. SCRIPT_DEBUGis true인 경우 모든 스크립트는 프런트 엔드에서와 같이 개별적으로 대기열에 포함됩니다. 그러나 SCRIPT_DEBUG이며 false, 그것을 통해 동시에 스크립트를 대기열 것으로 보인다 load-scripts.php.

— Michael Ecklund

@MichaelEcklund 예.이 "스위치"– 상수는 단일 파일을 연결 하거나 전달합니다. 이것은 소스 맵 이전과 오늘날 개발자 도구의 시대입니다.

— 카이저

6

이것은 매우 좋은 질문이며 WordPress에 포함시키는 훌륭한 기능입니다.

다른 답변 중 일부는 주요 질문을 다루지 않습니다.

대기열에 포함 된 모든 스크립트를 연결하고 단일 gzipped 파일로 제공 할 수 있기 때문에 관리자뿐만 아니라 프런트 엔드에서도 사용할 수 있는지 궁금합니다.

현재 내장 된 스크립트 로더를 사용하여 프런트 엔드 용 CSS와 스크립트를 연결할 수 없습니다.

있었다 WP 해커에 이에 대한 논의는 몇 년 전과가 이 향상을위한 TRAC의 티켓을 인정되었지만 미래의 릴리스는.

— Chris_O
소스

3

프론트 엔드에서 CSS 파일을 큐에 넣어야하는 경우 :

1) wp_register_style ($ handle, $ src)을 통해 스타일을 등록하십시오. 2) wp_enqueue_style ($ handle)을 wp_print_styles 후크에 연결하십시오.

프런트 엔드에서 스크립트를 대기열에 추가해야하는 경우 :

1) wp_register_script ($ handle, $ src)를 통해 스타일을 등록하십시오. 2) wp_enqueue_script ($ handle)를 wp_head 후크에 연결하십시오.

(참고 : 이것에 대한 wp_print_styles 후크를 예상했지만이 후크는 예상대로 작동하지 않습니다.)

— 칩 베넷
소스

0

보고 싶은 스크립트가 몇 개 있습니다.

1. Combine.php- 여러 테마 에서이 스크립트를 구현 했습니다 . 유사한 기능을 지원하며 템플릿 폴더에 놓을 수 있으며 비교적 쉽게 작업 할 수 있습니다.

2. WP 스크립트의 축소 - 이 플러그인 지원은 축소에와 함께 작동하도록 쉽게입니다.

3. W3 Total Cache- 매우 강력한 성능 플러그인입니다. 또한 스크립트 / css 조합뿐만 아니라 결합 된 스크립트를 CDN에로드하지 않는 다른 많은 기능도 지원합니다.

— 스캇
소스