HTML 템플릿을 WordPress 테마로 변환

웹 기술이 많이 발전했지만 여전히 HTML로만 만들어진 웹 사이트가 있습니다. 그들 중 하나를 소유하고 있다면 HTML 템플릿을 WordPress 테마로 변환하는 방법이 궁금할 것입니다.

다행스럽게도 해당 HTML 파일을 WordPress로 변환하려는 경우 원하는 대로 사용할 수 있는 몇 가지 옵션이 있습니다. 사용할 수 있는 기술은 수동 변환에서 모든 무거운 작업을 처리할 수 있는 전문가와의 협력에 이르기까지 다양합니다.

이 기사에서는 HTML 템플릿 변환에 대한 네 가지 접근 방식을 다룰 것입니다. 각각에 대해 HTML 기반 웹사이트를 WordPress 폴더로 가져오는 데 도움이 되는 지침과 리소스를 제공합니다. 다루어야 할 것이 많으니 바로 들어가 봅시다!

HTML 수동 변환

변환과 관련하여 첫 번째 옵션은 수동 접근 방식입니다. 이는 꽤 손이 많이 가는 과정이므로 원래 웹사이트와 새 웹사이트 모두에 대한 파일에 액세스할 수 있는지 확인해야 합니다.

일반적으로 이 용도로 SFTP(Secure File Transfer Protocol) 애플리케이션을 사용합니다. 웹 사이트에 액세스하면 다음 단계를 진행할 수 있습니다.

1단계: 테마 폴더 만들기

먼저 새 테마 파일을 보관할 폴더를 만들고 새 테마 이름으로 레이블을 지정해야 합니다. 코드 편집기를 사용하여 5개의 특정 파일을 생성할 수 있습니다.

• 스타일.css
• index.php
• 헤더.php
• 바닥글.php
• 사이드바.php

지금은 이 파일을 비워두고 방금 만든 폴더에 저장할 수 있습니다.

2단계: 기존 CSS 복사 및 붙여넣기

다음 우선 순위는 CSS(Cascading Style Sheet) 파일을 사용자 지정하는 것입니다. 여기에서 사이트의 다양한 스타일 요소를 모두 설명합니다.

맨 위에 파일에 대한 정보를 추가하는 것이 좋습니다. 실제로 WordPress의 경우 테마 디렉토리에 테마가 표시되기 위해 필요한 몇 가지 요소가 있습니다.

해당 정보 아래에 원래 웹 사이트의 기존 CSS 스타일을 붙여넣고 새 테마로 가져갈 수 있습니다.

3단계: 기존 HTML 분리

원래 웹 사이트에서 머리글, 바닥글, 사이드바 및 기본 콘텐츠 영역을 지정하는 HTML 코드는 모두 index.html 파일에 있을 가능성이 높습니다. 이제 각 요소를 WordPress 테마용으로 생성한 새 파일로 분할해야 합니다.

예를 들어 원래 웹사이트의 index.html 파일에서 'main' 클래스가 있는 첫 번째 <div> 태그를 찾을 수 있습니다. 이 태그 앞에 오는 모든 것을 복사하여 새 header.php 파일에 붙여넣을 수 있습니다.

그런 다음 'sidebar' 및 'footer' 태그에 대해 이 프로세스를 반복합니다. 각 요소에 포함된 코드를 복사하여 해당 PHP 파일에 붙여넣습니다.

이제 남은 것은 index.html 파일의 주요 부분입니다. 이것이 HTML 기반 웹사이트의 주요 콘텐츠 레이아웃을 구성하는 것입니다. 이 나머지 코드를 복사하여 새 index.php 파일에 붙여넣어야 합니다.

4단계: Index.php 파일 구성

다음 단계는 테마가 사이트의 구조와 스타일을 표시하도록 하는 데 필요한 파일을 새 색인 파일에서 찾을 수 있는지 확인하는 것입니다. 이를 달성하기 위해 WordPress 템플릿 태그를 사용합니다. 이들은 머리글, 바닥글 및 사이드바 파일을 검색하도록 테마에 지시하는 데 사용됩니다.

예를 들어 템플릿에서 다음 태그를 사용하여 만든 헤더 파일을 표시하도록 할 수 있습니다.

get_header();

이것을 index.php 템플릿 파일이나 헤더를 표시하려는 후속 페이지에 배치합니다. 바닥 글에도 동일하게 적용됩니다.

이해해야 할 새 템플릿의 또 다른 중요한 부분이 있습니다. 이것을 WordPress 루프라고 합니다. 템플릿에 게시물을 가져오라고 지시하는 PHP 코드 조각입니다. 표시되는 게시물 수를 제어하도록 사용자 정의할 수도 있습니다.

5단계: 새 테마 업로드

이제 새 테마를 실행할 준비가 되었으므로 해당 폴더를 웹 사이트의 wp-themes/content/ 디렉터리에 배치해야 합니다.

파일을 업로드하면 WordPress 대시보드에 로그인하고 모양 > 테마로 이동할 수 있습니다. 여기에서 새 테마가 나열되고 활성화를 클릭하여 사용을 시작할 수 있어야 합니다.

플러그인으로 HTML 콘텐츠 가져오기

