워드프레스 페이지를 이용해서 웹 서비스를 간단하게 만들어보려는 시도를 해볼 수 있습니다. 하지만 그렇게 간단하게 만들어본 코드가 워드프레스의 사용자 정의 html 블록에 넣었을 때 동작하지 않는 경우를 경험하셨을 겁니다.
목차
워드프레스 블로그에서 코드 실행 방법
이렇게 워드프레스에서 자바스크립트 코드가 동작하지 않는 이유는 워드프레스가 보안 상의 이유로 사용자가 임의의 자바스크립트 코드를 삽입하거나 실행하는 것을 막기 때문입니다. 워드프레스는 기본적으로 사용자가 작성한 내용을 필터링하고, 허용된 HTML과 특정 JavaScript 코드만 허용합니다.
때문에, 우리가 워드프레스에서 자바스크립트 코드를 실행하고 싶다면, 편집화면에서 바로 복사 붙여넣기 하는게 아닌 다른 방법을 찾아야 합니다. 몇가지 방법을 알려드리겠습니다.
1. 플러그인 사용
워드프레스 플러그인 중에서 자바스크립트 코드 실행을 허용해주는 플러그인을 설치하여 사용할 수 있습니다. 예를 들어, “Insert Headers and Footers” 또는 “Header and Footer Scripts”와 같은 플러그인을 사용하면 워드프레스 페이지에 헤더 또는 푸터에 JavaScript 코드를 삽입할 수 있습니다.
2. 테마 파일 편집
워드프레스 테마 파일을 직접 편집하여 자바스크립트 코드를 추가할 수도 있습니다. 다만, 이 방법은 워드프레스에 대해서 잘 알고 코딩에 대해서도 어느정도 지식이 있어야합니다. 실수로 잘못된 코드를 추가하여 사이트에 문제가 발생하면 직접 수정할 곳을 찾을 수 있어야하니까요.
만일 테마파일을 편집하는 방식으로 구현하려고 한다면 테마 파일을 편집하기 전에 백업을 해놓고, 한번에 코드가 작동할 수 있도록 신중하게 작성해야할겁니다.
3. 커스텀 페이지 템플릿
워드프레스에서 커스텀 페이지 템플릿을 만들고, 해당 템플릿에 자바스크립트 코드를 추가하여 사용할 수도 있습니다. 이를 위해서는 테마 파일을 편집하거나, 테마 빌더 또는 페이지 빌더 플러그인을 사용하여 커스텀 페이지를 생성할 수 있습니다.
3가지 방법에 대해서 알려드렸는데요. 개인적으로는 1번째 방식을 이용하시는 것을 추천합니다. 플러그인을 설치하기만하면 복사 붙여넣기가 가능해지니까요. 그러면 문제를 해결하고 괜찮은 웹 서비스를 만들어 보시길 바라겠습니다.