워드프레스 헤더와 푸터에 쉽게 코드 삽입하기: WPCode Insert Headers and Footers 플러그인 - 워드프레스 정보꾸러미
베스트셀링 인기 워드프레스 테마 Top 30 자세한 정보

워드프레스 헤더와 푸터에 쉽게 코드 삽입하기: WPCode Insert Headers and Footers 플러그인

Last Updated: 2022년 8월 30일 | 7개 댓글
  • 네이버 블로그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

워드프레스에서 헤더나 푸터에 코드를 추가해야 하는 경우 여러 가지 방법이 있습니다. 보통은 FTP에 접속하여 테마 파일을 수정하는 방법을 이용할 수 있습니다.

FTP에 접속할 수 없거나 테마 파일을 수정하고 싶지 않은 경우, 혹은 관리자 페이지에서 간단하게 코드를 삽입하고 싶은 경우 Insert Headers and Footers 플러그인을 사용할 수 있습니다.

※ Insert Headers and Footers 플러그인은 WPCode로 명칭이 바뀌었습니다.

워드프레스 헤더와 푸터에 쉽게 코드 삽입할 수 있는 WPCode (구명칭 Insert Headers and Footers) 플러그인

워드프레스 Insert Headers and Footers 플러그인

WPCode (구 명칭 Insert Headers and Footers) 플러그인을 사용하면 Google Analytics, 사용자 정의 CSS, Facebook Pixel, 네이버 애널릭틱스, 네이버 웹마스터도구 소유 확인 메타태그 등의 코드를 워드프레스 관리자 페이지에서 간단하게 추가할 수 있습니다.

웹호스팅에 가입하여 사용하는 워드프레스 설치형에서는 사용에 제약이 없지만, 워드프레스 가입형(WordPress.com)에서는 요금제에 따라 제약이 있습니다. 가령, 프리미엄 요금제 이하에서는 사용자 코드를 추가할 수 없지만 비즈니스 요금제 이상에서만 플러그인을 사용하여 사용자 코드를 추가할 수 있고 애드센스 광고 게재도 가능합니다. 비즈니스 플랜을 사용하는 경우 이 플러그인을 설치하면 사용자 코드를 수월하게 추가할 수 있습니다.

이 플러그인을 설치하려면 워드프레스 알림판 > 플러그인 > 새로 추가를 클릭하고 WPCode(이전 명칭 Insert Headers and Footers)를 검색하여 플러그인을 설치하고 활성화합니다.

워드프레스 헤더 푸터 코드 추가하기

이 플러그인은 현재 60만 개 이상의 사이트에 설치되어 사용되고 있습니다. 이 플러그인을 활성화한 후에 설정 > Insert Headers and Footers 메뉴를 클릭하여 사용자 코드를 추가할 수 있습니다.

워드프레스 헤더나 푸터에 코드 추가하기

Scripts in Header에 코드를 넣으면 <head> 섹션에 스크립트가 추가됩니다. Scripts in Footer에 코드를 넣으면 </body> 태그 바로 위에 스크립트가 삽입합니다.

테마에서 제공하는 기능을 사용하여 사용자 코드 추가하기

일부 테마에서는 이 플러그인에서 제공하는 기능을 제공하기도 합니다. 예를 들어, Avada 테마에서는 Avada > Theme Options > Advanced > Code Fields (Tracking etc.)에서 사용자 코드를 입력할 수 있습니다.

아바다 테마에 사용자 코드 삽입

Enfold 테마의 경우 살펴보니 헤더와 푸터에 코드를 추가할 수 있는 별도의 옵션은 제공되지 않고, 구글 애널리틱스 코드와 Google Maps API 키를 삽입할 수 있는 옵션이 제공되네요.

Enfold 테마 코드 추가하기

구글 애널리틱스 코드는 SEO 플러그인(예: All in One SEO)을 통해서도 입력할 수 있습니다. 그리고 많은 유료 테마에서 Google Maps API 키를 추가할 수 있는 옵션을 제공합니다.

Divi 테마에서는 Divi > Theme Options > Integration에서 <head> 혹은 <body>에 코드를 추가할 수 있습니다.

Divi 테마 사용자 코드 추가하기

이처럼 테마에서 사용자 코드를 추가할 수 있는 기능을 제공하는 경우에는 Insert Headers and Footers와 같은 플러그인을 설치할 필요가 없이 테마에서 제공하는 기능을 사용하는 것이 좋습니다. (다만, 테마를 바꾸면 테마 옵션에 추가한 코드를 다시 추가해주어야 합니다.)

참고:



7 개 댓글

Leave a Comment

  1. 안녕하세요~선생님
    네이버 웹사이트에 head 코드를 추가하면 좋다는 글을 보다가 다시 글남깁니다. 예를 들어 업무용핸드폰이라는것을 키워드를 잡아서 head를 추가하고싶다면,,,

    Scripts in Header에 코드를 넣으면 섹션에 스크립트가 추가됩니다. Scripts in Footer에 코드를 넣으면 태그 바로 위에 스크립트가 삽입합니다. 이렇게 말씀하셨는데요,,

    Scripts in Header에
    어떤 코드를 넣어야될까요?ㅠ

    Scripts in Body 에는 이렇게 나와있습니다. (밑에 영역은 복사한겁니다..)

    var protect_id = 'c951';

    Scripts in Body에는 지금 들어가있는게 맞게 들어가있는지요?
    혹시 덧붙여서 어떤걸 넣어야되는건가요??

    감사드립니다.~

    응답
    • 워드프레스 댓글란에 javascript 코드를 넣으면 보안 문제 때문에 삭제됩니다.
      매뉴얼에서 head 부분에 추가하라고 되어 있으면 Scripts in Header에 추가하시면 됩니다.

      응답
      • 매뉴얼에서 head 부분에 추가하라고 되어 있으면 Scripts in Header에 추가하시면 됩니다
        ㅡ> 어떤것을 추가해야하며, 정확히 기재를 부탁드려도 될까요?
        (복사해서 붙여놓을수있게요 ㅠ) 감사합니다.

      • Scripts in Header에 코드를 넣으면 섹션에 스크립트가 추가하면 됩니다.
        ㅡ>정확히 제가 어떤걸복사해서 넣으면 될까요? html 등이런게 전혀 문외한이라서요...;;

      • 어떤 코드를 넣으시려고 하는지를 몰라서 정확한 답변을 드릴 수 없음을 양해바랍니다.

        가령, 구글 애드센스의 광고 코드나 구글 애널리틱스의 추적코드를 넣고자 하는 경우에 매뉴얼을 보면 head 섹션에 추가할 것을 안내하고 있습니다. 그런 경우에는 Scripts in Header에 넣으면 됩니다. 자바스크립트 코드의 경우 Scripts in Footer에 추가하여 제대로 작동하는지 살펴볼 수 있습니다. 만약 문제가 되면 헤더 섹션에 추가해볼 수 있을 것입니다.

  2. 본문에서 ,
    Scripts in Header에 코드를 넣으면 섹션에 스크립트가 추가됩니다.
    Scripts in Header에 이코드를 넣으면 되는건가요?
    이것을

    응답