HTML 웹 사이트를 WordPress 무료로 변환하는 방법? 가이드

게시 됨: 2015-05-18

처음에는 모든 웹사이트가 텍스트와 정적 HTML로 만들어졌습니다. 워드프레스가 없었고 HTML 웹사이트를 워드프레스 나 다른 CMS 시스템으로 변환 해야 했습니다.

많은 기업들이 여전히 온라인 존재를 위해 단순한 HTML 웹사이트에 의존하고 있습니다. 이러한 HTML 사이트는 일반적으로 본질적으로 정적입니다. 즉, 웹 사이트의 사소한 세부 사항을 변경하더라도 코딩 파일을 편집하면 됩니다.

20년이 지난 지금, 웹은 훨씬 다른 곳입니다. 웹의 25% 이상을 차지하는 WordPress는 점점 더 일반 사용자가 선택하는 콘텐츠 관리 시스템(CMS)이 되고 있습니다.

웹 사이트는 훨씬 더 복잡합니다. 사이트 제작자와 방문자 모두에게 더 풍부하고 즐거운 경험을 제공합니다. WordPress로 이전한다는 것은 처음부터 다시 시작 하여 현재 웹사이트에 투자한 모든 시간, 에너지 및 돈을 잃는 것을 의미 합니까?

HTML 웹사이트
- 정적 HTML 사이트에서 WordPress로 마이그레이션 사전 단계
HTML 웹 사이트를 WordPress 자습서로 변환하는 방법
- 방법 1
- 방법 2
- 기존 WordPress 테마를 사용하여 HTML 사이트 변환(가장 쉬운 방법)
- 4 Theme Matcher를 사용하여 HTML을 WordPress로 변환
- 5 HTML to WordPress 변환기 서비스
마이그레이션 후 수행해야 할 작업은 무엇입니까?
WordPress 대 HTML – 장단점
HTML을 WordPress 요약으로 변환하는 방법

HTML 웹사이트

귀하의 사이트가 어떻게 코딩되었든 방문자가 귀하의 사이트에서 페이지를 로드하면 브라우저는 모든 부분(서버 측 포함, 다른 디렉토리의 이미지 등)을 가져와 최종 정적 HTML에 모두 넣습니다. 페이지.

페이지의 일부 요소가 여전히 동적이더라도 코드 자체는 여전히 작동하는 WordPress 페이지로 이동할 수 있는 한 지점에 모두 함께 있습니다. 일부 예외가 있을 수 있지만 대부분의 사이트에서는 사실일 것입니다.

귀하의 사이트가 header.inc라는 파일을 호출하는 somepage.php와 footer.php라는 파일로 구성되어 있더라도 사용자가 브라우저에서 somepage.php를 볼 때 결과 소스 코드는 모두 한 곳에 있습니다. 정적 HTML 페이지로 손으로 코딩했습니다.

사이트를 WordPress로 변환하는 데 필요한 코드 유형입니다. WordPress를 설치하고 올바른 테마/플러그인만 있으면 누구나 고급 디자인과 기능을 갖춘 현대적인 웹사이트를 가질 수 있습니다.

정적 HTML 사이트에서 WordPress로 마이그레이션 사전 단계

WordPress로 전환할 준비가 되었다면 다음 4단계를 고려해야 합니다.

1. 기존 HTML 사이트 분석

귀하의 사이트에 관련성이 없거나 오래된 콘텐츠가 있는지 확인하고 발견하면 정리하십시오. 현재의 내비게이션 시스템을 살펴보고 개선할 수 있는 방법을 생각해 보세요. HTML 사이트 분석을 수행하면 WordPress로 마이그레이션해야 하는 콘텐츠, 기능 및 기능을 결정하는 데 도움이 됩니다.

이것은 WordPress 플랫폼에서 동일한 기능을 얻기 위해 어떤 플러그인을 설치해야 하는지에 대한 명확한 아이디어를 제공합니다.

2. 워드프레스에 대해 알아보기

WordPress 설치는 매우 쉬운 과정입니다. 대부분의 웹 호스트는 원 클릭 설치를 제공합니다. 익숙하지 않은 경우 사이트에서 작업할 새 플랫폼에 대해 읽고 정보를 얻는 것이 좋습니다.

