본문 바로가기
IT

워드프레스에서 HTML 편집 및 스크립트, 메타 태그 추가 방법

by 굿센스굿 2025. 2. 3.
반응형

워드프레스는 기본적으로 사용자가 HTML 코드를 직접 수정할 수 있도록 구성되어 있지는 않지만, 플러그인을 활용하면 손쉽게 헤더(Header), 바디(Body), 푸터(Footer) 영역에 HTML 코드, 스크립트, 메타 태그 등을 추가할 수 있습니다. 특히, 검색 엔진 최적화(SEO)를 위해 구글 서치콘솔, 구글 애널리틱스(Google Analytics), 빙 웹마스터, 네이버 서치 어드바이저 등의 메타 태그를 추가하는 것이 중요합니다.

이번 글에서는 워드프레스에서 HTML을 편집하는 방법과 함께, 가장 많이 사용되는 두 가지 플러그인 WP CodeInsert Headers and Footers를 활용하여 스크립트 및 메타 태그를 추가하는 방법을 자세히 알아보겠습니다.


1. WP Code 플러그인 활용하기

WP Code 플러그인이란?

**WP Code(Insert Headers and Footers)**는 약 1,000,000개 이상의 사이트에서 사용되는 강력한 플러그인으로, 헤더, 바디, 푸터 영역에 HTML 코드 및 스크립트를 쉽게 추가할 수 있습니다. 무료 버전과 유료 버전이 존재하며, 간단한 기능 사용은 무료 버전에서도 가능합니다.

WP Code 플러그인의 장점

  • 다양한 코드 스니펫(Code Snippets) 템플릿 제공
  • 구글 애널리틱스, 서치 콘솔 등의 메타 태그 간편 추가
  • PHP 코드 스니펫 활용 가능
  • 여러 코드 추가 기능 제공 (SVG 업로드 허용, 자동 업데이트 차단 등)
  • 직관적인 인터페이스로 쉽게 사용 가능

WP Code 설치 방법

  1. 워드프레스 관리자 페이지에서 플러그인 메뉴로 이동합니다.
  2. 새 플러그인 추가 버튼을 클릭합니다.
  3. 검색창에 WPCode를 입력하고 검색합니다.
  4. WPCode – Insert Headers and Footers 플러그인을 찾아 설치한 후 활성화합니다.

WP Code를 활용한 HTML, 스크립트, 메타 태그 추가 방법

  1. 플러그인 활성화 후 워드프레스 관리자 메뉴에서 Code SnippetsHeader & Footer로 이동합니다.
  2. Header(헤더), Body(바디), Footer(푸터) 영역 중 원하는 위치에 스크립트나 HTML 코드를 추가합니다.
  3. 변경 사항 저장(Save Changes) 버튼을 클릭하여 적용합니다.

WP Code 부가 기능

WP Code에서는 플러그인 설치 없이 추가 설정을 할 수 있는 다양한 스니펫 템플릿을 제공합니다. 대표적인 기능은 다음과 같습니다.

  • SVG 파일 업로드 허용: 보안 문제로 기본적으로 제한된 SVG 파일 업로드를 허용
  • 댓글 차단: 스팸 방지를 위해 댓글 기능을 차단
  • 자동 업데이트 차단: 워드프레스 및 플러그인의 자동 업데이트를 비활성화
  • Gutenberg 에디터 끄기: 기존 클래식 에디터를 선호하는 사용자를 위해 Gutenberg 에디터 비활성화
  • 관리자 툴바 끄기: 워드프레스 관리자 툴바를 제거하여 깔끔한 화면 유지

이 외에도 다양한 무료 및 유료 템플릿이 있으며, 사용자가 직접 PHP 코드를 추가하여 확장할 수도 있습니다.


2. Insert Headers and Footers 플러그인 활용하기

Insert Headers and Footers 플러그인이란?

Insert Headers and Footers는 WP Code보다 심플한 기능을 제공하는 플러그인으로, HTML, 스크립트, 메타 태그를 쉽게 추가할 수 있습니다. 워드프레스를 처음 사용하는 분들에게 적합하며, 복잡한 설정 없이 빠르게 적용할 수 있는 것이 장점입니다.

Insert Headers and Footers 플러그인의 장점

  • 간단한 인터페이스로 쉽게 사용 가능
  • 가벼운 용량으로 사이트 속도 저하 없음
  • 별도 코드 스니펫 기능 없이 헤더, 바디, 푸터에 코드 추가 가능

Insert Headers and Footers 설치 방법

  1. 워드프레스 관리자 페이지에서 플러그인 메뉴로 이동합니다.
  2. 새 플러그인 추가 버튼을 클릭합니다.
  3. 검색창에 Insert Headers and Footers를 입력하고 검색합니다.
  4. 해당 플러그인을 설치하고 활성화합니다.

Insert Headers and Footers를 활용한 HTML, 스크립트, 메타 태그 추가 방법

  1. 플러그인 활성화 후 설정(Setting)Insert Headers and Footers 메뉴로 이동합니다.
  2. 아래와 같은 입력란이 표시됩니다.
    • Header(헤더) 스크립트 입력란: <head> 태그 내부에 들어갈 스크립트나 메타 태그 입력
    • Body(바디) 스크립트 입력란: <body> 태그 내부에 삽입할 코드 입력
    • Footer(푸터) 스크립트 입력란: <footer> 태그 내부에 삽입할 코드 입력
  3. 필요한 스크립트나 HTML 코드를 입력한 후 변경 사항 저장(Save Changes) 버튼을 클릭하여 적용합니다.

Insert Headers and Footers 플러그인의 특징

  • 가볍고 빠른 성능: 불필요한 기능이 없고, 코드 추가 기능만 제공하여 간단함
  • 필수 코드 삽입 용이: 구글 애널리틱스, 페이스북 픽셀, SEO 관련 메타 태그 삽입에 적합
  • 초보자 친화적인 인터페이스: 코드 스니펫이 필요하지 않으며, 원하는 곳에 직접 추가 가능

3. 어떤 플러그인을 선택해야 할까?

구분 WP Code Insert Headers and Footers

기능 고급 기능 (PHP 스니펫, 코드 관리) 기본적인 코드 삽입
UI 다소 복잡하지만 강력한 기능 제공 직관적이고 간단한 인터페이스
추천 대상 코드 수정 및 다양한 기능 활용이 필요한 사용자 빠르고 간단한 코드 삽입이 필요한 사용자
  • 워드프레스 초보자: Insert Headers and Footers 플러그인을 사용하여 간단하게 적용
  • 추가적인 기능이 필요한 경우: WP Code 플러그인을 활용하여 다양한 코드 스니펫과 기능을 확장

4. 마무리

워드프레스에서 HTML을 직접 편집하는 것은 초보자에게 어려울 수 있지만, WP CodeInsert Headers and Footers 같은 플러그인을 활용하면 누구나 쉽게 헤더, 바디, 푸터 영역에 코드를 추가할 수 있습니다. 사용 목적에 따라 적절한 플러그인을 선택하여 활용하면 워드프레스 사이트를 더욱 효율적으로 관리할 수 있습니다.

 

반응형