워드프레스 베스트셀링 테마인 아바다(Avada)에서 Code Block 요소를 이용하면 워드프레스에서 포맷을 변경하지 않고 페이지에 HTML, 자바스트립트 또는 CSS 코드를 추가할 수 있습니다. 특정 페이지에 커스텀 코드를 추가할 때 유용합니다.
워드프레스 아바다 테마에 HTML 코드를 추가하는 방법
Element 선택 화면에서 Code Block을 선택하면 Code Block 요소가 선택한 컨테이너(Container)에 추가됩니다.
다음과 같이 javascript 코드도 추가가 가능합니다.
<script async src=”//cdn.embedly.com/widgets/platform.js” charset=”UTF-8″></script><body> 내에 <style> 태그는 HTML 5에서 허용된다고 합니다("Using <style> tags in the <body> with other HTML" 참고). 위의 그림에서와 같이 <style> 태그를 추가해도 되고, 가능한 경우 CSS는 차일드 테마 내의 스타일시트 파일에 추가하면 추후에 제어하기 편할 것입니다.
[참고*위에서는 편의상 CSS를 <style>...</style> 형식으로 추가했지만 커스텀 CSS 코드는 외모 > 사용자 정의하기 > 추가 CSS에 추가하거나 차일드 테마 내의 스타일시트에 추가하시기 바랍니다. 또한, 자바스크립트는 워드프레스에서 js 스크립트 파일과 스타일시트를 올바르게 로드하는 방법을 참고하여 로드하는 방법을 이용하는 것이 바람직합니다. 위에서와 같이 추가하는 것이 가능은 한 것 같지만 워드프레스에서는 권장되는 방법은 아닙니다.*]
CSS 코드는 별도로 추가하려는 경우에는 다음 글을 참고하여 CSS 코드를 삽입할 수 있습니다.
특정 페이지 내에 HTML 코드를 추가해야 하는 경우 이 방법을 사용하면 편리합니다. 다른 페이지 빌더에서도 쉽게 HTML 코드나 자바스크립트 코드를 추가할 수 있는 요소를 제공합니다.
예를 들어, Divi 테마에서는 코드를 넣을 수 있는 '코드' 모듈을 제공합니다.
