워드프레스(WordPress) 사이트를 운영하다 보면 워드프레스 상위 레벨에서 모든 페이지에 동일한 자바스크립트(JavaScript)를 적용하는 대신 특정 페이지나 글에만 선별적으로 자바스크립트를 적용해야 할 때가 있다. Head & Footer Code 플러그인을 활용하면 특정 글이나 페이지에 헤더나 푸터에 코드를 추가하는 기능을 제공하며, 원하는 페이지에만 선별적으로 자바스크립트를 적용할 수 있게 만들어 준다. 모든 페이지에 스크립트를 적용하면 사이트 속도가 느려지고 불필요한 리소스를 낭비하게 되기도 하고, 필요한 기능을 선별해 적용하면 사이트 전체의 성능과 보안까지 개선할 수 있으므로 꼭 Head & Footer Code 플러그인을 활용 해 보길 추천한다.
1. Head & Footer Code 플러그인 소개
Head & Footer Code 플러그인은 간단한 인터페이스를 제공하여 워드프레스의 헤더 또는 푸터에 원하는 코드를 추가할 수 있게 해 준다. 특히, 모든 페이지에 동일하게 적용되는 코드 대신 특정 페이지나 글에만 선택적으로 자바스크립트를 삽입할 수 있어, 다음과 같은 장점이 있다.
- 페이지 최적화: 불필요한 스크립트 로드를 줄여 페이지 로딩 속도를 개선한다.
- 맞춤 효과 적용: 특정 페이지에만 효과를 주는 자바스크립트 코드를 적용할 수 있다.
- 관리 용이: 플러그인 설치 및 설정만으로 간편하게 적용할 수 있다.
2. 플러그인 설치 방법
플러그인 설치는 워드프레스 관리자 페이지 내에서 간단하게 진행할 수 있다.
- **워드프레스 관리자 페이지 접속:** 관리자 계정으로 로그인 후 좌측 메뉴에서 **플러그인** 메뉴를 선택한다.
- **새 플러그인 추가:** **새로 추가** 버튼을 클릭하고 검색창에 “Head & Footer Code”를 입력하고 찾은 후 설치한다.
- **플러그인 설치 및 활성화:** 설치가 완료되면 **활성화** 버튼을 누른다.
3. 플러그인 설정 및 특정 페이지에만 Head & Footer 적용
플러그인을 설치한 후에는 특정 페이지나 글에만 자바스크립트를 적용할 수 있도록 셋팅을 변경해야 한다.
3-1. 플러그인 셋팅하기 (Article specific settings)
“Head & Footer Code” 플러그인에서 가장 유용한 기능으로 개별 글이나 페이지에 코드를 추가할 수 있게 해준다.
- 워드프레스 관리자 메뉴에서 ‘플러그인 > Head & Footer Code > Setting’으로 이동한다.
- “**Article specific settings**”를 클릭한다. 이게 끝이다. 여기서 글(post)과 페이지(page)가 있는데, 글(post)을 클릭하면 모든 포스트 글마다 개별의 Head, Body, Footer를 삽입할 수 있다.페이지(page)도 마찬가지 이다.
3-2. 각 페이지(page), 글(post)에서 Head, Body, Footer 개별적으로 삽입 가능한지 확인하기
- 워드프레스 **새 글 추가** 나 **새 페이지 추가** 버튼을 눌러 작성하면, 아래와 같이 화면 아래쪽에 개별적인 Head, Body, Footer 입력 창이 생성된 것을 확인 할 수 있다.
- 또한 Head Code 입력하는 곳 위에 Behavior을 선택할 수 있는데,
- “Append to the site-wide code” 는 기존 사이트 레벨에서 전역으로 설정된 Head나 Footer에 추가로 박스에 입력한 코드를 함께 적용하는 것이고,
- “Replace the site-wide code“는기존 사이트 레벨에서 전역으로 설정된 Head나 Footer 코드를 무시하고 지금 박스에 입력한 것으로 완전히 변경하하는 것을 의미한다.
Article specific settings은 플러그인의 핵심 기능으로, 개별 콘텐츠마다 다른 자바스크립트를 적용하기에 가장 효과적인 방법이다.
워드프레스 블로그 운영 시 페이지별로 맞춤형 자바스크립트 코드를 적용하는 것은 사이트 최적화와 검색 엔진 최적화(SEO)에 큰 도움이 된다. Head & Footer Code 플러그인에서, 특히, Article specific settings 설정을 통해 각 글이나 페이지마다 개별 코드를 적용하는 방법은 매우 유용한 기능이므로 필요 시 꼭 사용해 보길 추천한다.