워드프레스 본문에 HTML 추가하는 방법

LightNode
작성자 LightNode ·

소개

워드프레스 사이트 본문에 맞춤 HTML을 추가하면 기능성과 디자인을 향상시킬 수 있습니다. 이 가이드에서는 이 작업을 수행하는 여러 가지 방법을 안내해 드립니다.

플러그인 사용하기

  1. "Header and Footer Scripts" 플러그인을 설치하고 활성화합니다.
  2. 설정 > Header and Footer Scripts로 이동합니다.
  3. "Scripts in Body" 섹션까지 스크롤합니다.
  4. 이 필드에 HTML 코드를 붙여넣습니다.
  5. "변경 사항 저장"을 클릭합니다.

테마의 functions.php 파일 편집하기

  1. FTP 또는 cPanel의 파일 관리자에서 워드프레스 파일에 접근합니다.
  2. wp-content/themes/your-theme-name/ 경로로 이동합니다.
  3. functions.php 파일을 엽니다.
  4. 파일 맨 끝에 다음 코드를 추가합니다:
function add_custom_body_html() {
    echo '<div>Your custom HTML here</div>';
}
add_action('wp_body_open', 'add_custom_body_html');
  1. 'Your custom HTML here'를 원하는 HTML로 교체합니다.
  2. 파일을 저장합니다.

커스텀 HTML 블록 사용하기 (구텐베르크 에디터)

  1. HTML을 추가할 페이지나 게시물을 편집합니다.
  2. 새 블록을 추가하고 "Custom HTML"을 선택합니다.
  3. 블록에 HTML 코드를 입력합니다.
  4. 페이지를 업데이트하거나 게시합니다.

권장 사항

  • 변경하기 전에 항상 사이트를 백업하세요.
  • 먼저 스테이징 환경에서 맞춤 HTML을 테스트하세요.
  • 사이트 레이아웃이 깨지지 않도록 HTML이 유효한지 확인하세요.

워드프레스 본문에 HTML 추가하는 방법

자주 묻는 질문

Q: 왜 워드프레스 본문에 맞춤 HTML을 추가해야 하나요?

A: 맞춤 HTML을 본문에 추가하면 표준 워드프레스 설정이나 테마 옵션으로는 쉽게 구현할 수 없는 맞춤 스크립트, 추적 코드, 디자인 요소 등을 적용할 수 있습니다.

Q: 맞춤 HTML 추가가 사이트 성능에 영향을 미치나요?

A: 추가하는 HTML에 따라 다릅니다. 간단한 HTML은 성능에 큰 영향을 주지 않습니다. 하지만 복잡한 스크립트나 대용량 코드를 추가하면 사이트 속도가 느려질 수 있으니, 항상 스테이징 사이트에서 먼저 테스트하세요.

Q: functions.php 파일을 편집하는 것이 안전한가요?

A: PHP에 익숙하지 않다면 functions.php 같은 테마 파일 편집은 위험할 수 있습니다. 변경 전 반드시 사이트를 백업하고, 가능하면 자식 테마를 사용해 커스터마이징하는 것이 좋습니다.

Q: 헤더에 HTML을 추가하는 것과 본문에 추가하는 것의 차이는 무엇인가요?

A: 헤더의 HTML은 주로 메타 태그, CSS, 페이지가 빨리 로드되어야 하는 일부 스크립트에 사용됩니다. 본문 HTML은 페이지에 표시되는 콘텐츠나 페이지 렌더링 후 로드해도 되는 스크립트에 주로 사용됩니다.

Q: 페이지마다 다른 HTML을 추가할 수 있나요?

A: 네, 방법 3(커스텀 HTML 블록)을 사용하면 개별 페이지나 게시물에 특정 HTML을 추가할 수 있습니다. 사이트 전체에 적용하려면 방법 1 또는 2가 더 적합합니다.

Q: 추가한 HTML 때문에 사이트가 깨지면 어떻게 해야 하나요?

A: 사이트가 깨지면 다음을 시도하세요:

  1. 백업이 있다면 복원합니다.
  2. 방법 1을 사용했다면 플러그인을 제거합니다.
  3. 방법 2를 사용했다면 functions.php에 추가한 코드를 삭제합니다.
  4. 방법 3을 사용했다면 커스텀 HTML 블록을 제거합니다.