WordPress Guide

이 가이드는 WordPress에 Tailwind CSS를 통합하고, Startupful에서 제공된 리소스를 WordPress 편집기에 적용하는 방법을 안내합니다.

Step 1: Tailwind CSS 추가하기

Tailwind CSS를 WordPress에 통합하려면, 다음과 같은 방법들을 사용할 수 있습니다.

가장 간단한 방법 중 하나는 활성화된 테마의 header.php 파일에 직접 Tailwind CSS 스크립트를 추가하는 것입니다.

WordPress 관리자 페이지에서 외모 > 테마 파일 편집기로 이동합니다.
header.php 파일을 찾아 <head> 태그 내에 아래 코드를 추가합니다.
```
<script src="https://cdn.tailwindcss.com"></script>
```

코드를 직접 테마 파일에 추가하지 않고도 쉽게 코드를 삽입할 수 있는 플러그인을 사용하면 안전하고 관리가 편리합니다. 다음과 같은 플러그인들이 많이 사용됩니다:

Insert Headers and Footers
- WordPress 관리자 페이지에서 플러그인 > 새로 추가로 이동하여 "Insert Headers and Footers"를 검색하고 설치, 활성화합니다.
- 플러그인 메뉴에서 설정 > Insert Headers and Footers로 이동하여 Scripts in Header 섹션에 아래 코드를 추가합니다.
```
<script src="https://cdn.tailwindcss.com"></script>
```
Code Snippets
- Code Snippets 플러그인을 사용하면 간편하게 테마의 head 태그에 코드를 추가할 수 있습니다.
- 플러그인 > 새로 추가에서 "Code Snippets"를 검색하여 설치 및 활성화합니다.
- Code Snippets > Add New로 이동하여 스크립트를 추가하고, 위치를 Head로 지정하여 실행합니다.

일부 테마는 Customizer에서 CSS 또는 JavaScript를 추가할 수 있는 기능을 제공하기도 합니다. 이 기능이 지원된다면:

외모 > 커스터마이즈 > Additional CSS 또는 Additional JS로 이동합니다.
JavaScript 입력 필드에 아래 코드를 추가합니다:
```
<script src="https://cdn.tailwindcss.com"></script>
```

이 중 편한 방법을 선택하여 Tailwind CSS를 WordPress에 적용하세요.

Tailwind CSS 스크립트를 추가한 후, Startupful에서 제공한 HTML 리소스를 WordPress에 붙여넣어 디자인을 적용할 수 있습니다. WordPress 편집기의 종류에 따라 다음과 같이 적용할 수 있습니다.

빌더 플러그인을 사용하는 경우에도 Tailwind CSS가 활성화되어 있어야 하며, 빌더의 HTML 위젯 또는 코드 삽입 모듈을 사용하여 코드를 추가할 수 있습니다.

Startupful의 HTML 리소스를 적용할 때 일부 테마에서 전체 넓이가 적용되지 않는 경우가 있을 수 있습니다. 이 문제를 해결하려면 다음 단계를 따라 테마의 컨테이너 설정을 조정하세요:

이 가이드를 통해 Tailwind CSS와 Startupful 리소스를 WordPress에서 원활하게 사용할 수 있으며, 필요한 경우 테마 설정을 통해 전체 넓이를 조정하여 원하는 결과를 얻을 수 있습니다.