본문으로 바로가기
  1. Home
  2. 워드프레스/테마
  3. 워드프레스 아바다 테마에 HTML 코드를 추가하는 방법

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

· 댓글 5 · 워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada

워드프레스 베스트셀링 테마인 아바다(Avada)에서 Code Block 요소를 이용하면 워드프레스에서 포맷을 변경하지 않고 페이지에 HTML, 자바스트립트 또는 CSS 코드를 추가할 수 있습니다. 특정 페이지에 커스텀 코드를 추가할 때 유용합니다.

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

워드프레스 아바다 테마에 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 테마에서는 코드를 넣을 수 있는 '코드' 모듈을 제공합니다.

참고:

SNS 공유하기
최근 글
30분전
추천하는 글
30분전
💬 댓글 5

이름을 저장합니다.

가성비가 뛰어난 웹호스팅

저렴하고 가성비 좋은 웹호스팅

저도 같은 사람한테 당했는 데... 청산사랑 => 이 ⋯

💬Xenoint

플러그인 사용이전하는 방법이로군요^^

💬空空(공공)

트라도스서식 알아 갑니다^^

💬空空(공공)

예전에는 새로운 버전 출시 전 몇 달 전에 구입할 경우⋯

💬워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada

무료로 업그레이드 해주면 더 충성도가 올라갈텐데요

💬본연의 힘

워드프레스 시작 가이드

워드프레스 시작하기
이모티콘창 닫기
울음
안녕
감사해요
당황
피폐

이모티콘을 클릭하면 댓글창에 입력됩니다.

프리미엄 테마 그래픽 동영상 템플릿 무료 다운로드