3. HTML 사이트 백업

마이그레이션하는 동안 데이터 손실 위험을 방지하기 위해 정적 사이트를 완전히 백업하는 것이 좋습니다.

4. HTML 웹사이트를 WordPress로 변환

코딩 지식이 충분하고 사이트가 작다고 가정할 때 가장 좋은 방법은 기존 HTML 코드를 4개의 섹션(머리글, 바닥글, 사이드바 및 콘텐츠)으로 나눈 다음 각 섹션의 콘텐츠를 다음으로 복사하는 것입니다. 해당 PHP 파일.

사이트가 큰 경우 HTML 가져오기 2와 같은 HTML to WordPress 플러그인을 활용하거나 HTML을 WordPress로 변환할 사람을 고용할 수 있습니다.

HTML 웹 사이트를 WordPress 자습서로 변환하는 방법

정적 HTML 사이트를 WordPress 사이트로 변환하는 방법은 의심할 여지 없이 개인 취향, 원하는 시간/금전적 투자, 코드 기술 수준에 따라 달라집니다.

방법 1

HTML 웹사이트를 WordPress로 변환하는 이 방법을 사용하면 사이트의 디자인과 모양을 동일하게 유지할 수 있습니다.

1. 현재 호스트에서 HTML 페이지 를 다운로드합니다 . 이를 위해 WinHTTrack을 사용하십시오. 매우 사용하기 쉬운 훌륭한 무료 도구입니다. 이미지 폴더도 가져오십시오(또는 이전 사이트에 이미지가 있는 모든 위치).

2. 새 웹 호스트에 WordPress 를 설치 합니다.

영구 링크 구조를 "게시물 이름"(/%postname%/)으로 설정하십시오.
"검색 엔진이 이 사이트의 색인을 생성하지 못하도록 차단" 확인란을 선택합니다(모든 작업이 완료될 때까지).
(원하는 경우) 유지 관리 모드 플러그인을 설치하여 다른 사람이 새 WordPress에 액세스할 수 없도록 합니다.
무료 WordPress 플러그인 HTML 가져오기 2를 설치하십시오. 이전 사이트를 새 사이트에 "업로드"하는 데 사용하십시오. HTML 페이지의 전체 디렉토리를 가져오기 위한 사용자 가이드.

3. 1단계에서 방금 다운로드 한 콘텐츠 를 새 웹 호스트 파일 구조에 업로드합니다 . 예를 들어 "html-files-to-import"라는 폴더에 저장합니다. 새 사이트에서 WordPress의 미디어 라이브러리에 모든 이전 이미지를 업로드합니다.

4. 가져오기 실행

5. DOS 명령 프롬프트와 Excel 준비

DOS 프롬프트에서 HTML 파일이 있는 위치로 이동합니다("yourwebsite"라는 폴더에 파일을 넣고 C:\ 드라이브에 해당 폴더를 넣는 것이 가장 쉽습니다). 그런 다음 이 명령을 시작합니다. i. 디렉토리 > 파일.txt
Excel에서 files.txt 파일을 엽니다.
이제 엑셀로. 기본적으로 HTML 파일에 넣을 "표준" 코드를 렌더링하기 위해 "연결"을 포함하여 몇 가지 Excel 기능을 사용할 것입니다.
각 HTML 파일에 해당하는 표준 코드를 배치합니다. 당신은 이것을 할 수도 있고, 그것을 아웃소서에게 고용할 수도 있고, 이것을 자동으로 수행할 PHP 코드를 작성하도록 누군가를 고용할 수도 있습니다.

6. HTML 파일을 웹 호스트에 업로드합니다 . 새 웹 사이트의 ROOT(즉, 최상위) 폴더에 넣으십시오. 이미지 폴더도 ROOT에 업로드하는 것을 잊지 마십시오.

7. 새 사이트에서 모든 것이 여전히 작동 하는지 확인하십시오 .

8. 2단계 – "검색 엔진이 이 사이트의 색인을 생성하지 못하도록 차단"의 확인란을 선택 취소하고 HTML 가져오기 2 플러그인을 비활성화합니다.

