cheolguso logo

워드프레스 스타일 & 스크립트 추가하기

Explanation

요즘은 찾아와주시는 분들이 많아서 오랜만에 포스트를 쓰고 싶은데, 당당히 적을 수 있을 만한 새로운 지식은 없기에.. 간단히 스타일 & 스크립트를 추가하는 방법을 짧게나마 적어보겠습니다.

소스보기

내 맘대로 간략한 설명 :
 
우선 add_action(), add_filter(), do_action(), apply_filters() 부분은 좀 설명하기 복잡하니까 다음에…
 
wp_enqueue_style( ‘핸들러’ , ‘파일경로’ , ‘뭐라고 해야하지.. 선행 스타일?’, ‘버전’ , ‘미디어’);
wp_enqueue_script( ‘핸들러’ , ‘파일경로’ , ‘선행 스크립트?’ , ‘버전’ , ‘푸터에 출력할지?’);
 
1. 선행 스타일? 선행 스크립트?
이 스타일(또는 스크립트)가 실행되기 이전에 실행되어야 할 스타일(또는 스크립트)를 선언할 수 있습니다. 다른 선언된 스타일(또는 스크립트)의 핸들러나 이미 워드프레스에서 선언되어 있는 핸들러를 사용할 수 있습니다. (예제의 ‘jquery’는 워프에서 기본적으로 선언되어 있는 스크립트 핸들러)
 
2. 버전
입력하지 않아도 기본값은 false 입니다. 하지만 기본적인 캐시와 그밖의 다양한 캐시들로 인해서 예상처럼 내가 적용한 효가가 바로 적용되지 않을 수 있습니다. 이왕이면 버전, 혹은 날자들을 기입하는 것이 좋습니다.
 
3. wp_enqueue_script -> ‘푸터에 출력할지?’ 기본값은 false 해더에 출력이 됩니다. 자바스크립트 라이브러리라던가 프레임워크가 아니라면 true로 푸터에 출력하는게 일반적? (스크립트 파일 선언 위치에 관해서는 인터넷에 많은 자료가 있으니 참고하는게 좋을듯)

get_stylesheet_directory_uri();
 
자식 테마의 URI를 반환합니다.
부모 테마의 URI는 ‘ get_template_directory_uri(); ‘

add_action( ‘훅’ , ‘함수명’ , ‘우선순위??’ , ‘사용할 인자 개수??’);
 
1. 예제의 ‘wp_enqueue_scripts’는 워프 기본으로 가지고 있는 스타일과 스크립트가 선언되는 시점?? 입니다.
2. 우선순위??’는 같은 훅에 여러 함수가 add_action 되었을때의 출력순서? 입니다. 기본값 10, 숫자가 클수록 늦게 선언됩니다.
3. ‘사용할 인자 개수’ 는 저 훅에 걸린 인자를 몇개 사용할지??를 정의할 수 있습니다. 기본값 1
이부분은 설명하기가 어려워서… wordpress.org / 코덱스를 참고하는게 좋을거 같습니다.
 
참고 : https://codex.wordpress.org/Function_Reference/add_action

내 맘대로 부가 설명 :
 
테마를 커스텀하거나 개발을 하게 된다면 그냥 필요한 위치에 ‹script src=””›‹/script› 혹은 ‹link rel=”stylesheet”… /›로 넣으면 되지 않나? 왜 굳이?? 라고 생각할 수도 있으나,(그 방법이 틀리다거나 나쁘다는건 아님)
워드프레스의 확장성과 그에 따른 설치된 다양한 플러그인 스크립트, 스타일과의 선언 시점에 관해서 보다 체계적으로 접근할 수 있는 장점이 있습니다.

Leave a Reply