Posted in 웹디자인, 일상/잡상

워드프레스 – body 태그 이후로 자바스크립트 삽입하기

자바스크립트 호출 순서

워드프레스에서 자바스크립트를 사용하다보면, 보통 웹사이트들과 달리 wp_enqueue_script 라는 워드프레스 자체 함수를 이용하게 됩니다. 일반적으로 웹사이트를 만들때 방식처럼 script 태그를 여기저기 삽입하는 방식으로 만드는 것보다 이런 방식을 권장하고 있기 때문이죠.

그런데 문제는 스크립트마다 head에서 호출해야하는 경우가 있고, body 태그 이후에 호출해야하는 경우도 있습니다. 컨텐츠가 다 불러오기 전에 미리 삽입하느냐, 컨텐츠가 다 불려온 후에 삽입해야하느냐 하는 순서를 정해줘야할 때가 있죠.

순서 때문에 문제가 가끔 발생합니다

예를 들면 저의 경우 워드프레스에 bxslider를 직접 넣어서 쓰고 있는데, 호출 시점에 문제가 생겼습니다. 처음에는 멀쩡히 작동하다가 테스트하면서 다른 플러그인을 한번 설치했다가 지우면서 뭔가 순서가 꼬였는지 오작동을 일으키기 시작했습니다.

개발자 툴을 통해 확인해보니 스크립트가 호출되는 시점이 변경되어있더군요. 컨텐츠가 다 불려온 이후에 호출되야하는데, 그 이전에 스크립트가 삽입되어버리더군요. 그러니 스크립트는 제어해야할 컨텐츠를 찾지 못하고, 손을 놔버리는 상황이었습니다.

wp_enqueue_script

보통 자바스크립트는 function.php 안에 wp_enqueue_script 함수로 삽입합니다.

이런 구조를 갖고 있는 녀석인데, 위의 내용은 함수 안에 쓰이는 매개변수들입니다. 총 5개의 매개변수들인데, 저의 경우엔 아래와 같이 사용했습니다.

여기서 문제 해결을 위해 주목해야할 부분이 가장 마지막에 쓰인 $in_footer 변수에 들어간 내용입니다. false 값으로 넣어주면 head부분(컨텐츠 이전)에서 자바스크립트가 삽입되고, true로 넣어주면 body 태그 이후(컨텐츠 이후)로 자바스크립트가 삽입됩니다.

이렇게 매개변수 옵션 하나만 바꿔줘도 쉽게 해결 될 수 있는 문제인데 한참 끙끙댔네요.

0

Written by 코르니유

방황하는 일러스트레이터. 질풍노도의 웹/그래픽편집디자이너. 귀가가 귀찮아 외출도 귀찮은 스페셜 귀차니스트. 철부지들을 싫어하지만, 정작 본인은 철들기를 거부하는 30대 아저씨