9. 등록 기관에서 DNS 를 변경합니다 .

10. 사이트의 URL 이 올바른 IP(이전 IP가 아닌 새 IP)로 확인되고 모든 페이지가 올바르게 로드 되는지 확인 합니다. 네임서버가 업데이트될 때까지 몇 시간을 기다려야 할 수도 있습니다.

11. 잠시 후 이전 HTML 페이지를 제거할 수 있지만 필요하지 않습니다. 표준 참조가 처리하기 때문에 "중복 콘텐츠" 페널티를 받지 않습니다.

이전 ".html 페이지"를 새 WordPress 페이지로 연결하는 리디렉션을 .htaccess 파일에 추가하고 싶을 것입니다.

방법 2

목표가 정적 HTML 사이트의 콘텐츠를 WordPress로 가져오는 것뿐만 아니라 현재 디자인을 복제하는 것이라면 사용자 정의 테마를 만들어야 함을 의미합니다.

몇 개의 폴더와 파일을 만들고 약간의 복사 및 붙여넣기를 수행한 다음 결과를 업로드하는 작업만 포함됩니다. Sublime 또는 Notepad++와 같은 코드 편집기가 필요하고 HTML 사이트의 디렉터리와 새 WordPress 설치 디렉터리에 모두 액세스할 수 있어야 합니다.

1. 새 테마 폴더 와 필요한 파일을 만듭니다. 바탕 화면에서 테마 파일을 저장할 새 폴더를 만듭니다. 테마를 식별할 수 있도록 이름을 지정하십시오.

다음으로, 코드 편집기에서 몇 개의 파일(모두 새 테마 폴더로 이동)을 만듭니다.

스타일.css
인덱스.php
헤더.php
사이드바.php
바닥글.php

2. 기존 CSS 를 새 스타일시트에 복사 디자인을 복제하려는 경우 저장하려는 CSS가 최소한 일부는 있을 수 있습니다. 따라서 편집하려는 첫 번째 파일은 Style.css 파일입니다.

시작하려면 파일 맨 위에 다음을 추가하세요.

 /*
 테마 이름: 테마 이름으로 바꿉니다.
 테마 URI: 테마의 URI
 설명: 간략한 설명입니다.
 버전: 1.0
 저자: 당신
 작성자 URI: 귀하의 웹사이트 주소입니다.
 */

이 섹션 뒤에는 기존 CSS만 아래에 붙여넣습니다. 파일을 저장하고 닫습니다.

3. 현재 HTML 분리

다음은 기존 코드의 일부를 잘라내어 생성한 다른 파일에 붙여넣는 과정입니다.

먼저 현재 사이트의 index.html 파일을 엽니다. 파일 맨 위에서 여는 div class=”main” 태그까지 모든 항목을 강조 표시합니다. 이 섹션을 복사하여 header.php 파일에 붙여넣고 저장하고 닫습니다.
index.html 파일로 돌아갑니다. side class="sidebar" 요소와 그 안에 있는 모든 것을 강조 표시합니다. 이 섹션을 복사하여 sidebar.php 파일에 붙여넣고 저장하고 닫습니다.
index.html 에서 사이드바 뒤의 모든 항목을 선택하고 복사하여 footer.php 파일에 붙여넣고 저장하고 닫습니다.
index.html 파일에서 남은 모든 항목(주 콘텐츠 섹션이어야 함)을 선택하고 index.php 파일에 붙여넣습니다. 저장하되 아직 닫지 마십시오. 그러나 이제 index.html 파일을 닫고 마지막 단계로 이동할 수 있습니다 . 거의 완료!

4. Index.php 파일 마무리

새 테마의 index.php 파일을 완성하려면 생성한 다른 파일에 있는 다른 섹션(주 콘텐츠 외에)을 불러올 수 있는지 확인해야 합니다.

index.php 파일의 맨 위에 다음 php 행을 배치하십시오.

<?php get_header(); ?>

그런 다음 index.php 파일의 맨 아래에 다음 php 라인을 배치하십시오.

 <?php get_sidebar(); ?>