이 프로세스를 처리하는 또 다른 방법은 플러그인을 사용하여 이전 HTML 기반 사이트에서 콘텐츠를 전송하는 것입니다. 불행히도 최신 버전의 WordPress와 호환되는 도구는 거의 없습니다. 그러나 WP Site Importer의 무료 평가판을 확인할 수 있습니다 .

이 플러그인은 전체 웹사이트를 스캔하고 움직일 수 있는 콘텐츠를 분류할 수 있습니다. HTML이 잘 구성되고 시작하기에 '깨끗한' 경우 가장 잘 작동합니다. 메뉴 및 링크와 같은 콘텐츠를 가져올 수도 있습니다.

하위 테마 사용

HTML 사이트를 WordPress로 옮기는 또 다른 방법은 자식 테마를 사용하는 것입니다. 이는 상위 테마와 동일한 기본 기능 및 스타일을 갖지만 상위 테마를 업데이트하더라도 사용자가 만든 조정 및 사용자 정의를 보존할 수 있습니다.

1단계: 테마 선택

WordPress Theme Directory에서 선택할 수 있는 잘 구축된 무료 테마가 많이 있습니다. 마음에 드는 것을 선택한 후에는 해당 파일을 웹사이트의 파일 디렉터리에서 사용할 수 있도록 설치해야 합니다.

그러나 이 상위 테마를 활성화할 필요는 없습니다.

2단계: 하위 테마용 폴더 만들기

다음으로 FTP 애플리케이션으로 파일에 액세스하고 wp-content/themes 디렉토리에 새 폴더를 만들어야 합니다. 이 파일은 부모 테마와 이름이 같아야 하며 끝에 "-child"가 추가되어야 합니다.

예를 들어, Twenty Nineteen의 차일드 테마를 만들려는 경우 Twentynineteen-child라는 폴더를 만들 수 있습니다.

이 설정은 필요한 나머지 테마 파일을 설정하면 자식 테마가 자동으로 부모 테마에서 기능과 스타일을 가져올 수 있음을 의미합니다.

3단계: 스타일 시트 설정

다음 단계는 style.css 파일을 설정하는 것입니다. WordPress는 부모-자식 테마 관계가 작동하도록 하기 위해 스타일 시트에 특정 정보가 필요합니다. 필요한 경우 원본 HTML 파일에서 추가 스타일 정보를 붙여넣을 수도 있습니다.

4단계: Function.php 파일 설정

기본적으로 작업 중인 두 가지 테마가 있으므로 WordPress에 자식 테마가 부모의 CSS에 종속되어 있음을 알려야 합니다. 이를 위해 wp_enqueue_style() PHP 호출을 사용할 수 있습니다.

먼저 function.php 파일을 만들고 자식 테마의 폴더에 넣습니다. 테마 종속성 및 계층 구조를 철자하는 enqueue 기능을 실행할 파일입니다.

5단계: 자녀 테마 활성화

이 새 파일을 웹사이트 서버에 업로드한 후에는 WordPress 대시보드로 돌아가 Appearance > Themes 로 이동할 수 있습니다. 거기에서 이제 자식 테마가 모두 준비되었음을 볼 수 있습니다.

자녀 테마에서 활성화를 클릭하여 웹 사이트 테마로 설정하십시오. 그런 다음 HTML 웹사이트 콘텐츠를 새 WordPress 사이트로 복사할 준비가 된 것입니다.

사이트 전환 서비스 구매

직접 변환을 수행할 시간이나 리소스가 없는 경우 변환 서비스를 확인할 수도 있습니다. 또한 다른 WordPress 콘텐츠를 마이그레이션하는 데 더 많은 리소스나 지원이 필요한 경우 여기 WP Engine에서 마이그레이션 및 변환을 위한 많은 솔루션과 리소스를 제공합니다.

1.WPGeeks 고용

HireWPGeeks는 풀 서비스 변환 옵션입니다. 모든 무거운 작업을 처리하고 모든 콘텐츠가 포함된 유연하고 반응이 빠른 테마 기반 WordPress 웹사이트로 끝납니다. 견적을 받으려면 회사에 문의해야 하지만 89달러부터 서비스를 계획할 수 있습니다.

2. 판타스텍 솔루션

FantasTech Solutions는 또 다른 HTML-to-WordPress 변환 서비스입니다. 그것은 HTML에서 고급의 잘 코딩된 WordPress 테마 템플릿으로의 고도로 전문적인 변환을 광고합니다. 비용은 한 페이지당 $297부터 시작한다는 점을 명심해야 합니다. 추가 페이지는 각각 $147부터 시작하며 정확한 가격은 복잡도에 따라 다릅니다.

WP 엔진으로 사이트 경험을 사용자 정의하십시오

큰 사업처럼 보일 수 있지만 HTML 웹사이트를 WordPress로 변환하면 다른 많은 기회가 열릴 수 있습니다. 매우 유연하고 확장 가능한 이 플랫폼을 사용하면 더욱 민첩해지고 새로운 콘텐츠를 신속하게 배포할 수 있습니다.

여기 WP Engine에서는 올바른 개발자 리소스가 프로젝트에 큰 영향을 미칠 수 있다고 믿습니다. 혁신적인 솔루션 외에도 모든 예산에 맞는 계획 및 가격 계층을 제공합니다!