사용자 정의 HTML 블록을 사용하여 HTML 코드를 추가하고 편집할 때 미리 봅니다. 이 가이드에서는 웹사이트에 코드를 추가할 때 이 블록을 사용하는 방법을 알아봅니다.
시작하기 전에 사용자 정의 HTML 블록은 하나의 페이지나 글에 원시 HTML 코드를 추가하기 위한 것입니다. 항상 적합한 도구는 아닙니다. 목표가 아래 사례 중 하나와 일치하면 연결된 가이드가 더 빠른 경로입니다.
- 비디오, 지도, 소셜 글 또는 서드파티 서비스 (YouTube, Spotify, Instagram, Giphy, Pinterest 등) 임베드: 다른 플랫폼의 콘텐츠 임베드를 참조하세요. 임베드 블록은 모든 요금제에서 작동하며 사용자 정의 코드 없이 인기 있는 많은 서비스를 지원합니다.
- 연락처 세부 정보, 가입 또는 피드백 수집: 양식 블록을 참조하세요. 양식 블록은 HTML 없이 작동하는 양식을 만듭니다.
- 사이트에 CSS 스타일 추가: 사용자 정의 CSS 추가를 참조하세요.
- 사이트 헤더에 코드 추가(확인 메타 태그, 사이트 전체를 로드하는 서드파티 스크립트): 헤더에 코드 추가를 참조하세요.
사용자 정의 HTML 블록을 추가하려면 다음 단계를 따르세요.
- 사이트의 알림판으로 이동하여 HTML을 추가할 페이지, 글 또는 템플릿을 선택합니다.
- + 블록 삽입기 아이콘을 클릭하고 “HTML”을 검색합니다.
- 사용자 정의 HTML 블록을 클릭하여 콘텐츠에 추가합니다.
블록 추가에 대한 자세한 안내는 여기에서 확인하세요.
블록을 추가했으면 다음 단계에 따라 HTML 코드를 추가하세요.
- “HTML 편집” 버튼을 클릭합니다.
- 편집기 왼쪽에 HTML 코드를 작성하거나 붙여넣습니다.
- HTML을 작성하면 오른쪽에 코드 미리보기가 표시됩니다.
- 작업을 완료하고 변경 사항을 저장하려면 업데이트 버튼을 클릭합니다.
편집기에 HTML 코드의 결과가 표시됩니다. 변경하려면 블록 도구 모음에서 “HTML 편집” 버튼을 클릭하세요.
HTML은 브라우저가 웹사이트 콘텐츠를 표시하는 방법을 알려주는 컴퓨터 언어입니다. 워드프레스닷컴에서는 모든 요금제에서 다음 HTML 태그를 사용할 수 있습니다:
- a
- address
- abbr
- acronym
- area
- article
- aside
- b
- big
- blockquote
- br
- caption
- cite
- class
- code
- col
- del
- details
- dd
- div
- dl
- dt
- em
- figure
- figcaption
- footer
- font
- h1, h2, h3, h4, h5, h6
- header
- hgroup
- i
- img
- ins
- kbd
- li
- map
- mark
- ol
- p
- pre
- q
- rp
- rt
- rtc
- ruby
- s
- section
- small
- span
- strike
- strong
- sub
- summary
- sup
- table
- tbody
- td
- tfoot
- th
- thead
- tr
- tt
- u
- ul
- var
다음 태그를 추가하려면 호스팅 기능이 활성화된 유료 요금제가 필요합니다. 요금제의 호스팅 기능을 활성화하는 방법을 알아보세요.
embed, frame, iframe, form, input, object, textarea, script, style, link
웹사이트에 추가할 수 있는 코드 유형에 대한 자세한 내용과 코드 유형이 지원되지 않는 경우의 대안에 대한 자세한 내용은 웹사이트에 코드를 추가하는 가이드를 참조하세요.
저장 후 HTML 코드가 예상대로 나타나지 않으면 다음과 같은 일반적인 원인을 확인하세요.
워드프레스닷컴 보안을 위해 특정 HTML 태그를 필터링합니다. iframe, script, style, form, embed, object 같은 태그에는 호스팅 기능이 활성화된 유료 요금제가 필요합니다.
저장한 후 코드가 사라지거나 부분적으로 제거된 경우 다음 순서대로 검사를 진행하세요.
- 요금제를 확인합니다. 사이트의 알림판으로 이동하여 업그레이드 → 요금제를 선택합니다. 사용자 정의 HTML 블록은 유료 요금제에서만 제한된 태그를 허용합니다. 무료 요금제를 이용하고 있다면 유료 요금제로 업그레이드하여 계속 이용하세요.
- 호스팅 기능을 활성화합니다. 유료 요금제만으로는 충분하지 않습니다. 호스팅 기능도 활성화해야 합니다. 사이트에 플러그인을 하나 이상 설치하여 요금제를 활성화하고 사용자 정의 코드를 수락하세요.
- 코드를 다시 입력합니다. 요금제가 결제되고 호스팅 기능이 활성화되면 사용자 정의 HTML 블록에 코드를 다시 붙여 넣고 저장하세요.
호스팅 기능을 활성화한 후에도 코드가 여전히 제거되어 있으면 이 컨텍스트에서 태그가 지원되지 않거나 서드파티 서비스에서 지원되지 않는 마크업을 사용하는 임베드 코드를 공개할 수 있습니다. 대신 임베드 블록을 시도하거나 아래의 “예기치 않거나 유효하지 않은 콘텐츠” 오류 해결을 참조하세요.
비디오, 음악, 지도, 소셜 글, 캘린더, 뉴스레터, 문서 뷰어 등 서드파티 서비스의 콘텐츠를 임베드하려면 대신 임베드 블록을 사용하세요. 임베드 블록은 모든 요금제에서 작동하며, HTML을 작성할 필요가 없으며, YouTube, Vimeo, Spotify, X, Instagram, TikTok 등의 서비스를 지원합니다.
임베드 블록에 서비스가 나열되지 않으면 서비스에 iframe 또는 스크립트가 필요합니다. 호스팅 기능이 활성화된 유료 요금제의 사용자 정의 HTML 블록에 임베드 코드를 추가합니다.
블록에 예기치 않거나 유효하지 않은 콘텐츠가 포함되어 있다는 메시지가 표시되면 블록의 HTML이 비정상적이거나 변경되었을 수 있습니다. 편집기가 문제를 자동 으로 해결할 수 있도록 “블록 복구 시도“를 선택합니다. 오류가 지속되면 추가 옵션은 블록 오류 해결 가이드를 참조하세요.
지원 