<?php get_footer(); ?>

이제 "루프"가 있습니다. 이것은 WordPress가 방문자에게 게시물 콘텐츠를 표시하는 데 사용하는 PHP의 기본 비트입니다. 따라서 새 테마의 index.php 파일을 만드는 마지막 단계는 콘텐츠 섹션에 아래 코드를 추가하는 것입니다.

 <?php if ( have_posts() ) : ?>
 <?php while ( have_posts() ) : the_post(); ?> ( have_posts() ) : the_post(); ?> 
  <div id= "post-<?php the_ID(); ?>" <?php post_class(); ?>> <?php post_class(); ?>> 
    <div class = "post-header" > 
       <div class = "date" ><?php the_time( 'M j y' ); ?></div> ); ?></div> 
       <h2><a href= "<?php the_permalink(); ?>" rel= "bookmark" title= "Permanent Link to <?php the_title_attribute(); ?>" ><?php the_title(); ?></a></h2> ><?php the_title(); ?></a></h2> 
       <div class = "author" ><?php the_author(); ?></div> ><?php the_author(); ?></div> 
    </div><!-- post header--> end post header--> 
    <div class = "entry clear" > 
       <?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?> ) ) the_post_thumbnail(); ?> 
       <?php the_content(); ?> 
       <?php edit_post_link(); ?> 
       <?php wp_link_pages(); ?> </div> 
    <!-- entry--> end entry--> 
    <div class = "post-footer" > 
       <div class = "comments" ><?php comments_popup_link( 'Leave a Comment' , '1 Comment' , '% Comments' ); ?></div> ); ?></div> 
    </div><!-- post footer--> end post footer--> 
    </div><!-- post--> end post-->
 <?php endwhile ; /* rewind or continue if all posts have been fetched */ ?> 
    <div class = "navigation index" > 
       <div class = "alignleft" ><?php next_posts_link( 'Older Entries' ); ?></div> ); ?></div> 
       <div class = "alignright" ><?php previous_posts_link( 'Newer Entries' ); ?></div> ); ?></div> 
    </div><!-- navigation--> end navigation-->
 <?php else : ?>
 <?php endif ; ?> ; ?>

index.php를 저장하고 닫습니다. 이제 테마가 완성되었습니다! 남은 것은 WordPress 웹 사이트에 업로드하는 것입니다.

5. 새 테마 업로드

이제 생성된 테마 파일을 새 테마 폴더에 저장합니다. 워드프레스를 설치합니다.

/wp-content/themes/ 안에 새 테마 폴더를 배치합니다. WP 관리 > 모양 > 테마로 이동하면 새로 생성된 테마가 표시됩니다. 활성화! 이 시점에서 할 일은 새 WordPress 웹사이트를 이전 사이트의 콘텐츠로 채우는 것뿐입니다.

6. HTML 사이트에서 WordPress로 콘텐츠 복사

WP 관리자에서 플러그인 > 새로 추가 로 이동합니다 . Stephanie Leary의 HTML Import 2라는 플러그인을 검색합니다. 이 플러그인이 설치되고 활성화되면 사용자 가이드에 따라 HTML 페이지의 전체 디렉토리를 가져옵니다. 이 후에 사이트는 WordPress에서 실행되는 이전과 같이 보일 것입니다.

기존 WordPress 테마를 사용하여 HTML 사이트 변환(가장 쉬운 방법)

위의 단계가 너무 집중적이거나 시간이 많이 걸리는 것처럼 보이면 다른 방법이 있습니다. 이것이 가장 쉬운 방법입니다.

WordPress에서 동일하게 보이도록 기존 HTML 디자인을 변환하는 대신 WordPress 마켓플레이스에서 사용할 수 있는 수천 가지 테마 중 하나를 활용할 수 있습니다.

무료 테마와 프리미엄 테마가 있습니다. 원하는 테마를 선택하고 압축 파일 패키지를 다운로드했으면 새 WordPress 테마를 설치/활성화합니다.

이 작업이 완료되면 새로운 WordPress 웹 사이트와 테마가 생깁니다. 사이트를 미리 보면 비어 있습니다. 콘텐츠를 가져오고 HTML 웹사이트를 WordPress 사이트로 변환하는 프로세스를 마칠 시간입니다.

