워드프레스 꼼수 – 페이지 빌더에서 자바스크립트 코드 안 먹을 때

황금고블린 사이트가 워드프레스로 만들어졌다는 이야기는 지난 번에 했다.
어떤 채널은 비주얼 컴포저를 쓰고 어디엔 Elementor를 썼다.
이런 페이지 빌더들을 쓰다 보면 원하는 자바스크립트 코드가 안 먹을 때가 있다.
여러 가지 원인이 있을 것이고 그에 맞는 해결 방법이 있겠지만, 오늘은 꼼수를 하나 이야기 해보려고 한다.

setTimeout()을 써보자

setTimeout()은 일정 시간 후에 특정 코드를 실행시키는 함수다.
문법은 간단하다.

setTimeout( function() {/*실행시킬 코드*/}, delay/*딜레이 시킬 밀리초(1초=1000)*/ );

나는 보통 300~500 밀리초 정도 딜레이를 시켜서 문제를 해결하고 있다.
그러면 이리저리 굴려봐도 작동이 안 되는 코드가 귀신같이 먹기도 한다.
물론 코드 자체엔 문제가 없어야 한다.

작동 원리(?)

setTimeout()의 작동 원리를 말하려는 게 아니다.
왜 워드프레스 페이지 빌더에서 자바스크립트 코드가 안 먹는지와 코드 실행을 딜레이 시키면 통하는 지에 대한 것이다.

보통 자바스크립트 코드는 문서의 하단에 들어간다.
아무래도 이벤트가 등록이 되고 하는 문제 때문에 문서가 로딩되는 순서를 생각해서 넣는 것이리라.
그런데 페이지 빌더에서 하나의 페이지에만 작동하는 코드를 넣기 위해서 raw 스크립트를 넣을 때 주로 이런 문제가 생긴다.
아마도 html을 불러오는 순서의 문제인 것 같다.

나도 몇 차례 $(document).ready()를 써보기도 하고 window.onload()도 넣어보고 했는데 잘 안 통하더라.
더 깊이 알아낼 지식이 없으니 결국 꼼수를 찾게 됐다.
뭐가 문제인지 모르면 그냥 대충 0.3초 기다렸다 실행하면 로딩이 다 되어 있겠지.
그래서 setTimeout()을 써보니 기가 막히게 통하더라.

주의할 점

조심할 부분이 있다.
setTimeout()으로 이벤트 등록을 한다고 해도 비동기 방식으로 데이터를 불러오면 새로 나온 html들은 코드가 안 먹힌다.
그러면 setInterval()을 사용해야 할 수도 있다.
하지만 setInterval()은 리소스를 계속해서 먹기 때문에 사용에 주의해야 한다.
정확한 지식이 없이 꼼수를 쓰는 자의 한계다.
필요하다면 clearInterval()과 적절히 잘 쓰길 바란다.

워드프레스로 홈페이지를 만들고 하다 보면 공부의 필요성을 많이 느낀다.
특히나 근본적인 문제를 해결하지 못할 때면 언어를 더 깊이 알아야겠다 생각한다.
그렇지만 당장 눈앞의 문제를 해결해야 하니 이렇게 꼼수를 쓰면서 넘기기도 한다.
아마 페이지 빌더를 사용하는 어줍잖은 수준의 제작자들은 공감을 할지도 모르겠다.
아님 어쩔 수 없고….
오늘 꼼수가 도움이 되었다면 홈페이지에 있는 광고나 적선하는 마음으로 눌러주면 고맙겠다.
그럼 이만!