워드프레스 블록 에디터(구텐베르크)에 HTML 코드 추가하기

워드프레스 기본 에디터인 블록 에디터(구텐베르크)에서 사용자 정의 HTML 코드를 추가하고 싶은 경우 사용자 정의 HTML 블록을 사용할 수 있습니다. 이 블록을 사용하여 HTML 코드를 삽입할 수 있지만 자바스크립트(JavaScript) 코드는 삽입할 수 없습니다. 자바스크립트는 숏코드를 만들어 추가하거나 자바스크립트를 로드하는 방식으로 추가할 수 있습니다.

워드프레스 블록 에디터(구텐베르크)에 HTML 코드 추가하기

엘리멘터 페이지 빌더나 아바다 테마의 아바다 빌더, Divi 테마의 디비 빌더 등에서는 HTML 코드를 추가할 수 있는 요소/위젯을 제공합니다. 일부 페이지 빌더에서는 자바스크립트 코드를 추가할 수도 있지만 자바스크립트는 워드프레스 권장하는 방식으로 로드하는 것이 바람직합니다.

엘리멘터 페이지 빌더에 HTML 코드 추가하기 (Elementor)

 

워드프레스 아바다 테마에 HTML 코드를 추가하는 방법

블록 에디터에서는 사용자 정의 HTML 블록을 사용하여 사용자 정의 HTML 코드를 삽입할 수 있습니다.

블록 에디터에서 [**/html**]을 입력하면 사용자 정의 HTML 블럭이 표시됩니다. 사용자 정의 HTML을 클릭하면 HTML 코드를 추가할 수 있는 블록이 표시됩니다.

구텐베르크에서 "/블록 이름"(예: [**/이미지**])을 입력하여 쉽게 블록을 선택할 수 있습니다.

사용자 정의 HTML 블록에 원하는 HTML 코드를 추가하도록 합니다.

저장한 다음 해당 페이지나 글을 살펴보면 HTML이 적용되어 있는 것을 확인할 수 있습니다.

자바스크립트 코드

블록 에디터의 사용자 정의 HTML 블록에는 자바스크립트 코드를 추가할 수 없습니다. 애드센스 광고 코드나 쿠팡 파트너스 다이내믹 코드를 추가하려는 경우 숏코드를 만들어서 숏코드롤 삽입하시기 바랍니다.

예시: 애드센스 코드

[워드프레스] 숏코드로 구글 애드센스 코드를 추가하는 방법 - 워드프레스

코드 편집기

블록 에디터 편집 화면에서 코드 편집기 화면으로 전환하여 코드를 수정하고 싶은 경우 [**Ctrl+Shift+Alt+M**] 단축키를 눌러 코드 편집기로 전환할 수 있습니다. 

코드 편집기에서 코드를 수정할 수 있습니다. 하지만 잘못 수정할 경우 에러가 발생할 수 있으므로 코드 편집기에서 작업할 경우 주의하시기 바랍니다. (가능한 경우 백업 후에 작업하시면 좋을 것 같습니다.)

참고

https://avada.tistory.com/2897

엘리멘터 무료 버전 vs. 프로 버전 비교

https://avada.tistory.com/3019

워드프레스 디비 테마용 무료 콘서트 홀 레이아웃 팩(Concert Hall Layout Pack for Divi)

https://avada.tistory.com/3016

클라우드웨이즈 복원 방법 (워드프레스 사이트 롤백)