WP 관리자에서 플러그인 > 새로 추가 로 이동하고 HTML 가져오기 2라는 플러그인을 검색합니다. 사용자 가이드에 따라 HTML 페이지의 전체 디렉토리를 가져옵니다. 그 후에는 이전 콘텐츠를 모두 갖게 되지만 새로운 모습을 갖게 됩니다.

4 Theme Matcher를 사용하여 HTML을 WordPress로 변환

Theme Matcher를 사용할 수도 있습니다. 자동 HTML에서 WordPress로의 변환을 제공합니다. 사이트를 입력하고 적절한 영역을 선택하기만 하면 됩니다. Theme Matcher는 기존 웹사이트에서 이미지, 스타일 및 레이아웃을 가져옵니다.

Convert-HTML-Website-to-WordPress-site-with-theme-matcher

5 HTML to WordPress 변환기 서비스

HTML to WordPress는 한 줄의 PHP를 작성할 필요 없이 HTML 디자인을 WordPress 테마로 변환합니다.

정적 HTML 웹 사이트를 WordPress로 변환할 서비스 계획을 선택할 수 있습니다. 이 옵션은 가격이 추가될 수 있습니다. 훨씬 저렴한 변환기 옵션을 선택할 수도 있습니다.

HTML to WordPress 변환기 서비스

변환은 완전히 자동화 되어 있으며 HTML에 "wp-" 접두어가 붙은 변환기 클래스를 추가하기만 하면 테마의 기능을 확장할 수 있습니다.

변환기는 각 HTML 파일에 대한 템플릿을 생성하고 자산을 참조하고 필요한 모든 PHP 기능을 채웁니다. Bootstrap, Webflow, Dreamweaver 또는 이미 익숙한 도구/프레임워크를 사용하여 웹 사이트를 만듭니다. 웹 사이트가 HTML을 사용하여 만들어지면 테마로 변환할 수 있습니다.

마이그레이션 후 수행해야 할 작업은 무엇입니까?

변환이 완료되면 WordPress 사이트에 최종 터치를 제공하기 위해 몇 가지 작업을 수행해야 합니다.

필요한 플러그인 설치 – HTML 사이트와 동일한 기능으로 새로운 WordPress 사이트를 강화하려면 편리한 플러그인을 설치하십시오.
끊어진 링크 확인 및 수정 – 웹사이트에서 끊어진 링크(404 오류)가 있는지 확인하고 발견되면 수정합니다.
사용자 정의 404 오류 페이지 설정 – 방문자가 존재하지 않는 URL에 액세스하려고 하는 경우 방문자를 WordPress 사이트의 관련 섹션으로 안내하기 위해 사용자 정의 404 오류 페이지를 추가합니다.
리디렉션 링크 – 웹 사이트의 콘텐츠가 새 웹 주소로 이동되었음을 검색 엔진에 알리려면 301 리디렉션을 설정합니다. 이를 위해 Simple 301 리디렉션을 사용할 수 있습니다.
검색 엔진 인덱싱 활성화 : WordPress 대시보드에서 " 설정 -> 읽기 "로 이동하고 " 검색 엔진이 이 사이트를 인덱싱하도록 허용 "을 선택하여 검색 엔진에서 사이트를 인덱싱합니다.
XML 사이트맵 생성 및 제출 : 귀하의 사이트가 가능한 한 빨리 검색 엔진 결과에 포함되도록 하려면 XML 사이트맵을 만들어 Google에 제출하십시오.

WordPress 대 HTML – 장단점

비즈니스 웹 사이트를 시작하는 것은 쉬운 과정이 아닙니다. 가장 큰 딜레마 중 하나는 정적 HTML 사이트를 선택할 것인지 WordPress로 갈 것인지입니다.

WordPress – WordPress는 CMS(콘텐츠 관리 시스템)로 인식됩니다. 비전문가 사용자가 웹사이트에 내용을 추가하고 수정할 수 있도록 간소화된 HTML 버전입니다.

CMS 사이트는 일반적으로 동적이므로 콘텐츠를 변경하는 빈도에 제한이 없습니다. 사진에서 전체 텍스트에 이르기까지 모든 것을 변경할 수 있습니다.

인터페이스는 매우 간단하고 사용자 친화적이며 배우기 위해 특별한 교육이 필요하지 않습니다. CMS 시장은 경쟁이 치열하지만 WordPress는 매번 경쟁을 이깁니다.

시작하기 전에 기억해야 할 또 다른 사항은 WordPress.com과 WordPress.org가 오픈 소스 CMS이기 때문에 상당한 차이가 있다는 것입니다. 반면 WordPress.com은 블로그 호스팅 서비스로 작동합니다.

워드프레스 사용의 장점:

누락된 기능을 사이트에 추가할 수 있는 수천 개의 플러그인을 제공합니다.
수정은 언제든지 가능하며 아무도 제한하지 않습니다.
HTML 설정에 비해 WordPress는 설정 시간이 훨씬 적습니다.

WordPress 사용의 단점:

그냥 설정하고 잊을 수 없습니다. 소프트웨어, 플러그인 및 테마에 대한 상시적인 관심과 지속적인 업데이트가 필요합니다.
해커는 제대로 보호되지 않고 업데이트되지 않은 웹사이트를 공격합니다. 업데이트를 따라가지 않으면 웹사이트가 전혀 작동하지 않을 위험이 있습니다.
WordPress는 쉽지만 초보자에게는 그리 많지 않습니다. 학습 곡선을 살펴보는 데 도움이 되는 많은 온라인 자습서와 포괄적인 자료가 있습니다.

HTML 정적 웹 사이트 – 템플릿과 같은 것이 없었고 웹 사이트를 만드는 유일한 방법은 프로그래밍 전문가를 고용하여 이를 수행하는 것이었습니다.

따라서 모든 웹사이트는 Static HTML(Hyper Text Markup Languages)로 구축되었습니다. 요점은 웹 사이트를 갖는 것이 었습니다. HTML 개발자를 다시 고용해야 하기 때문에 내용이나 레이아웃을 수정하지 마십시오.

HTML 웹사이트에서 콘텐츠는 정적 파일에 저장되므로 수정하기가 매우 어렵습니다.

HTML 웹사이트의 장점:

웹 사이트가 온라인 상태가 되면 업데이트하거나 백업할 필요가 없습니다. 대부분의 경우 해당 웹 사이트에서 변경할 사항이 없습니다.
HTML 웹사이트는 기본적이고 설정하기 쉽습니다.
크기와 동적 사이트보다 적은 리소스를 사용한다는 사실은 동적 사이트에 비해 상당한 속도 이점을 제공하여 훨씬 빠르게 로드합니다.

HTML 웹사이트의 단점:

마크업 언어에 전문성이 있어야 합니다. 그렇지 않으면 웹 사이트에 중요한 업데이트를 수행할 수 없습니다. 웹 개발자를 계속 고용하면 웹 사이트가 정말 작거나 사소한 정보만 표시하더라도 비용이 듭니다.

또 다른 중요한 단점은 플러그인을 추가 할 수 없다는 것입니다 . 즉, 심각한 기능 부족에 직면하고 있습니다.

HTML을 WordPress 요약으로 변환하는 방법

사이트에서 더 많은 것이 필요하든 템플릿을 염두에 두고 새 사이트를 구축하든 간에 변환 프로세스는 초보자에게 상당히 복잡해 보일 수 있습니다. 인내와 지식을 통해 어느 정도의 성공을 거두기 위해 필요한 일을 할 수 있습니다.

사이트가 활성화되면 새로운 작업을 수행하는 방법을 배웠고 그 지식을 웹사이트에 적용할 수 있었다는 사실에 자부심을 가질 수 있습니다.

위의 방법 중 하나 이상이 HTML 웹 사이트를 WordPress로 변환 하는 데 도움 이 되었기를 바랍니다. 다른 방법이나 튜토리얼이 있으면 알려주세요. HTML을 WordPress로 변환한 적이 있으며 이에 대한 경험은 무엇입니까?